WEBEXPEDITION18 Never Stop The Exploring

In this tutorial I will show you how to create very stylish vintage Caffe-Break Themed Blog Layout. We will mix icons, brushes with stock photos and blend modes to achieve the effect.

It’s very detailed tutorial, so prepare yourself for a long run. Make nice warm nescaffe and we’re ready to start.

Take a sneak peak of what we are going to create.

STEP 1: Setting Background

Create new document in photoshop: 1020x1600px, resolution 72 pixels/inch with transparent background.

Add vertical guidlines by choosing View -> New Guide, at 0px and at 1020px to mark the limits. Go to Image -> Canvas Size to resize the document making the canvas widht bigger (1460×1600). This way our design will be centered into the big document and we’ll be able to see how it looks on widescreen resolutions.

It’s time to place background texture. Download Table Surface 01 by ~DH-Textures from deviantART, open it in photoshop, copy and paste it into document and rotate it for 90 degrees. Go to Image -> Adjustments -> Brightness/Contrast and make following adjustments to make background a little darker:

Name this layer “background”.

STEP 2: Header

Let’s start working on header. As you can see there is a lot of elements in the header. It’s a real mess!

Step 2a: Paper Note

First element we’re going to add is a piece of paper below the book on the right side. Pick up the Rectangle Tool (U), set foreground color to white and draw a white rectangle.

Add the following layer styles to paper.

Set the foreground color to #241811 take the Type Tool and write some text to put on our paper. The font I used is Luna Bar and I used lipsum generator to generate text. Set the font size to 36pt. It’s not really important how you will place text above paper, because after finishing adding text goto Layer -> Create Clipping Mask (Alt + Command + G on keyboard) and now text is perfectly fit onto paper thanks to clipping mask. Duplicate text layer to make text more visible and merge this 3 layers into one layer. Name this layer “paper”.

Now pick up Lasso Tool (L) and start to create the jagged edges on your paper.

When the selection has been made goto Select -> Inverse then hit the delete key on the keyboard. Now press Command + T and rotate the paper slightly and move it to the top right corner. You will then be left with this.

Step 2b: Notebook

Let’s continue with adding elements to the header. Next is notebook. Download image of Notebook 1, and cut it out using your favourite tool (pen or lasso tool). Place notebook in our document and resize it. Pick up Type Tool (T), choose Journal font set the font size to 18pt, font color to #60412d and write some text over the notebook pages. Duplicate text layer.

Add Drop Shadow to notebook layer.

Select text layers and notebook layer and group them into “nootebook” group. Press Command + T on keyboard to invoke Transform Tool, rotate Notebook group slightly and place it into top left corner.

Step 2c: Old Book

Download image of Old Book from here, cut it out using Pen or Lasso Tool (but in this case you can do it by using Magic Wand Tool (W)), and import to our design. Rotate a bit a place it in the right corner over the paper like shown on the picture. Name this layer “old book”.

Apply Drop Shadow to Old Book layer.

Step 2d: Coffee Cup

I found this amazing free Item Coffee PSD File by ~AuroraDesign on deviantART. Download and pickup cup of coffee and place into our design. Resize a bit to make bigger and add a Drop Shadow layer style.

This cup of coffe looks amazing but I want it to make it more realistic, so download caffè espresso photo from stock.xchng and open it in photoshop. Pick up Elliptical Marquee Tool (M) and make selection like shown on the picture.

Copy, paste into our design and place over cup of coffee. Resize to fit perfectly and change Blend mode to Overlay. Now it looks perfect. Merge this two layers in one layer and name it “coffee cup”.

But this cup of coffee it’s to much brand new so let’s make it a bit older. Download Heavy Scratch brushes, make sure that foreground color is black, open the brush tool (B), load Heavy Scratch brushes, pick up Scratch Heavy brush, create new layer above coffee cup layer, adjust the diameter to make scratch bigger then coffee cup, and paint with brush tool. Name this layer “scratch”. Don’t worry because scratch layer is bigger then coffee cup, while you’re still on scratch layer, goto Layer -> Create Clipping Mask (Alt + Command + G). Scratches are now apply just to coffe cup layer. Lower the opacity of scratch layer to 25%.
Not looking bad, eh?

Move coffee cup along with scratch in place. Group those two layer by pressing Command + G on keyboard, and name this group “espresso”. What we should have now is this.

It’s time to make a mess with coffee stains. Download CoffeeHappens RELOADED by ~env1ro brushes, set foreground color to #975709, open Brush Tool (B), create new layer above paper layer, and add a few coffee stains around i below coffee cup. Name this layer “caffee stains”.

Download Wrinkled Crumpled Paper, cut out with Pen (P) or Lasso Tool (L), and place it into our design. Resize it to fit perfectly, add Drop Shadow from Layer Style and place near coffee to make more mess. Give ‘em a name “wrinkled paper”.

Step 2e: Blog Title – Background

Create rectangle with Rectangle Tool (U) like shown on the picture, fill with white, and add following layer styles:

Name this layer “blog title background”. Now Command + Click on Layer Thumbnail to make selection, pick up Polygonal Lasso Tool (L), choose Intersect With Selection and make small triangle selection like shown on the picture.

Here comes the magic – goto Layer -> New -> Layer Via Cut (Command + Shift + J) and we just created our fold. Name this layer “fold”.

Goto Edit -> Transform -> choose Flip Vertical and after that Flip Horizontal. Voila – this is folded background.

Step 2f: Blog Title – The Title

To create The Title I’m going to use Adobe Illustrator. So, let’s start, open Illustrator, create a new document and with the Horizontal Type Tool (T), type out BLOG TITLE with the with the font of your choosing. I am using Rockwell Extra Bold as my font at size 72pt.

With the text selected, take off any stroke and fill.

Open the pop-up menu in the Appearance panel and chose Add New Fill. Keep the black color of the fill.

Select the new fill in the Appearance panel and go Effect -> Stylize -> Scribble. Change the values as shown below.

Select the Stroke option in the Appearance panel and give the text a 2 pt stroke.

With the Stroke still selected in the Appearance panel, go Effect -> Distort & Transform -> Roughen and enter the following values.

And that’s it. Here’s sketchy title. Don’t close Illustrator because we’re going to use it later to create more sketchy titles.

Copy and paste it as pixels in our design, and place it over blog title background. Change the blend mode to Multiply. Lower opacity to 80%. Name this layer “title”.

Select “blog title background”, “fold” and “title” layers and group them (Command + G) to “blog title” group. Now move this group below “notebook” layer.

For now we’re going te left header as is and move to the main content area.

Step 3: Main Blog Area

Step 3a: Background

With Rectangle Tool (U) create a big white rectangle and name it “blog paper”.

Add following layer styles to “blog paper”.

Duplicate this layer by pressing Command + J on keyboard, and move copy below. Now invoke Transform Tool by pressing Command + T and rotate a bit this layer.

Step 3b: Posts

First I’m going to create post thumb. Open any picture that you want to be your post thumb, with Rectangle Marquee Tool (M) make a selction, copy paste and paste into design, and resize. My thumb is 180x156px. Place it like shown on the picture and apply Stroke in Layer Style.

Pick up Rectangle Tool (U), choose Paths and draw nice rectangle path around post thumb.

Set foreground color to #4f3928, open Brush Tool (B) select Hard Brush 3px and change master diameter to 2px. Create new layer, open Paths, right mouse click on working path and choose Stroke Path. Make sure that brush is selected and click ok. Remove path.

Name this layer “thumb outline”.
Use the Horizontal Type Tool (T) to write down post title. For font choose Graublau Sans Web font, set size 30pt and font color to #342920.

Now let’s add meta information. Once again pick up Horizontal Type Tool (T), for font choose Arial, size is 12pt and color is black. Now pick up Rectangle Tool (U) and draw a small orange (#e79926) rectangle below the meta text.

Use Horizontal Type Tool (T) to create Text Box, font is Arial, font size is 14pt, font color is #342920, style italic. Fill text box with post description.

Create 2 more posts with different titles and thumbs.

Step 3c: Sidebar

Move on to the sidebar content.
First I’m going to create Search form. Download first brown paper, open it in photoshop, with Rectangle Marquee Tool (M) make selection, copy and paste into our design. Resize it and place it in top right corner of paper. Apply Drop Shadow from Layer Style. Give this layer “search background” name.

We’re going to separate the drop shadow from the layer and put it on it’s own layer below the “search background” layer. Right Click on the layer style icon now sitting on the right hand side of the “search background” layer in the layers palette and way down at the bottom choose Create Layer. A little warning will pop up letting you know that not all layer styles can be created as layers… but this one can, so click OK.

In the layers palette you’ll now notice a new layer beneath the “search background” layer called “search background’s Drop Shadow”.
With the “search background” layer selected it’s time to go ahead and pull the edge of the sticker right off the background. With the Rectangular Marquee Tool (M), I’m going to make a square selection on the left hand side of the “search background”.

With the selection made select Edit -> Transform -> Warp from the main menu. Grab the lower left hand corner handle and drag it up and right until the corner looks bent enough.

Choose Rectangle Marquee Tool (M), make a selection over “search background”, create new layer above “search background” and fill it with any color. Apply following Layer Styles. Name this layer “search box”.

Choose Type Tool (T), for font use Graublau Sans Web, at size of 18pt, for color pick #342920 and turn on Faux Italic, and type “Search for something”. With this Search Box is finished. Group “search background”, “search box” and text “Search for something” into “Search” group.

Time to add a few banners. Pick up any banner you want to place, sized 125x125px and place them into design.

Next we’ll add Recent Posts section to the sidebar. First I’m going to create background for the Recent Posts header. With Rectangle Tool (U) create slik rectangle and fill it with #ffd3ac. Apply Drop Shadow from Layer Style menu.

Add a small detail to header background – download wonderful brush pack from littleboxofideas.com, Free Retro Circle Scribbles Brush Pack For Photoshop, set #60412d for foreground color, create new layer, pick up Brush Tool (B), load brush pack, choose Retro_Circle_Scribble8, set master diameter to 38px, and paint once as shown on the picture. Lower the opacity to 50%.

Pick up Horizontal Type Tool (T), choose Graublau Sans Web font, set size to 20pt, color to #342920 and type Recent Posts.

Now let’s add same post titles to this section. Invoke Brush Tool (B), again choose Retro_Circle_Scribble8, set Master Diameter to 38px, color is #60412d, create new layer and make one Circle Scribble. This time don’t lower the opacity of this layer.
Call Horizontal Type Tool (T), for font choose Arial, size 16px, color #342920 and type first post title.

Pick up Brush Tool (B). Open your brushes palette by going to Window -> Brushes, or hit F5 on your keyboard. Once open, click on “Brush Tip Shape” within the Brushes palette and select a very small brush like 1-5px (mine is 3px).

Uncheck Shape Dynamics and Smoothing. Adjust the “Spacing” to create the dots. Select #8a6d55 for foreground color. Hold shift, and drag perfect dotted line!

Add couple posts titles using the described method (I add 2 more). Recent Posts section finished!

Continue with next section – Friends. Create new layer, make selection with Rectangle Marquee Tool (M) like on the picture and fill with #d3d3d3. Name this layer “friend background”.

Then goto Filter -> Noise -> Add Noise and after that apply Drop Shadow from Layer Style menu.

Pick up Horizontal Type Tool (T), choose Graublau Sans Web font, set size to 20pt, color to #342920 and type Friends. Invoke Brush Tool (B), again choose Retro_Circle_Scribble8, set Master Diameter to 38px, color is #000000, create new layer and make one Circle Scribble. Create dotted line as described above.

Call Horizontal Type Tool (T), for font choose Arial, size 14px, color #342920 and type your friends list.

There is only one thing left to be created in sidebar – wordpress badge! Download Free Hand Drawn Doodle Icon Set for Bloggers, open wordpress logo and drag it to our design. Apply Color Overlay from Layer Style menu.

Jump to Illustrator and create WORDPRESS sketchy text. Import to Photoshop, resize and change the blend mode to Overlay, and apply Color Overlay from Layer Style menu. Call Horizontal Type Tool (T), for font choose Graublau Sans Web, size 14px, color #60412d and type powered by. You should have something like this.

Sidebar is now finished!

Step 4: Date stamps

For date stamps background I’m going to use part of “search background”. Select “search background”, pick up Rectangle Marquee Tool (M) and make selection as shown.

Copy and paste into new layer and name this layer “date background”. Move “date background” between two “blog papers” and apply Drop Shadow.

Invoke Horizontal Type Tool (T), font is arial, size is 36pt, color #342920, and type the date. Then change font size to 24pt and type Month.

Repeate this steps for every post on the page.

Step 5: Navigation

For navigation background I’m going to use this amazing old paper image. I can’t remember from where I’ve downloaded, because it’s on my hard drive for ages. You can now download it from here. Open it in Photoshop, make selection with Rectangle Marquee Tool (M), copy and paste it in our desing, between “blog papers”. Apply Drop Shadow.

Create Navigation links with Horizontal Type Tool (T) using following settings:

For marking active page, download T9 Creative Doodles, open Brush Tool (B), load doodles, create new layer, set foreground color to #000000, pick up T9 Creative Doodles 800, set diametar to 137px and paint once around Home.

You should have something like this.

Step 6: Subscribe Buttons

Download Sugar Bag by by ~bhorwat from deviantART, cut out the bag, copy and paste into our design. Resize it, then goto Image -> Adjustments -> Hue/Saturetion and make following adjustmens:

Apply Drop Shadow and move it up.

Download Handycons – a free, hand drawn social media icon set open RSS icon and drag into our design and place it over sugar bag. Change the blend mode to Multiply.

Now, pick up Horizontal Type Tool (T), choose #f8a208 for color, font is Hand of Sean and type RSS feed. Change Blend mode to Multiply.

Duplicate sugar bag, goto Image -> Adjustments -> Black&White and click OK. Rotate sugar bag a bit and place it below white sugar bag. Download last brown paper (5), open it in photoshop, with Rectangle Marquee Tool (M) make selection, copy and paste into our design. Resize it and palce it over black&white sugar bag. Make sure that brown paper is bigger then sugar bag. While brown paper still selected goto Layer -> Create Clipping Mask. Change Blend mode to Multiply and Opacity to 50%.

Open email icon from “Handycons – a free, hand drawn social media icon set” and drag into our design and place it over brown sugar bag. Change the blend mode to Multiply.
Pick up Horizontal Type Tool (T), choose #8d846e for color, font is Hand of Sean, and type email. Change Blend mode to Multiply and lower Opacity to 69%.

Step 7: Footer

Open brown paper 5 in photoshop, with Rectangle Marquee Tool (M) make selection, copy and paste into our design.

Resize it to have something like this. Apply Drop Shadow.

Now create vertical dotted line as described earlier and place it in the middle of footer background.

We need staples to keep footer background in place. Let’s create them. Create new layer above footer background. With Rectangle Marquee Tool (M) create very tiny rectangle and fill it with any color you want it isn’t really matter (i choose black).

Now apply following layer styles to our staple.

Aha we got staple now!

Duplicate staple layer and place it on the other side of footer background.
It’s time to add some content to the footer. I’ve decided it to put some info about author (in this case me, you can put your info) and some social media badges. Open one of your pictures (the one you look good i.e.) in photoshop, drag to our design, resize it to fit into footer and apply: 1px inside stoke with the color #4f3928.

Write short greeting massage with simple info about you. I choose Graublau Sans Web font and color #4e3928, size set 18pt. Here’s what I wrote.

Notice that I used bigger font (24pt) with bold style for word Howdy! Also I used bold style for my name and for word webdesigner.
Let’s add social media bagdes. I used twitter, facebook and flickr icons from “Free Hand Drawn Doodle Icon Set for Bloggers” that we already downloaded earlier. Import these icons to our design. Change Blend mode to Overlay. Apply Color Overlay from Layer Style menu, using color #4e3827 and Mulitply for Blend Mode.

Now type word Follow Me with Horizontal Type Tool (T), for font use Graublau Sans Web, sized at 36pt and for color use #4e3928. Apply Inner Shadow and place it like on the picture below.

On the footer’s right half we’re going to place Tag Cloud. For font choose Graublau Sans Web with #4e3928 color. Type differnet size words, some of them make bold.

Footer is now finished!

We’re almost at the end of this tutorial. Let’s take a look at design right now.

Step 8: Final Details

It looks pretty cool!Let’s add a few details to make it look nicier.
First of all, create new layer above top “blog paper”, pick up Brush Tool (B) choose retro_circle_scribble7 from “Free Retro Circle Scribbles Brush Pack For Photoshop”, set master diameter to 168px, set foreground color to #60412d, Command + Click on “blog paper” thumbnail to make sure you will paint just over the paper, and paint once with the brush like is shown on the picture. Lower Opacity to 85%.

Again jump over to Illustrator, and create sketchy Previous Posts and Next Posts but this time using Graublau Sans Web font.

Import in photoshop as pixels, riseze it, lower the fill to 50% and place it like on the picture below.

Open Brush Tool (B), choose T9 Creative Doodles 234, set master diametar to 50px, for foreground color use #654733 and create one arrow. Rotate a bit and lower fill to 70%.

Duplicate arrow layer, goto Edit -> Transform -> Flip Horizontal. Place duplicated layer next to Previous Posts.

I want to give this layout more vintage look, so find “coffee cup” group, then goto Layer -> New Adjusment Layer -> Photo Filter and add follwoing parametars.

We’re come to the end. Let’s look at result.

That’s it folks! I hope you enjoy this tutorial!

Network Solutions offers domain name registration services as well as hosting for website owners. Check them out when you’re ready to start a website for your own business or organization.

You can easily check out our best quality 1Y0-A18 dumps prepare you well for the real ccna braindump exam. You can also get success in real exam of 000-151 with the quality pass4sure 70-680 questions and lsat prep answers.

Authored by Nikola Lazarevic

Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.