ikreateit.com

Final Image Preview

Before you fire up Pho­to­shop and start cre­at­ing, let’s take a look at the fin­ished lay­out. We will be design­ing a one page port­fo­lio that can be used for design­ers, graph­i­cal artists etc. You can down­load the fin­ished PSD file for free at the end of the tutorial.

Click on the image for a full size preview.

What you will need

In order to fol­low along with this tuto­r­ial, you will need:

Adobe Pho­to­shop (you can also use another image edi­tor of your choice)
960 grid frame­work (they have PSD tem­plates, don’t panic)
Twit­ter Eggs from Graphic Left­overs (you will need a free account to download)
Blog­ging Icon Set from Icon­Shock, down­load­able at DesignM.ag
Social Media Book­mark Icon+ from nouveller.com

Of course you can also use any icons of your own choice, I just wanted to give you the sources of the ones I used in my design.

Step 1 — Set­ting up the document

For this tuto­r­ial I will assume that you have some knowl­edge of Adobe Pho­to­shop. I am not using any dif­fi­cult tech­niques, but I expect you to know where to find tools or at least know what I mean by crop­ping, select­ing, or lay­ers. If those terms don’t leave ques­tion marks in your eyes, fol­low along.

First of all, head over to the 960 grid sys­tem web­site and down­load their pack­age that includes the CSS files and var­i­ous tem­plates for design appli­ca­tions. Unpack the down­loaded .zip file and you will find a ‘tem­plates’ folder with the Pho­to­shop tem­plates we will be using. If you have never heard of the grid sys­tem and won­der why I am using it — the short ver­sion is: it will help later with the cod­ing of the lay­out. For a detailed intro­duc­tion to the 960 grid sys­tem check out either this tuto­r­ial at NETTUTS or the video screen­cast with an in-depth explanation.

Open the ‘960_grid_12_col.psd’ in Pho­to­shop. You will see a doc­u­ment that is 1020px by 1020px and has a lot of ver­ti­cal guides and red col­ored areas. The ver­ti­cal guides show where the columns are and the red areas help with the visu­al­iza­tion. I usu­ally turn the red areas off so they won’t inter­fere with the color perception.

We will now add some hor­i­zon­tal guides to help with the layout. As you can see from the pre­view image, the lay­out is divided into three sec­tions: header, body, and footer. The hor­i­zon­tal guides help us to posi­tion the nec­es­sary ele­ments. I per­son­ally find them also use­ful when I want to deter­mine very roughly if the seg­men­ta­tion I have in mind is visu­ally appealing.

Click on image for larger view.

The exact loca­tions for the hor­i­zon­tal guides are mostly gut feel­ing for me, but I try to adhere to the basic design prin­ci­ples, in this case espe­cially: white space! You can see that there are 100px of empty space above the head­line and lots of empty space in the footer. By leav­ing enough white space, you don’t over­whelm your site’s vis­i­tors with visual ele­ments or a crowded page but make the user expe­ri­ence much better.

Step 2 — Cre­at­ing the background

For set­ting the back­ground, select the back­ground layer. It is marked with a lock, which means you can’t edit it. Dou­ble click it and cre­ate a new layer from the background.

Select the Gra­di­ent Tool and choose a soft lin­ear two color gra­di­ent going from grey (#f0f0f0) to blue (#8cbcd6). Drag the Gra­di­ent Tool across the doc­u­ment to apply the effect. You can vary the spread of the respec­tive col­ors by choos­ing where you start or end with the gra­di­ent. Exper­i­ment until you have an effect you like.

After you have applied the gra­di­ent, go to Fil­ter –> Noise –> Add Noise. That will pro­vide us with the sub­tle pat­tern of the back­ground and will it make look more inter­est­ing and less plain. Choose Gauss­ian for ‘Dis­tri­b­u­tion’ and check ‘Mono­chro­matic’. Set the value to some­thing that looks ok to you; I set it to 2.45%.

Step 3 — The Headline

Now that we’ve set up the basic doc­u­ment, let’s start to add some con­tent. First is the Head­line which your visitor’s will see first due to it’s size. Since it is so dom­i­nant, make sure to use it for some­thing impor­tant — say­ing Hello, intro­duc­ing the area you work in … what­ever fits your needs best.

The spe­cial thing about the Head­line is that it appears to have been cut out of the page. This effect can be achieved very easily. Pick the Type Tool and set it to the font Old Repub­lic, font-size to 72pt and color to white, then type your head­line.  Set the Layer Fill to 0% (that’s the magic part), then apply a Layer Style of Inner Shadow with the set­tings shown below to achieve the recessed effect.

As you can see in the pre­view, the ‘Kreate’ of iKreateIt is a strik­ing blue gra­di­ent. Now, if we would only want to change the color of the word, we could do that eas­ily. But since we want to apply a gra­di­ent, we actu­ally have to work on a new layer.

Dupli­cate the layer of text you’ve just writ­ten an delete every­thing except the word ‘Kreate’. On the orig­i­nal layer, delete only the word ‘Kreate’ and use the space bar to move the ‘It’ away from the rest of the text, cre­at­ing some space. Move the word ‘Kreate’ into that space (hint: if you press the SHIFT key while drag­ging the word with the Move Tool, you will stay on the same hor­i­zon­tal line).

The layer with the word ‘Kreate’ will have the Inner Shadow already applied to it. In addi­tion, add a lin­ear Gra­di­ent Over­lay (#005c9d — #40a5db). Once you’ve fin­ished, dupli­cate both lay­ers so the head­line is more readable.

Step 4 — The Intro Text

Next we’ll write the short intro­duc­tion. Try to keep it to two or a max­i­mum of three lines, so the area won’t look crowded. Use the Para­graph Tool to enter the text: select they Type Tool, but don’t sim­ply click where you want to write but drag open a text box that will hold your text. The advan­tage: you can eas­ily con­trol the text behavior.

Since I don’t want to use images or other meth­ods later on to dis­play the text, I set the font to the web safe Hel­vetica, font-size to 18pt and the color to #8abad4.

Step 5 — The Back­ground for the Content

The hor­i­zon­tal guides that we inserted in Step 1 will come in handy now. Select the Rec­tan­gle Tool and draw a rec­tan­gle between the guides at 320px and 800px. Take another look at the screen­shot above that detailed the pages three sec­tions to see between which ver­ti­cal guides the box is positioned.

Add a Stroke (#113f5f) and a Gra­di­ent Over­lay (#005c9d — #40a5db) to the layer.

In order to achieve the glassy effect, we will over­lay the rec­tan­gle with an ellipse. Cre­ate a new layer. Choose the Ellipse Tool and cre­ate a large ellipse that is longer than it is wide. Fill it with white. Then, with the shape selected, go to Edit –> Trans­form –> Rotate. Drag and rotate the ellipse until it cov­ers up the upper left half of the rectangle.

For a sub­tle effect, set the Opac­ity of the ellipse layer to 10%. If you want it more pro­nounced, increase the opac­ity. Now we have to elim­i­nate the parts of the ellipse that are not cov­er­ing the rec­tan­gle so they won’t be vis­i­ble on the rest of the lay­out. Since we can­not cut or erase shapes, right click on the layer and chose ‘Ras­ter­ize Layer’.

Then select the rec­tan­gle layer and with CMD/Apple key pressed, click on the shape in the lay­ers palette. It should now be selected (i.e. have the mov­ing out­line around it). Now select the ellipse layer again and then choose Select –> Inverse from the menu (or CMD+Shift+I). Now every­thing except the rec­tan­gle is selected — because we want to cut away the parts of the ellipse that are not cov­er­ing the rec­tan­gle. Erase the parts of the ellipse we do not need. You will now have a rec­tan­gle with a nice glossy effect applied.

Step 6 — The Twit­ter Egg

Thanks to Twit­ter I stum­bled upon this beau­ti­ful set of Twit­ter icons made in egg-shape. Pick the egg you like and paste it as a new layer into your doc­u­ment. Make sure the Twit­ter layer is above the rec­tan­gle that we just cre­ated. Switch to the Eraser Tool and remove the shadow beneath the egg since we will be adding our own, more sub­tle one.

Scale the egg to make it smaller and fit the design more (Edit –> Trans­form –> Scale). Then switch to the Ellipse Tool. Draw a small, flat ellipse beneath the egg, not wider than the egg itself. Fill it with a dark blue (#0d4972). Then go to Fil­ter –> Blur –> Gauss­ian Blur and choose a radius that looks good to you. Accept the changes and voila — you have a nice shadow beneath the egg, mak­ing it appear to hover above ground.

Step 7 — The Speech Bubble

There are prob­a­bly enough ready-made shapes out there that you can use to cre­ate the speech bub­ble, but you can do it your­self just as eas­ily (and save the time for the web research). I found that the shapes that come with Adobe PS are not really what I had in mind. And remem­ber: if you need the guides in PS or want them to dis­ap­pear to get a bet­ter look at your lay­out, you can always hit CMD+H.

Select the Rounded Rec­tan­gle Tool and draw a rec­tan­gle. Fill it with white. Then cre­ate a new layer and select the Pen Tool. Use it to cre­ate a small tri­an­gle beneath the rec­tan­gle. Right click on the path and choose ‘Make Selec­tion’. With the Paint Bucket Tool, fill the selec­tion with white. Now it looks already like a speech bubble.

Since we want to apply an inner shadow, we need to merge both the rec­tan­gle layer and the tri­an­gle layer so they are one object. Select both lay­ers in the lay­ers palette, right click and choose ‘Merge Lay­ers’. Now you have only one layer for the speech bub­ble. Apply an Inside Stroke of 1px (#025e9f) and set the opac­ity of the stroke to 12%. We want it to be subtle.

Then add an Inner Shadow and set the opac­ity to 18%. Now it looks like the speech bub­ble is cut into the page. But it still appears arti­fi­cial with its white back­ground; it doesn’t really fit the page. We can change that eas­ily by chang­ing the opac­ity of the entire speech bub­ble layer to 50%.

As in Step 4, use the Type Tool to draw an area to type in within the speech bub­ble and insert any text you like — remem­ber: only 140 char­ac­ters.

Step 7 — The Email Envelope

Insert the email enve­lope from the Blog­ging Icon Set into your doc­u­ment as a new layer. Make sure that the layer is beneath the back­ground layer for the con­tent, oth­er­wise we can’t ‘hide’ the enve­lope behind it.

Go to Edit –> Trans­form –> Rotate and tilt the enve­lope to an angle that seems appro­pri­ate to you. Now we just need it to loose it’s color so it fits with our new color scheme.

Select the mail layer and then go to Layer –> New Adjust­ment Layer –> Hue/Saturation. To make sure you apply the adjust­ments only to the mail layer, hover your mouse on the divid­ing line between the mail layer and the adjust­ment layer while press­ing ALT. Once your mouse pointer changes, click and the adjust­ment will only be applied to assigned layer.

Move the sat­u­ra­tion slider on the adjust­ment panel all the way to the left to ‘de-color’ the email shape. To give the enve­lope some tex­ture and remove the shiny clean look, set the mail’s layer prop­erty to Overlay.

Step 8 — The Content

Since the steps for adding con­tent in the three con­tent areas (left box, right box, bot­tom box) are more or less the same, I will only go through them once and let you repeat the steps as often as necessary.

Now, with the dis­tri­b­u­tion of con­tent on the page, the ver­ti­cal guides from the 960 grid sys­tem come in handy again. If you have them switched off, switch them back on by hit­ting CMD+H. See­ing the columns will help you decide on how wide you want your con­tent to be and where to posi­tion it exactly.

For the head­ings, I chose another web safe font — Geor­gia. Con­trary to the other fonts in this design, it is a serif font, but I thought that inside the con­tent area and just for the head­ings, it would be a nice con­trast. I set the font-size to 24pt, color to white, and font-style to italic. I also applied an inner shadow with the color #3498d0.

Quick Tip: Just dupli­cate the first header layer and drag the copies around with the SHIFT key pressed down. That way you ensure that the head­ings are ver­ti­cally and hor­i­zon­tally aligned.

To draw the lines, use the Line Tool. Set the line width to 2px and hold the SHIFT key pressed while draw­ing the line — it will make it eas­ier to keep it straight. Assign the line a color of #147ec8. Dupli­cate the line, make sure the layer is above the other line layer and then nudge the sec­ond line 1 pixel down­wards. Change the color to #7dafcc. That will give you the nice inset effect.

As with the head­ings, dupli­cate the two lay­ers two times and use them for the other con­tent areas.

For the text, use the Type Tool, draw the text box and fill it with text. The text box will take care of line breaks, which will make your life much eas­ier than just putting in the text and hit­ting enter a dozen times. For the text, I again used a sans-serif font, Hel­vetica, which is web safe.

In the ‘About’ sec­tion (right box), use the Rec­tan­gle Tool to cre­ate the photo place­holder. Draw the box, fill it with #0f6dab, and give it a white inner stroke of 5 pixels.

The Fea­tured Items in the bot­tom box are of course also cre­ated with the Rec­tan­gle Tool. I applied a 1px inside stroke with the color #14486c to con­trast it slightly against the back­ground. The glassy effect is achieved the same way we did before in Step 5 (Ellipse Tool), so I won’t cover it again. Just cre­ate one fea­tured box and then dupli­cate it as often as you need it to reduce the amount of time for the design.

For the back and forth arrows I used a shape that Pho­to­shop already pro­vided. Select the Cus­tom Shape Tool and then dis­play all avail­able shapes. You will find that, by stan­dard, the arrow points to the right. To make it point to the left, just cre­ate a new layer, use the shape tool on it and then go to Edit –> Trans­form –> Flip Horizontal. Set the opac­ity of the layer to 50% and then apply an inner shadow with the opac­ity of 57%. That will give you once more the nice recessed effect.

Step 9  - The Footer

In the footer, we have the same effect applied to the font Old Repub­lic as in the header. There­fore, we can save time by sim­ply select­ing the Head­line layer we cre­ated in Step 3 in the lay­ers palette, right click­ing it and select­ing ‘Copy Layer Style’. Then select the ‘Fol­low Me’ text in your footer, right click it and select ‘Copy Layer Style’. As we did in the header, dupli­cate the font lay­ers so they will be more readable.

Insert the social media icons as sep­a­rate lay­ers. Choose one and apply to it an inner shadow with both the Dis­tance and the Size set to 3. Copy this style, select all other icons and apply the style to all of them at once.

Then select all lay­ers that have social media icons and hit CMD+G. That will group all lay­ers into one folder. Select the folder and set the layer prop­erty to Lumi­nos­ity. That turns the col­or­ful icons blueish. Using this method, you can eas­ily switch back and forth between the col­ored and blue ver­sion, mak­ing it eas­ier to cre­ate sprite tem­plates if you want to apply hover effects in the cod­ing later.

Final Result

So, there you are. If you fol­lowed along, I hope you have come to a sim­i­lar result or at least the result you desired. Thank you for your time. I appre­ci­ate feed­back and if you liked the tuto­r­ial, please share it. Depend­ing on the feed­back, I plan to fol­low up with a tuto­r­ial on how to con­vert this lay­out into a HTML/CSS based site.

Down­load the PSD for Free!

Click on the box for your download.