Hi all,
In this tutorial we learn some basics of website designing while trying to make a chess-based theme/template for a website or a blog. I will start coding this design as soon as I finish with this tutorial.
What we will make is this:
Note that this tutorial more about Photoshop tricks and web design basics. Its not about how to make this JPEG in Photoshop… Anyone can do that. So lets begin!!
1. Open up a new document, size 1100×800 px with a Black background. This is the main file in which we will be working.
2. To make a chess pattern, we need to make a chess pattern. 🙂
Open up a new document of size 16×16 px, transparent background.
Select the Rectangular Marquee Selection Tool.
In the toolbar at the top, select “Fixed Size” as the type, and size 8px by 8px.
Color the image in this manner:
3. Go to Edit>Define New Pattern, save it with any name.
4. Now close this document (no need to really save it). Move back to the original document and create a new layer.
5. Fill in the new layer with White color. Double-click on the layer in the Layers Palette to open up the Blending Options.
6. Select “Pattern Overlay”. Use the following settings. Click the small arrow next to the pattern image to find your newly created pattern in the list.
7. Now, one of the most important tools when it comes to web design, is the ruler and guidelines. These help you to maintain a fixed ratio/size/alignment without any problems. Symmetry is a very big issue with web designing.
So enable you gridlines and rulers. Go to “View>Rulers” to show the rules on the sides, and press “Ctrl/Cmd + ;” to toggle Guides. To create a guideline, simply drag out from the ruler. ie. click in the area where the scales are, and drag out to the right position. Create guidelines in this fashion:
Now to explain some basics:
Observe that there are 5 columns.The first and the last are simply spacers to give the website a clean look. Very important.
The 3 in between are equal in width. This gives you a symmetry, which pleases the eye even if you dont look at it specifically.
Dedicate space for headers and footers so that you know what goes where.
8. Now, pick up the Rectangular Marquee tool, and make a selection as shown. Photoshop should automatically snap the selection to the uides. If not, go to “View>Snap to>Guides”.
Go to “Select>Save Selection”. Save the selection with the name “main_body”. This will allow you to merge this selection with others without having to create it again.
