How to Create Simple and Clean Japan Travel Community Web Layout

Author: | Posted in Website Design 1 Comment

How to Create Simple and Clean Japan Travel Community Web Layout

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

How to create simple and clean japan travel community web layout

Ok, lets get start it

Final Image Preview

How to create simple and clean japan travel community web layout

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.

How to create simple and clean japan travel community web layout

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”

How to create simple and clean japan travel community web layout

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’

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

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)

How to create simple and clean japan travel community web layout

then apply this blending option bellow

How to create simple and clean japan travel community web layout

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’

How to create simple and clean japan travel community web layout

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).

How to create simple and clean japan travel community web layout

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).

How to create simple and clean japan travel community web layout

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.

How to create simple and clean japan travel community web layout

then apply this blending option bellow

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

then apply this blending option bellow

How to create simple and clean japan travel community web layout

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’

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

then apply this blending option to each icon

How to create simple and clean japan travel community web layout

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’

How to create simple and clean japan travel community web layout

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)

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

then apply this blending option bellow

How to create simple and clean japan travel community web layout

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

How to create simple and clean japan travel community web layout

then apply this blending option bellow

How to create simple and clean japan travel community web layout

you will get result looks like bellow so far

How to create simple and clean japan travel community web layout

Step 7 – Create box promo area

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

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’.

item for promo area

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

CULTURE & FESTIVE

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′

culture

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

Japanese lanterns 2

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

Japanese lanterns 2

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

Helvetica Nue

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

Culture & Festive

Step 9 – Create item for promo area

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

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

RESTAURANT

 

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′

food

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

Japanese Food

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

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

food section

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

Food & Restaurant

Step 10 – Create item for Artwork area

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

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

Artwork

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-3′

Artwork

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

Artwork

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

Artwork

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

Artwork

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

Artwork

Step 11 – Create ‘tell about japan area’

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

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

tell about japan

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.

tell about japan

then apply line style bellow for dashed

tell about japan

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

tell about japan

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

tell about japan

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

tell about japan

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

tell about japan

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

tell about japan

Step 12 – Create twitter area

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

twitter

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)

twitter

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

twitter

then apply blending option bellow

twitter

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

twitter

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.

twitter

then apply line style bellow

twitter

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

twitter

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.

twitter

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

twitter

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’.

Comming event

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

Comming event

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.

Comming event

then apply line style bellow

Comming event

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′.

comming soon event

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)

comming soon event

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

comming soon event

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

comming soon event

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

comming soon event

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

comming soon event

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′.

comming soon event

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)

comming soon event

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’

omming soon event

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

comming soon event

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

comming soon event

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

comming soon event

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’.

working top footer area

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)

working top footer area

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

top footer

Remove all style layer

top footer

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

top footer

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.

top footer

then apply line style bellow

top footer

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

top footer

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

top footer

then remove all layer style

top footer

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

top footer

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.

top footer

then apply line style bellow

top footer

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

top footer

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

top footer

then remove all layer style

top footer

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

top footer

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.

top footer

then apply line style bellow

top footer

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

top footer

Step 20 – Working with footer-bottom

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

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)

footer-bottom

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

footer-bottom

Final Image

Include a final image at the end of the tutorial.

Simple and Clean Japan Travel Community Web Layout

Click on image to get Enlarge

Comments
  1. Posted by Adina Claudia

Add Your Comment