Bring your own laptop is going to be there. My hero box needs to come up a little bit, lovely. And what I want to do is I'm going to have to use this so I'm going to go to my navigation box and the bring your own laptop logo I'm going to move across, cant see it because its over this side here but I know if I hold shift, drag it across, it'll move it along in a nice perfect line. So I'm going to zoom in, there's a lot of work to fix it up so I'm going to zoom in a bit. Line it up and you'll notice that they’ve all moved to my mobile version. What I'm going to do is click hold and drag but holding down the alt key first click and hold and drag, move it across, get it centered ish over here.
So I've selected both of these by holding command and clicking both of them or control on a pc. So the things I want to start with is the navigation here and the hero box. So what were going to do is were going to start with the mobile site, so were going to get started building a couple of parts of it, dragging parts to the desktop across and then re build the menu. It may be a fad I think its probably around to stay, as a nice new icon for mobile menus. So smashing magazine we looked at this earlier, watch this, If I collapse this down, they're decided no burger, they’ve got this word menu and that’s totally cool but you can see in my chrome plug in they’ve used the burger. The big thing to decide is whether you're going to do burger or no burger. There are lots of different options, have a look through this site, there's a crazy amount to pick from, they're all flavours of similar things. Where’s some other ones? This one here I like just the burger by itself when it clicks there's a drop down menu from it. There's another option here where they stack, you can see here the desktop view, but when it gets to mobile, they stack as nice big buttons on top of each other. This thing here clicks and the whole site shifts to the right and this menu appears. This one here, we've got this thing called the burger or the nav sandwhich or the three horizontal lines whatever you want to call it. Its an incredibly long link so use the link on the screen now to go and find all the different useful links everywhere now were not going to have a chance to go through them because there are so many different ways of considering mobile menus, but lets look at the main groups. Knowing which one to pick can be difficult a really good site here is this site. Because the limited space, you cant have our big menus that we have on our desktop view. What next Dan? FREEĪlright in this one were going to look at mobile design and probably the most important part about looking at a mobile site, is probably the navigation, how you get around. Conclusion - I don’t want this to be over. Using Adobe Generate to make image export amazingĤ9. Production video - completing our mobile viewĤ8. Production video - finishing up our desktop viewĤ5. Layers - find what you need quickly with layer searchĤ3.
#WEBDESIGN IN PHOTOSHOP FREE#
Where to get commercial use, free icons for your design FREEģ8. Masking images for rounded courses & circlesģ4.
#WEBDESIGN IN PHOTOSHOP HOW TO#
How to mask your images using a clipping mask FREEģ3. Where to get commercial use free imagesģ2. Production video - adding all of our textģ0. How to design using web safe fonts via Google FontsĢ8. Expanding & fixed width text boxes FREEĢ6. Adding structure to your site with the vector shapesĢ5. Screen sizes for desktop, tablet & mobileĢ3. What is technically possible in web designġ7. Testing on iPhone & iPad using Adobe Device Previewġ6. Tips for zooming & navigating your documentġ5. Understanding responsive mobile & tablet designĨ. Getting your workspace ready for UI workħ. What is Photoshop’s role when designing a website FREEĥ. What do we need to deliver at the end of our project? FREEģ.
0 kommentar(er)
