Chapter # 5
Adobe Photoshop– Designing Website
Step 1 : Mockup
Before we start designing, we need to plan out the requirements, looks and the
functionality. Then we need to fit these ideas into a layout to execute them visually.
Mockups and wire frames are greatly useful to create layouts with lot of flexibility. It
is a best practice and highly encouraged in the Industry.
I put the below one together using only grey tones. That way we eliminate color from
the scene at this point. So that we can concentrate on the layout as a whole and
avoid messing up with colors. That gives much freedom to quickly alter and rearrange
things. A mockup can be as detailed as you want. For this purpose I am going with
the below one. Just briefly defining the layout and what goes where.
Step 2 : Set up the Canvas
So we have a blue print for our layout. Let’s actually put the design together! We are
going to create a 960 pixel wide layout. Create a new document at 1200 x 1500.
Step 3 : Create the Header
Let’s create the header of the layout! Make a selection that is 465 pixels in height.
Fill the selection with a gray value first and later use the Layer Styles to add colors
and gradients. Follow this throughout the design to maintain a visual hierarchy.
Add Gradient to the header. Double click on the layer thumbnail. Select Gradient
Overlay. Create the below 2 color gradient.
Step 4 : Create Texture Pattern
Now create a simple checker pattern and apply to the header. Pick the Pencil Tool,
set the brush size to 2 pixels and add two dots that are touching each others corners.
Turn off the background and select the dots. Choose Edit > Define Pattern.
Step 5 : Adding the Logotype
The background is pretty much completed. Now add the logo type. Before adding the
type add a highlight that stays behind the logo. Pick a soft brush with #19535a. Add
a spot
Step 6 : Navigation
Add the navigation links.
Step 7 : Content Slider
Make selection that is 580 x 295 pixels.
Step 9 : Finishing up the Header
We almost finished the header. Let’s add a subtle shadow effect to the finish things
off! Create a shadow just as we created earlier using the brush tool.
Leave 1px gap between the header and the shadow.
Step 10 : Apply Gradient to the Background
Create a light grey to white gradient.
Step 11 : Add Slider Rotation Controls
Create rotation controls.
Step 12 : Create Content Divider
Select the Pencil Tool and draw 1 pixel line. Pick light gray (#aaaaaa).
Hide the edges smoothly using gradient mask.
Step 13 : Adding the Main Content
It is time to get into the actual content part. This is a 3 column layout. We need to
create 3 equal columns with some padding between them. I did a simple calculation
and divided the available space into 3 equal width boxes with 25 pixels padding
between them.
Add guide lines to the boxes. Then remove the boxes. And these are the columns.
Step 14 : Creating Footer and Finishing
Make a selection for the footer and fill it with a grey value.