Photoshop For Web Design Beginners – 2 – User interface Explained

July 24, 2019 posted by

let's look at Photoshop interface now Photoshop is much easier if you split it up into its four main areas these are the toolbar on the left hand side and then directly related to that is the properties bar and then we also have the palettes here and then in the middle in just a moment we're going to have the canvas and that's where all the magic takes place so we have toolbar for selecting the tools of what we want to do the properties bar that allows us to select settings within each tool we have the palettes over here or the windows that allows us to select different things with our design and then we have the actual canvas where all the magic takes place so let's take a look at the tool bar the very first tool up here is the move tool and if you just leave your mouse over a tool for just a second or so you'll see that their peers and it tells you the very very useful shaaka so for move is V so first V and that's something you'll be using a lot in the course or try and remember that one so let's go down we've got the marquee tool here now actually 1 2 3 4 5 & 6 are all about selecting stuff so if you move from eyedropper tool this is actually used for selecting actual colors we've got the crop tool this is for selecting the part of it you want and if I click and hold I can see that there's actually more tools hiding underneath one of my favorite ones is the magic wand so the magic wand that allows you to select certain areas of a design I suppose and it has the great way of doing also the quick selection tool allowing you to select specific areas the lasso polygon and magnetic tools are ones for doing your own selection so you can actually draw around things and we'll be looking at that later another popular one is the marquee tool and this is for drawing boxes or elliptical ones around specific areas something very very useful and again I can use em for this one so if you just look further down now we've got the patch tool and then click and hold and you mean you may have another one selected red eye tool very useful if you're not a great photographer like me we've got the brush tool again and they're something very very useful and we'll be looking at how to install more brushes as well and here we have the clone stamp tool so if you need to move one thing to another place I don't know maybe you want to give someone three eyes or something you can actually do that the history brush not a big one that I use a lot I tend to use undo so the history brush does allow you to see all the things you've done wrong are all the recent things that you've done next one eraser tool I never use it thought I'd be honest ladies and gentleman I never use it because I prefer to use other methods like the layer mask tool so I can just draw things on and draw things out because a razor tool is gone and it's gone forever so I probably don't want to use that one next one is the old gradient and paint bucket tool so paint bucket allows you to paint one whole color and the gradient is two colors or maybe many depending on the settings you've got we've got the blur tool next here and sharpen as well blur is quite nice if you want to sort of remove things from the background and highlight specific areas of a picture or photo another one here is dodge and burn so you've got things making it lighter or making things brighter and also darker as well the pen tool is very very useful it's actually better when you use it in Illustrator but Photoshop doesn't have it as well and it's for selecting specific shapes and you can draw your own shapes the dreaded text tool why do I say dreaded because it is a bit of a pain when you're working in Photoshop but I'll show you some tricks on how to use it properly next one is the direct select and select tool path select and these are for selecting things like shapes that you've created and here's the shape tool itself so now we've got rectangles rounded rectangles for buttons and things ellipse which is a fancy name for a circle polygon and you can select how many poly do you want the line tool and the custom shape tool which is one of my favorites and the next one we have here is the hand tool now if you just want to practice this keep your left hand or on the left hand side of your keyboard that's it and then use your thumb and then that is the same one for that so if you press space it actually does the hand tool and that allows you to move around the canvas very useful and we'll be looking at that later and last but not least is the zoom tool which is Z on your keypad and that allows you to zoom in and zoom out next we're going to be looking at the color palette just here let's take a look at the color picker which is just down here on the bottom left hand corner so the color picker has two main areas it has here which is a sort of saturation of the color and then over here is the actual color chooser itself so if you want to have a blue you first select the hue and then select your blue if you want to have a green alright look mean no and if you want to have a green you just click on here and you can see how the colors are changing and for those of our web designers it's this number here that's very very important later and you gradually get to learn these ones and what this done for is red these two here are green and these ones are blue and we can test that by going zero zero zero zero FF you can see that's a perfect blue now if you do want to select a perfect white let me show you a tip so if I clover click over here I'm trying to select the perfect white but it's still not all the F's here or two five five here it's not perfect so to do that try this for me click and hold and move off way way way over there like that good and you can see that this is now two five five it's perfect absolutely perfect white and again we'll try that for the black click and hold move down and there we go perfect black and not only what you're going to eat very quickly like that and you've got perfect white and so click OK and then you've got your colors here the one below is the background as you can see here click ok and this one is the foreground especially useful when you're doing gradients so for example I can go from sort of blue to a darker blue like this click OK and you can see I will use that for my gradient and we'll use the gradient tool a little bit later we've done the toolbar on the color bar let's take a look at the properties bar so it would stand at the top again and you can see how as I select the tools the properties bar changes so for example if I've got the move tool selected the properties bar at the top gives me all the different tools to do with that now Auto Select is a very useful one but a bit of a pain sometimes so I recommend having that turned off what it allows you to do is click on a specific item on the screen and it will select the layer but if you don't want to keep doing that turn it off the next one is the marquee tool alright so you can select specific areas and again here you can see what you're doing whether you want to subtract and have tracked different ones and one of my favorites is text because here I can change my font very easy and also my size and also left and right left and right aligned and if I want to change the color I just click here click OK so the properties bar is directly related to the toolbar so just big spend about five minutes just going through each one of these and just seeing how this changes and what kind of things you can expect on the properties bar we've had a look at a lot of the user interface and the only thing we have left is the panel's over here now this is how I like to keep mine which is having the info panel on the top right and the layers down here so what I'm gonna do is I'm just gonna reset my workspace and I'd like you to join me as well so just do reset essentials now what that does is puts us all at the same point okay now color hmm not really useful because I've got it down here especially for what we will be doing it as web designers so I'm actually just gonna either pull that off or just double click adjustments not really gonna use this week as we're gonna use a different way to get our adjustments there double-click now here's the most important layer for web designers it's actual layers so this is a panel that is an absolute must for your toolbar so what we're going to do now is add the info so we're just going to go to window and you can see here all of these different choices character and also paragraph is something that we use a lot but the one that we're going to be using at the moment is in force we're just going to move here click on info as you can see info is jutting out the side here not exactly where we want it so we're going to move it we're just going to click and hold and drag it into place just a little bit above there and you'll notice that a little blue line appears let go and there it is perfect now we need to hide the properties one click and they're gone and this is a perfect sort of user interface for a web designer so the next thing we need to look at is the rulers now to do this we just need to do a quick new document so just do file and new and it doesn't matter what's here right now just click OK now to get the rulers we just have to go to view and rulers but we always know that's a bit boring so let's just do command and our controller now on a PC boom now you'll see the rulers along the left and the top here and then all we need to do is right-click on it and just double check that this has pixels now the reason that we do that is whenever you're doing web design you normally work in pixels when you're doing things like print design then you might use centimeters millimeters and inches but for our web designers we're pixel perfect we go there's an overview of the interface for Photoshop so remember on the left hand side we've got the old toolbar there and just you have to click and hold and you get to see what's underneath each one of these as you click you'll see the properties bar change so like I said take a few minutes to have a look through all the different tools if you want to know what they're called just leave your mouse over for a few seconds and it'll pop up including the shortcut now one story for me is that one of my bosses actually did this for me took off the toolbar and then closed it and then I freaked out but the reason he was doing that is to help me learn because as soon as you learn those shortcuts the quicker you'll be come to get it back just go to window and tools here so we had a look at the panels on the right hand side and then go in and we went through the windows menu for that and we looked at some of the useful ones things like layers layers and more layers which are really useful for as web designers the adjustments in color we can do elsewhere next thing we had a look at was the ruler and we did that with command anar or control and half your PC users and it was a nice easy way just a right-click inside it and select pixels because remember us web designers need a nice workflow and always to be pixel perfect so I hope you enjoy using Photoshop it will take you not too long to get used to it but as soon as you do you'll find that all of the other programs become easy as well so good luck and have a look around

1 Comment

One Reply to “Photoshop For Web Design Beginners – 2 – User interface Explained”

  1. Alexis Trasviña says:

    this is great! Thanks!

Leave a Comment

Your email address will not be published. Required fields are marked *