How to Design a Website in Photoshop
The first thing you need to do when designing your website in Photoshop is to take two important decisions:
- what the minimum screen resolution where your design can be viewed entirely without any horizontal scrolling;
- color palette of your website.
So open your Photoshop, click on File then New and set the following parameters for your new document:
As you see we have defined minimum width of 1000px. You might want to choose less than that, but we believe 1000px is safe enough. You can refer to our article Screen Resolutions and Web Design to see why we believe it's safe and even preferable.
We are choosing following colors to be main components of our website color palette - #adbaea, #f7b9c5 , #c8fff4, #fff4c8. Here is how they look
You don't have to create a separate document or a special layer for the color palette. You may just keep it all in mind or simply experiment with colors, but doing so will save you time later – you will be able to refer to it any time.
So go back to your new document. You might need to zoom in with Zoom Tool (keyboard shortcut Z). Choose it, then right click and choose zoom mode. The best two modes for our work are Fit on Screen and Actual Pixels. For now Fit on Screen will be fine – this way we can see the whole picture at one glance without scrolling.
Right now you have only one layer, which is called Layer 1 by default. It is better to get used to work accurately right from the start which will save us a lot of time later. So, let's give proper names to every layer so that we can easily find it later. Rename layer 1 by clicking on where it's written Layer 1 and type instead Main BG. If you don't see layer panel, you might need to press F7. F7 allows you to hide and unhide this panel at any time. Most times we need it there, because we will be referring to it all the time.
So with Main BG layer chosen set the foreground color to light beige #fff4c8. You set the foreground color by clicking on the first of the two colored squares on the tools panel. The color palette will appear and you can either pick color according to your visual preferences, or set it manually by typing in color number in the box next to # sign. Now choose paint bucket tool (keyboard shortcut G) and click anywhere on where your future website should be to fill its background with this color.
Sometimes you won't be able to find the paint bucket tool or other tools we will mention. Whenever you see a little triangle arrow next to the tool icon it means that there are some hidden tools behind it. To see what's there simply left click and hold for a few seconds, you will see a list of all hidden tools. Paint bucket tool is often hidden behind gradient tool. Both have B as their shortcut, so if by pressing B you get gradient tool chosen instead of paint bucket tool, then click that little arrow next to gradient tool and hold for a second or two, then when the list appears simply click on paint bucket tool.
Let's proceed with our design. Create a new layer by pressing Ctrl+Shift+N. Since we agreed to do things in an accurate way and name the layers right from the start, name this layer Featured BG and click OK. Now you have two layers Main BG and Featured BG, and Featured BG should be chosen by default. Make sure that's it's chosen, because if you are doing this for a first time and were clicking around you could still have Main BG chosen. So if this is your case, simply click on where it's written Featured BG and now you have it chosen. This will allow us to create new images right over main backgrounds beige color.
Now set as your foreground color to #adbaea just like you did for beige background before. It will become nice baby blue color. Chose rectangular marquee tool (keyboard shortcut M) and on the top bar find where it's written Style. The default style for style is Normal, but since we agreed to be accurate choose Fixed Size instead and set the width of 1000px and height of 300px. Leave some space for logo and navigation menu on the top and click on left edge of your document. It will choose an area that you must now feel with that blue color using paint bucket tool (B), so the result should be something like this
Note, if you don't see the rectangular marquee tool you should follow the same steps as you did when you were looking for paint bucket tool. It might be simply hidden behind other similar tools that have the same keyboard shortcut.
Now press CTRL+Shift+N to create the third layer which we will call Columns BG. This area will be right under featured area and will have three little columns with headlines and introduction to other articles that are continued on other pages. We don't want to leave its background just plain color, so we will fill it with pattern that we are about to create.
To create a pattern open a separate document by clicking Ctrl+N or by choosing File, then New. Set width and height of your new documents to 8px and of course keep the background transparent. What you will have now is a tiny dot. To work on it you need to zoom in. In our case it is 2600% is good enough . After zooming in you will be able to see little squares that you will fill with your custom pattern.
Choose pencil tool (keyboard shortcut B. Again it is likely to be hidden, so click and hold on whatever gets chosen by clicking B, then chose pencil tool from the menu you will see.) Make sure that its size is 1px and hardness 100%. This is set in upper left corner when your pencil tool is chosen. You will have a little pencil in top left corner and next to it a number with a small arrow next to it. Click on arrow and set the size and hardness as above. Set foreground color to a49e36. Now create an image of X shape by filling the squares with the color. You will have something like this:
Now click on Edit then choose Define Pattern and name it somehow.
Now go back to your website document, make sure Column BG layer is chosen, choose rectangular marquee tool (M) once again, set its style to the fixed width of 1000px and height of 300px. Choose paint bucket tool (G) and instead of filling with foreground color choose to fill it with pattern you've just created. Just like with pencil tool, when your paint bucket is chosen you will have paint bucket image in the top left corner. Next to it you will have a drop down menu where you can choose how you want to fill your layer. The default is background color, but this time choose Pattern instead. In the next little box on the top you will have to choose the pattern, since you are likely to have more than one. Click on arrow, find your pattern and then click anywhere on the area you've chosen with rectangular marquee tool and you will see that it will get filled with that X pattern.
We don't want to leave it the way it is now, since the color is too bright for our color scheme, so we will make it more transparent. We go to layer panel, make sure Column BG is chosen and set opacity to something like 14% or to your taste. Now it should look much better. You need to zoom to actual pixels to take a correct decision. All we want is just some barely visible pattern as a background.
The last thing we have to do before proceeding with the smaller details of our design is footer background. So once again press CTRL+SHIFT+N to create a new layer, call it Footer BG, choose rectangular marquee tool (M), set style to fixed 1000x45 px width and height and fill it with color FDEAAE. Now you probably still have pattern fill since this is what you did last. No problem, simply click on arrow and change it back to Background and fill it with plain color # FDEAAE. Here is what you should have by now (of course you are unlikely to see pattern details on this photo, but have a look just to take a general idea:)
We will continue designing logo and other details in Part 2.