How to Create Simple and Clean Japan Travel Community Web Layout

Joe de Nuo Posted on 22. Jan, 2013 | Comment in!

Hi guys, see you again in my tutorial. In this occasion i will teach you how to create simple and clean japan travel community web layout using Adobe Photoshop CS6. Why Japan? because japan has a lot of interesting aspect for vacation. Japan has a unique interesting aspect, such as culture, food, and art.

Next, why travel community ? web community is place to share story and get information. Most of people go to some place with no enough information. by visiting web community, it will help people to get information about event schedule, route and story from other user about their experience during vacation. So the focus is deliver information as well as possible. That’s our point here, design simple web layout that informative for user.

Its not difficult tutorial, because the points here are :

How to arrange text well, in here, we are going to use Fibonacci numbers. A Fibonacci sequence begins with 0 and 1. The previous two numbers are added together to produce the next number in the sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 … and so on. We will use it for heading size and text size.
How to use few color choices. In here we are going to use color schemes bellow

Ok, lets get start it

Final Image Preview

Tutorial Details

Program: Adobe Photoshop
Version: CS 6
Difficulty: Beginner, Intermediate
Estimated Completion Time: 2 Hours

Tutorial Assets

The following assets were used during the production of this tutorial.

960 gs PSD template download here
Gemicon Icon Set, you can get it here
Japanese Woman, you can get it here
Japanese Food you can get it here
Japanese lanterns 2, you can get it here
Hinamatsuri dolls 8, you can get it here
cherry and shrine, you can get it here
Kabuki puppet, you can get it here
Vamps and L-Arc-en-Ciel Photo, you can get it here

960 Grid System

In this tutorial we will use the 960 Grid System. Download it and unzip the archive file. Then go to the “Photoshop” folder (inside “templates”). There you will find all the .PSD files. For this web design we will use the 12 columns grid.

After you open the .psd file in Photoshop you will see 12 red bars. That is the grid that we will be using. You can hide the red bars by clicking on the eye icon of the “12 Col Grid” layer.

Step 1 – Setting up the document and creating the background

Open the “960_grid_12_col .psd” file in Photoshop. We need more space to work with, so we will have to increase the canvas size. Go to Image > Canvas Size (Ctrl/Cmd + Alt/Option + C). Set width to 1280px and height to 1872px. Then click on the top middle anchor point. That is the point the image will expand from.

Select “12 Col Grid” layer, then click (Ctrl + G). it will bring “12 Col Grid” Layer inside group folder automaticaly, rename folder to be “grid”

Step 2 – Organizing Document and create background document

to make easy , you can create 4 new group first, these are ‘header’,'body’,'footer’,and ‘background’. to create group, select Layer > New > Group. Name it ‘group’. Next, repeat that step until 3 times, name it each layer remaining ‘body’,'footer’, and ‘background’

Create new layer for background, by select Layer > New Fill Layer > Solid Color and set the color to #ffffff. Name this layer “body_bg”.

step 3 – Create header background

Inside ‘header’ group, create new shape by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1280px , height 70px, set the color to #ffffff.Change this layer name to ‘bg-header’(double click to this layer to change layer name)

then apply this blending option bellow

step 4 – Creating logo

Next we are going to create slider image. First, we are create new group inside ‘header’ group by select Layer > New > Group. Name it ‘logo’

Create new shape by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 140px , height 170px, set the color to #c4161c.Change this layer name to ‘bg-logo’(double click to this layer to change layer name).

Create new rectangle shape again, by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 140px , height 56px, set the color to #000000.Change this layer name to ‘bg-logo’(double click to this layer to change layer name).

for logo we are going to use japan character. For getting it, you just go to google translate. set lef columns to english, then type word “japan”, translate it into japanesse, you will get japanesse character in right column. just copy and paste it to your canvas.

then apply this blending option bellow

Select Horizontal type tool(T), choose Helvetica Nue font, set size to 14px, font weight bold and set color to #ffffff, then type ‘japan travelista’. adjust the position like image bellow

then apply this blending option bellow

Step 5 – Create top menu

Next we are going to create slider image. First, we are create new group inside ‘header’ group by select Layer > New > Group. Name it ‘menu-top’

Select Horizontal type tool(T), choose Helvetica Nue font, set size to 18px, font weight normal and set color to #c4161c, then type ‘Home’. adjust the position like image bellow

Repeat above step for 3 times, change text to be About us, contact us, and join us, then arrage it looks like image bellow

Next we are going to add icon for each top menu. First extract free-icon-set-gemicon.zip, inside the folder psd, open file 32×32.psd. After that put image of icon beside top menu. For home menu we are using ‘home’ icon. For ‘About’ menu , we are going to use ‘group’ icon. For ‘Contact Us’ menu we are using ‘Iphone potrait’ icon. For ‘Join us’ menu, we are going to use ‘tea’ icon

then apply this blending option to each icon

Step 6 – Create slider image

Next we are going to create slider image. First, we are create new group inside ‘body’ group by select Layer > New > Group. Name it ‘slider’

Next, inside ‘slider’ group, create new rectangle shape by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1280px , height 518px, set the color to #000000.Change this layer name to ‘bg-slider’(double click to this layer to change layer name)

Next, adding image for slider. Open ‘cherry and shrine’ image that we have get before. then place it in top of ‘bg-slider’ layer.

Next, right click on ‘cherry and shrine’ image layer, then choose ‘Creating Clipping Mask’

Now, add text for slider, Select Horizontal type tool(T), choose Helvetica Nue font, set size to 34px, font weight regular set line height to 48px and set color to #ffffff, then type ‘”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”‘. adjust the position like image bellow

then apply this blending option bellow

add new layer above ‘slider’ group. fill it with #ffffff

then apply this blending option bellow

you will get result looks like bellow so far

Step 7 – Create box promo area

Next, inside the ‘body’ group, select Layer > New > Group. Name it ‘box-promo’.

Step 8 – Create item for promo area

Next, create new group inside ‘box-promo’ group, by select Layer > New > Group. Name it ‘item-culture’.

Add text for culture title, by Select Horizontal type tool(T), choose Helvetica Nue, set size to 34px, and set color to #464646, then type ‘CULTURE & FESTIVE’. Next, change font size for words ‘& FESTIVE’ to 21px . and the result looks like image bellow

create box for image culture. Create new shape bellow the title , by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 458px , height 167px, set the color to #000000. Change this layer name to ‘item-bg-1′

add image for culture. Open ‘Japanese lanterns 2′ image , then place it in top of ‘item-bg-1′ layer

Then right click on ‘Japanese lanterns 2′ image , then select ‘Create Clipping Mask’

Next add text for ‘culture section’ by Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #464646, then type some text. and the result looks like image bellow

In the end of text, type ‘More about Culture & Festive ‘, then change color to #c4161c

Step 9 – Create item for promo area

Next, create new group inside ‘box-promo’ group, by select Layer > New > Group. Name it ‘item-food’.

Add text for food title, by Select Horizontal type tool(T), choose Helvetica Nue, set size to 34px, and set color to #464646, then type ‘FOOD AND RESTAURANT’. Next, change font size for words ‘& RESTAURANT’ to 21px . and the result looks like image bellow

create box for image food. Create new shape bellow the title , by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 458px , height 167px, set the color to #000000. Change this layer name to ‘item-bg-2′

add image for food. Open ‘Japanese Food’ image , then place it in top of ‘item-bg-2′ layer

Then right click on ‘Japanese Food’ image , then select ‘Create Clipping Mask’

Next add text for ‘food section’ by Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #464646, then type some text. and the result looks like image bellow

In the end of text, type ‘More about Food & Restaurant ‘, then change color to #c4161c

Step 10 – Create item for Artwork area

Next, create new group inside ‘box-promo’ group, by select Layer > New > Group. Name it ‘item-artwork’.

Add text for artwork title, by Select Horizontal type tool(T), choose Helvetica Nue, set size to 34px, and set color to #464646, then type ‘ARTWORK & CRAFT’. Next, change font size for words ‘& CRAFT’ to 21px . and the result looks like image bellow

add image for food. Open ‘Japanese Food’ image , then place it in top of ‘item-bg-3′ layer

Then right click on ‘Hinamatsuri dolls 8′ image , then select ‘Create Clipping Mask’

Next add text for ‘artwork section’ by Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #464646, then type some text. and the result looks like image bellow

In the end of text, type ‘More about Artwork & Craft ‘, then change color to #c4161c

Step 11 – Create ‘tell about japan area’

Inside body group, create new group by select Layer > New > Group. Name it ‘tell-about-japan’.

Now add title for ‘tell about japan area’. Select Horizontal type tool(T), choose Helvetica Nue, set size to 37px, and set color to #464646, then type ‘TELL WHAT YOU THINK ABOUT JAPAN’. and the result looks like image bellow

add dashed line for separate. Next, add dashed horizontal row in bottom of title. Select Line tool (U), draw line horizontal, height 1px and width 620 px. set fill color blank, and stroke color #959595, stroke 1 pt.

then apply line style bellow for dashed

Next, create elipse for image cover. Select Elipse tool (U), press and hold (Shift) then draw elipse, width 129 px, height 129 px, color #000000. Change name to ‘bg-tell’ layer

Next, open ‘Japanese Woman’ image, place it above ‘bg-tell’ layer. then right click its layer , choose right clipping mask

Now, add text for preface, Select Horizontal type tool(T), choose Helvetica Nue, set size to 21px, and set color to #464646, set line height 30px, then type some text, and arrange it looks like bellow

Next, add text for content story, Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #464646, set line height 21px, then type some text, and arrange it looks like bellow

In the end of content story text, write ‘Read Full Story’ and change text color to #c4161c

Step 12 – Create twitter area

Inside body group, create new group by select Layer > New > Group. Name it ‘twitter-area’.

Next, we are going to create box for twitter area. Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 300px , height 219px, set the color to #c4161c.Change this layer name to ‘bg-twitter’(double click to this layer to change layer name)

Next we are going to add icon for twitter logo. Open file 32×32.psd inside “free-icon-set-gemicon”. for twitter logo, choose ‘twitter’ icon. adjust the position looks like bellow

then apply blending option bellow

Now add text for title. Select Horizontal type tool(T), choose Helvetica Nue, set size to 21px, and set color to #ffffff, set line height 30px, then type some text, and arrange it looks like bellow

Next, add dashed line for separate. Next, add dashed horizontal row in bottom of title. Select Line tool (U), draw line horizontal, height 1px , width 260px.

then apply line style bellow

Now add text for twitter content. Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #ffffff, set line height 19px, then type some text, and arrange it looks like bellow

Next, add dashed line for separate. Next, add dashed horizontal row in bottom of title. Select Line tool (U), draw line horizontal, height 1px , width 260px.

duplicate twitter content above, so you will get result looks like bellows

Step 13 – adding title for Comming event area

Before add title, Inside body group, create new group by select Layer > New > Group. Name it ‘japan-news’.

Next,Select Horizontal type tool(T), choose Helvetica Nue, set size to 34px, and set color to #464646, then type ‘COMING SOON EVENT’, and arrange it looks like bellow

Next, add dashed line for separate. Next, add dashed horizontal row in bottom of title. Select Line tool (U), draw line horizontal, height 1px , width 940px.

then apply line style bellow

Step 14 – adding item for comming soon event area

Next, Inside ‘Japan-news’ group, create new group by select Layer > New > Group. Name it ‘event-1′.

Inside ‘item-news’ group, create box for image cover, by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 140px , height 116px, set the color to #000000.Change this layer name to ‘bg-item-event’(double click to this layer to change layer name)

Now we are going to add image for item event. open ‘Kabuki puppet’ image, adjust it and place it in above ‘bg-item-event’ layer, then right click this layer , choose create clipping mask

Next, add title for item. Select Horizontal type tool(T), choose Helvetica Nue, set size to 21px, and set color to #464646, then type ‘Hokaido japan fest Night’, and arrange it looks like bellow

Add text for content, Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #464646, line height 19px, then type some text, and arrange it looks like bellow

Then, in the end of text above, type “Read Full Story” then change color to #c4161c

Step 15 – adding second item for comming soon event area

Next, Inside ‘Japan-news’ group, create new group by select Layer > New > Group. Name it ‘event-2′.

Now we are going to add image for item event. open ‘Vamps and L-Arc-en-Ciel’ image, adjust it and place it in above ‘bg-item-event’ layer. then right click this layer, choose ‘Create clipping mask’

Next, add title for item. Select Horizontal type tool(T), choose Helvetica Nue, set size to 21px, and set color to #464646, then type ‘L~Arc N Ciel Live in Hiroshima’, and arrange it looks like bellow

Add text for content, Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #464646, line height 19px, then type some text, and arrange it looks like bellow

Then, in the end of text above, type “Read Full Story” then change color to #c4161c

Step 16 – working top footer area and add background for it

Inside ‘footer’ group, create new group by select Layer > New > Group. Name it ‘footer-top’.

Inside ‘footer-top’ group, create box for footer-top background, by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1280px , height 246px, set the color to #c4161c. Change this layer name to ‘footer-top-bg’(double click to this layer to change layer name)

Step 17 – add first item for top footer

Next we are going to add icon for first footer top item logo. Open file 32×32.psd inside “free-icon-set-gemicon”. for first item logo, choose ‘bubble2′ icon. adjust the position looks like bellow

Remove all style layer

Now add text for title. Select Horizontal type tool(T), choose Helvetica Nue, set size to 21px, and set color to #ffffff, set line height 30px, then type ‘Share your story with us’, and arrange it looks like bellow

Next, add dashed line for separate. Next, add dashed horizontal row in bottom of title. Select Line tool (U), draw line horizontal, height 1px , width 300px.

then apply line style bellow

Now add text for content. Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #ffffff, set line height 20px, then type some text, and arrange it looks like bellow

Step 18 – add second item for top footer

Next we are going to add icon for first footer top item logo. Open file 32×32.psd inside “free-icon-set-gemicon”. for get route logo, choose ‘map’ icon. adjust the position looks like bellow

then remove all layer style

Now add text for title. Select Horizontal type tool(T), choose Helvetica Nue, set size to 21px, and set color to #ffffff, set line height 30px, then type ‘Get Route & Travel Map’, and arrange it looks like bellow

Next, add dashed line for separate. Next, add dashed horizontal row in bottom of title. Select Line tool (U), draw line horizontal, height 1px , width 300px.

then apply line style bellow

Now add text for content. Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #ffffff, set line height 20px, then type some text, and arrange it looks like bellow

Step 19 – add third item for top footer

Next we are going to add icon for first footer top item logo. Open file 32×32.psd inside “free-icon-set-gemicon”. for get update logo, choose ‘tv’ icon. adjust the position looks like bellow

then remove all layer style

Now add text for title. Select Horizontal type tool(T), choose Helvetica Nue, set size to 21px, and set color to #ffffff, set line height 30px, then type ‘Get Event & News Update’, and arrange it looks like bellow

Next, add dashed line for separate. Next, add dashed horizontal row in bottom of title. Select Line tool (U), draw line horizontal, height 1px , width 300px.

then apply line style bellow

Now add text for content. Select Horizontal type tool(T), choose Helvetica Nue, set size to 13px, and set color to #ffffff, set line height 20px, then type some text, and arrange it looks like bellow

Step 20 – Working with footer-bottom

Inside ‘footer’ group, create new group by select Layer > New > Group. Name it ‘footer-bottom’.

Inside ‘footer-top’ group, create box for footer-top background, by Select rectangle tool (U), click and hold then drag to create rectangle tool, size width 1280px , height 54px, set the color to #000000. Change this layer name to ‘footer-bottom-bg’(double click to this layer to change layer name)

Now add text for twitter content. Select Horizontal type tool(T), choose Helvetica Nue, set size to 11px, and set color to #ffffff, then type some text, and arrange it looks like bellow