Let’s Design Rock’n’Rolla Website Design Tutorials

Freebies, Inspiration, Photoshop, Tutorials, Wordpress

rock-n-rolla-website-design-tutorial
[ad#link-unit-post]
In this both Adobe Photoshop Tutorial we design website designs for Rock’n’Rolla designs, which is a showing some great tool techniques for design our own websites, even we can use in our WordPress blogs too, this is a really helping for web designers who loves latest and professional designs.

1. How to create RocknRolla style web design

In this tutorial I’ll show you how to create RocknRolla style web design to final ready-to-code photoshop file. I wrote incredible about my design preocess before. Today I jump right to PC. I have already idea about final design and i am going to show how can you make it in Photoshop.

1

OK, open Photoshop and download 960 grid system. This is my favourite web design framework.
This is screen of “960_grid_16_col.psd” from downloaded package.

11

As you can see, I added more guides and filled new areas by grey colors. Nothing complicated.

12

Next – I coloured it by colours that I found on RocknRolla movie poster.

13

Its time to apply first textures. There are thousands of free textures to download. You can google it to few minutes. As you can see, I changed bg colour of content part because it was very dark to apply some textures (in next steps)

14

I added some shadows (by brush) and brushes to header. As you can see I used eraser (one from “wet media brushes”) on footer.

15

Now I created the general part of header. I used “STENCILIA” font. Background is simple rectangle with texture. I am going to delete borders with pen tool.

16

Just by a Polygonal Lasso Tool I created some shadows between characters.

17

I added some textures to content part of design and finished “BLOGNROLLA” title.

18

I wrote some Lorem Ipsum texts and designed the date table and other posts elements.

19

I finished all parts of design. I added free RSS icon and free RocknRolla Twitter icon
I created some categories and archives too. Only for design sidebar.

19_

Tutorial RocknRolla Blog Design

Description and Design Brief by PSDThemes

I need a personal blog design. This blog will be used to collect all of my insterest in one place. I’m interested in Hiking, sucuba diving, outdoor sports etc. I want to show my twieeters on my blog page.

Basic navigation will work well; Home – Archive – Contact.

I will run on Categories for seperation. I m not planning to be global, targeted audiance is my close friends, inner circle of my life… I love texturized backgrounds like wood and I think it will match perfectly with my interests. I dont want to show lots of content on Homepage so for this reason I will use big picture and a few text for each blog posts.

Any color scheme is welcome, it’s up to your creativity. Blog will be called RocknRolla and I don’t have yet a logo. If you can write RocknRolla with nice font, it’s going to do the trick!! So this is what I want =)

Final Result will be:

2

Let’s Start Rock’n’Rolla Tutorial

First you must find design elements in your design brief.Because, you are building your design based on your design elements and here is list of design elements for this blog design;

– Basic nav . About – Archive – Contact
– Logo with nice font
– Big pictures and less text for each post
– Categories at side panel
– Twitter at side panel
– Recent Posts at side panel ( he didnt say this but it’s a blog,we can show recent posts etc)
– Texturized Background like wood
– some visuals for client interest (sucuba diving, hiking etc)
– try to work with shourtcuts, this is your best time saver knowladge.

and now visialize this elements in your mind. Start design in your mind =) you must arrange your design elements up to down in your mind. when you are ready, you can start to design easly becouse now you got all your needs for design a specific blog design =) let’s start

Step 1

Open your empty browser template Safari_Starterkit.psd (in your resources folder of this tutorial.)
i love working in browser template when I m designing a webpage,becouse it’s good to see in browser. it’s more true view of design what is look like in browser. you will catch difference between in work on browser design template.Trust me presentation of an work is another great art.

21

Step2

We need to resize vertical size of our document. best easy way for this usign Crop Tool.Zoom out and push to “C” key(croop tool shortcut) on your keybord and select your document outline witc crop tool then change bottom line. See picture below

22

Hit enter when size it’s enough for you.

23

Step3

Select browser footer part from your layer panel inside of Browser Folder and move it to bottom (How to move objects in photoshop: hit V key and move your mouse down or push to down arrow =)). After that select “page Background” layer from your layer panel and hit CTRL+T for Transform. See picture below

24

Step 4

Now we need a tiled background with wood effect.Find Wood_Tile.jpg from you Resources folder, inside of source files and open in photoshop.
Hit CTRL+A and select all document then from top menu choose Edit > Define Pattern, give any name then click ok and close it tile picture. See picture below

25

Step 5

Now we are on our design document again.Select Page Background layer from you layer panel and click to fill/adjustments icon from bottom then select Pattern from list. See picture below

26

Keep scale %100 and hit ok.

27

Step 6

and we got full page wood pattern but we just wanted to show this pattern in browser window. Now I will show you very usefull solution for this. you don’t need to cut out side of pattern layer for match to background layer, because we can mask Page Background layer! with this way when we resize Page Background layer our patter will fit anytime!! yes it’s great =)

How to mask?
Go you layer panel and push your ALT key (on windows) keep pushing ALT and move your mouse to horizontal line between Page Background and Pattern Fill 1 layer. if you are on line icon will appear like down arrow, left click and mask done! now our patter layer masking with Page Background layer. See picture below

28

Step 7

Hit T key (Type Tool shortcut) and start typing “RocknRolla”. Font “BULLDOZER” font size 24pt. color #000000.

29

go to your layer panel and double click on your type layer, it will open Layer Style and use following settings for this layer.

221

222

Gradient Editor settings: color #1a1a1a to #353535

223

if you do settings correctly, you will get final results like this. See picture below

224

Then for talk bubble, type Q with Versa, font size: 24pt, color #000000. I just typed “lore ipsum dolor” for bottom line motto for logo.

go to your layer panel again and push to CTRL key and select you logo layers ” RocknRolla – Q – Lorem ipsum”CTRL key while pushed (keep CTRL pushed for multiple select in Layer window). Then hit CTRL + G for grouping layers. if you start to manage your file early,it will give you more flexibilty for future works( when you need to chance layout or something).

225

Step 8

Now navigation part. Hit P key (Pen shortcut) and draw shape like this.See picture below
(how to use Pen tool? download this pdf please: link)

226

Step 9

After drawing shape go to your layer panel and click on Fill/Adjustments icon then select Solid Color, select random color from Color Picker panel (we gonna chance layer style,for this reason color not necessary), hit ok.

227

Step 10

go to your layer panel and double click on shape layer and change layer style of this layer. Use following settings please.

228

229

Gradient Editor settings: color #1a1a1a to #353535

231

Step 11

Follow Step 8 to Step 10 and create 3 buttons like this (keep in mind, layer arragement. wich button staying on top layer, it will be visible on top in your design):

Step 12

Now we gonna create highlight effect on buttons for nice visual. go to your layer panel and hit CTRL key then left click on Vector Maskthumbnail for select button area. See picture below

232

Step 13

then hit SHIFT key while pressig CTRL key for selecting multiple button areas. See picture below

233

Step 14

Now we select all button areas together.go to top menu Select > Modify > Contract Selection and type 5 pixel > ok.

234

Step 15

Hit B key (brush shortcut) and right click on your secreen and select soft brush 200px (master diameter) from brush list.

235

Step 16

Change brush opacity to %40 from top panel.

236

Step 17

open new layer top of buttons layer and keep brushing like this.

237

Your will get result like this

238

Step 18

Our buttons are ready and now we can write button names. Type About – Archives – Contact with PTF Nordic Font. font size: 18px Color: #FFFFFF

239

Step19

Change layer style of “About” layer to following settings

241

242

Step 20

We can copy and paste layer styles easy for time saving. just right click on layer and select Copy Layer Style

243

Step 21

Right click on “Contact” typed layer and select Paste Layer Style for apply.voilaaaaa!
(do this for archives layer too please)

244

Here is the final resaults of logo and menu section

245

Step 22

Now we need post sample for our blog. Hit M key (Margue tool shortcut) and select are like this.

Notice:
cyan colored lines on this screen are Guides. you can use CTRL+H for show/hide guides.

246

Step 23

After selecting area, go to your layer panel and click on Fill/Adjustments icon and select Solid Color, fill with #FFFFFF.

247

Step 24

We got nice area for post and we gonna create shadow for this area. Right click on layer(Color fill) from your layer panel and select Duplicate layer.See picture below

248

Step 25

Double click on Color Fill 26 layer and change color to black ( shadow color =))

249

Step 26

Hit CTRL+T for free transfor then right click on your document, select Wrap from list

251

Step 27

Move sides of shape and middle part will be bend like this

252

Step 28

When your shape is ready hit ENTER key on your numpad for apply transform (You have two ENTER key in your keybord, if you are working on Photoshop normal ENTER key work for general Enter duty but right hand side ENTER key(your numpad ENTER key) small one work for APPLY,keep this is in your mind please)

Step 29

Now we need to create blur for smooting our shadow edges. Go to your Filter tab at top menu and select Blur > Gaussian Blur and give 2px blur.

253

Final result will be like this.

254

Step 30

Our post area ready with nice shadow. Now we need header part for blog post. Let’s create.
CTRL+Click on layer mask and select area (See picture below). Then hit M key for Eliptichal Margue Tool, push ALT key and while keep pushing ALT key, you can deselect part of selected area for header selection.(if you push ALT key,your mouse pointer will change to [-] negative icon, it means you can deselect area of selected area) See picture below

255

Step 31

From your layer panel click on Fill/Adjustment icon and select Gradinent.

256

Gradient Editor settings: color #1a1a1a to #353535

257

Final Result

258

Step 32

Header part ready, now we need date area for our blog posts. Select Rounded Rectangle Tool for your Photosop toolbox.

259

Change radius to 10px from top panel

261

and crate shape like this

262

Go to your layer panel and click on Fill/Adjustments icon select Solid Color from list.

Step 33

Double click on this layer and change Layer style with following settings

263

264

265

Final result

266

Step 34

Nice buddys. We got good one transparet date area.Let’s work on details of this date area.
CTRL+Click on this shape layer mask and select shape area. See picture below

267

Step 35

Then Hit M key for Eliptichal Margue Tool, push ALT key and while keep pushing ALT key, you can deselect part of selected area.(if you push ALT key,your mouse pointer will change to [-] negative icon, it means you can deselect area of selected area) See picture below

268

Get selected are like this

269

Step 36

Go to your layer panel and clik on Fill/Adjustments icon and select Gradient from list.
Gradient Editor settings: color #2084FF to #054984

271

Final result

272

Step 37

Now we need date format. Hit T key for Type tool and write dates. See picture below
Font colors : #a0cbfd for “21” and # 5d727c for “Sept”

273

Step 38

Now next step is post header creation. Hit T key again and create type area and write some dummy text lorem ipsum. www.lipsum.com for dummy contents. (you can create type area with Type tool, draw rectangle with your type tool). See picture below

274

Font color #e5e3e

275

Step 39

Now we need picture are. Hit M key and select area like this.

276

Step 40

Open random picture in photoshop and hit CTRL+A (select all document) then hit CTRL+C (copy) and switch to your design document.

277

Now i’ll show you good trick; we alreadygot selected area at Step 38 and we have copyed picture in photoshop memory, now hit CTRL+SHIFT+V for paste in place. photoshop automatically creating mask for your picture!!what a great features =) See picture below

278

Step 41

Go to you layer panel and close it layer anchor for picture layer. this is important because if you didn’t close it anchor for masked picture layer, they can’t move together. With this linkage mask and picture will move together. See picture below

279

Step 42

Hit T key and select Type tool and create sample blog post. Remember step 38 please.
Font color : #666666

281

Step 43

Now we will create simple talk bubble for comments. Select star icon from your toolbar(in rectangular shape list) and right click on your document for shape listing. Select talk shape from list

282

Step 44

Draw shape with talk bubble and fill it with solid color black then type ” tagged as etc ” with Lucida Sans font color: #666666 font size: 10pt

283

Step 45

Our first post area almost ready, we just need a “read more”, “continue” button. Let’s create one.
Select Rounded Rectangle Tool ( hit U for shortcut) and change radius to 6px from top panel and create a shape. See picture below

284

Step 46

We can use same style for “continue button” like we created for date area. Go to your layer panel and select date area shape layer and right click on it. Select Copy Layer Style from list and then select “continue button” layer, right click > Paste Layer Style! taadaa!

285

Step 47

Now I wanted little color effect for continue button. CTRL+Click to layer mask on continue button layer and select button area.

286

Step 48

i just wan’t to select bottom area then Hit M key for Eliptichal Margue Tool, push ALT key and while keep pushing ALT key, you can deselect part of selected area for header selection.(if you push ALT key,your mouse pointer will change to [-] negative icon, it means you can deselect area of selected area) See picture below

287

Step 49

Go to your layer panel and click to Fill/adjustments icon and select Solid color from list.
Pick a solid color: #63b1d2

288

Step 50

Reduce opacity of this layer to %50

289

Step 51

and type “Continue Reading”

291

Final results

292

Step 52

Our first blog sample ready!!! haha.
Now go to you layer panel and select layers created for single post sample and hit CTRL+G for group layers.

293

Step 53

We need three box for homepage blog posts (check fineshed work of this tutorial) but we don’t need to create each box one by one. We can Duplicate layer groups!

294

Step 54

From your layer panel select grouped post and right click on it and select Dublicate Group from list. After dublicating layer group hit V key (move shortcut) and move down your new post sample! taadaa! Repeat this for one more time for showing three boxs on homepage.

295

Step 55

Our box’s ready now we need side panels. Let’s create Categories side panel. Select Rounded Rectangle Tool and change radius to 8px from top panel and draw shape like this

296

Step 56

After that fill you shape with solid color, any color will be ok because we will change layer style. We can use our logo layer style for this shape. Select your logo layer from your layer panel and copy / paste layer style to side panel shape box ( please remember Step 46 for how to copy and paste layer style)

Final result of side panel

297

Step 57

Now we need header shape for “Categories” box. Select Rounded Rectangle Tool and use same radius 8px and draw shape like this then fill it with solid color.

298

Step 58

I used special premade layer style for this header part and description of this layer style will take too long on this tutorial. you will find layer style file in your source files of this tutorial, there is a info txt about how to install layer styles into Photoshop.

So open your Layer styles panel (if you can’t see on your photoshop workflow, go Windows > Styles ) and select this style.” see picture below

299

Step 59

Hit T key and type “Categories” header and type subheaders “Music,Movies,etc…” based on following settings

2211

Then double click on “Categories” typed layer from your layer panel and use following settings please

2212

2213

Step 60

Yes it seams our box Vertical size little large but we can reduce very easy. Because our created shapes are vector shapes. Let me tell you how to chance shape size easy:

From your toolbox select Direct Selection tool (white arrow, pay attention this is not Arrow tool (V), it’s staying below of normal arrow tool on your toolbox) then go to your document screen and select bottom part of your shape with Direct Selection Tool. See picture below

2214

Notice:
After selecting bottom part of your shape, you will see empty mini squares at left and right corners on your shape. Empty squares are means selected squares, black squares are means unselected squares.

Step 61

Now we need line seperators between categorie subheaders. Select Pen brush(B) from your toolbox and right click on your document, select pen size 1px and color #FFFFFF

2215

Step 62

Go to your layer panel and create new empty layer top of categories box layer ( How to open new layer: there is a icon at bottom of your layer panel like empty page icon, staying left hand side of trash icon, click on it for new empty layer) and draw a line between categorie headers then change layer Opacity to %10. See picture below

2216

if you draw all line between categorie headers, final result will be like this

2217

Step 63

Now we gonna create three more boxes; one for RSS, one for Recent Comments and another one for twitter. go to your layer panel and dublicate our categories box layer then follow Step 60, change box sizes.

2218

Three boxs created

2219

Step 64

After creating your new boxes, let’s work on RSS Feed section. Get icons from this link.Open RSS icon in your photoshop, copy and paste into your document and use following settings for fonts.

2221

Font color settings: use #FFFFFF for “RSS Feed” and use #9f9073 for “Ream my posts…”

Step 65

Use following settings for Recent Post box

2222

Step 66

Get twitter bird from icons folder and use it like this.

2223

Notice:
Our browser design template has allready made guides. Just push CTRL+H for show/hide guides.
Your final result will be like this

2224

Step 67

and now we gonna create last part of this design, footer. Go to your layer panel and select your background pattern layer ( we are selecting this layer because we will create footer part on this layer) and select footer area like this. See picture below

2225

Fill it selected are with Solid color pick a color white.

Step 68

Dublicate latest created solid shape and hit CTRL+T and change vertical size. See picture below

2226

Step 69

Copy our categories header bar style and paste to footer bar layer.See picture below

2227

Step 70

Open premade graphics from your resources folder and put below those footer layers. Please pay attention on layer arragements. Premade graphics must be stay back of footer bar graphics.

2228

Step 71

Dublicate our logo group from your layer panel and move it to footer.

2229

Step 72

Hit CTRL+T and resize it and reduce layer opacity to %20.

2231

Thats it! your finals result will be like this. I know all post images are same but you can change easy rite? hahah =)

So here is Rock’n’Rolla!!!

2232

Enjoyed this post?

Don't forget to subscribe to our RSS-feed and follow us on - for recent updates

About the Author

Comments and Discussions

  1. links for 2009-07-07 « pabloidz, 7 July 2009

    […] Let’s Design Rock’n’Rolla Website Design Tutorials Dzinepress (tags: css photoshop) […]

  2. Converting a Photoshop PSD File to an XHTML & CSS Web Site - Creating Mockups | Resources for Web Development Students @ Robin's Blog, 9 July 2009

    […] Edit 7/08/09 – Let’s Design Rock’n’Rolla Website Design Tutorials […]

  3. Bjorn, 14 July 2009

    Seems like a really good tutorial, great work. BUT i really can’t find a “Resources folder” that you’re refers to in this tutorial? Would be great if you could add that

  4. Terrie Spera, 16 March 2010

    Thanks for sharing do you have feed here? I’d like to add them to my reader

About Dzinepress | Advertise | Contact | Privacy Policy | Community News | Submit News