Thursday, October 29, 2009

create an web template

Create a clean elegant wordpress theme design using adobe photoshop.





Step 1


Create new document 1360px x 1500px 72dpi. Background color: #000, ( Black )

Create new document


Note: Width is 960px out 1360. Leaving 200px on each side. So What I am saying is leave 200px space on both sides of your layer and the middle should come out to 960px.



Step 2


Select the paint brush( select brush with blur edges ) tool and create 4 circles. Circle 1:#308fab, Circle 2:#3f2e49, Circle 3:#58303d, Circle 4:#78372e,

Paint brush


Step 3


Now Lets stretch our image. Go to edit>>free transform and make image bigger. Then move image upward when completed


Stretch downward


Step 4


Ok so we will now add a nice effect to our background. Select on layer with four colors and go to Filter>>Noise>>Add Noise.

Add noise


Amount:30%, Distribution:Gaussian, and select Monochromatic.

Noise Settings


Step 5



Go to Filter>>Blur>>Motion Blur

Select Motion Blur


Angle:90, Distance:225.

Motion Blur Settings


Step 6


Now select the rectangle tool and create a rectangle at the very top ( About 50px high ) and change the layer opacity to 35%


Rectangle tool/box


Note: Whenever I create dummy links I always have links on one text line so once you have the type tool selected Double click and one line should appear then

type the words.


Select the type tool and create 4 links. Home, About, Contact, Services. ( 4 spaces after each word, hit spacebar 4 times after you type a word that way you do not have to make

indiviual links )

links



Step 7


Now we will create a search form. Select the rectangle tool Color:#232224, then draw a box across the top right leaving room for a button. Then add the following text,Looking for something

create search form


For our search button select the rounded rectangle tool and create a small rectangle to the right of our search form background.

Search Button


Now right click on search button layer>>Blending Options>>Gradient overlay.


Button/Gradient


Left color:#040404 , Right color:#292928;

Button/Gradient2


Now let’s add the following text to our search button. Search

Search BTN


Step 8


Select the rectangle tool Color:#000. Now create a box 960px across the layout and about 325px height. Then change the layer opacity to 35%


Featured box


Step 9


Now lets add a featured image, width:590px x height:295px;

Featured Image


Step 10


Select the type tool. Now you create a heading title of your own or use my current heading title.Font:Size:23px, Arial, Bold.

Create heading



Then create an post information link. Select the type tool and type the following.Posted by Marcell on 10.16.09 in Tutorials

Post Information Look


Now write the excerpt. I used dummy text. Google search Lorem Ispum

Excerpt


Step 11


Now we will create a button. Select the rectangle tool Color:#000; Now draw a rectangle button. Right click on layer>>Blending options>>Gradient Overlay Left Color:#1b1b1b,


Right color:#0e0e0e

create button


Duplicate the button layer. Then select the paint bucket tool ,Color:#373737, and fill the second black layer button.

grey button


Duplicate the first button layer. You should have 2 black button layers and 1 grey button layer.

3 buttons


Move buttons close together to give it that illusional look. ( zoom in to get best results )


3 buttons

btn example


Step 12


Select the type tool and type following.Read More. Font: Myraid pro, 29px, bold,. Now right click on text layer>>blending options>>Inner Shadow then copy current settings.

Copy current settings


Step 13


Select the rectangle tool, color:#000, Then create a rectangle under featured section to bottom. Layer opacity 35%.


Create Main background


Step 14


Now we will create our post area. First thing we will create are our thumbnails. Create a thumbnail Width:275px height:164px,

Create Thumbnail


then right click on thumbnail layer>>Blending options>>Stroke.

Add a stroke


Note:I do not cover the post area as well since it is the same as the featured area



Step 15


Copy current post area from image below. It is almost the same as the featured box. You can do it champ!. For the line I used the line tool, 1px Color:#3b2221

Create Post


Step 16


Duplicate post area 3 times.

Duplicate post area


Step 17


Now we will create our sidebar. Google search rss icons( Icon used in tutorial is from Wefunction ) Then place a rss button at the top


of the sidebar. Now select the type tool in type the following, Subscribe Rss Email Feed. Font:Arial, 15px, bold

Sidebar rss


Step 18


Now we will add some sidebar widgets to our layout. Duplicate the read more button from the featured box and change the text to Sponsors. Drag box down to sidebar. Now Google search 125 ads or create

your own and place it into the layout.

Sponsor widget


Step 19



Duplicate the the read more button once more and change the font to Popular post. Then select the text tool and create a heading( Font: Arial, 14px, bold ). Then create a description for

the post or known as the excerpt( Font: Arial, 10px ). Select the line tool Color:#3b2221 and create a line that seprates each post. Once you have the first popular post article completed

duplicate the group 2 times.

Popular post



Step 20


For our last and final direction we will add a copyright to the bottom of our website mockup.

Footer


Final Image


Congratulations! You have finished this tutorial. I hope everything was clear and that you understood this tutorial.


title






Related posts:

Saturday, October 24, 2009

Top web layout designs

Rock Band Layout

web-layout-tutorial-1

Rock band layout - Music layout

Premium Wordpress Theme Design Part 1

web-layout-tutorial-2

Premium Wordpress Theme Design Part 1 – The Photoshop Mock Up

Create a Very Simple Portfolio Web Layout with Photoshop

web-layout-tutorial-3

Create a Very Simple Portfolio Web Layout with Photoshop

Design a Cartoon Grunge Web site Layout

web-layout-tutorial-3b

Design a Cartoon Grunge Web site Layout

Design Studio Layout – Wordpress Layout

web-layout-tutorial-4

Design studio layout - Wordpress layout

Grunge Digital Portfolio Website

web-layout-tutorial-5

Grunge digital portfolio website

Old Paper Layout

web-layout-tutorial-6

Old Paper Layout - Great portfolio layout

Photographer Layout

web-layout-tutorial-7

Photographer layout - Portfolio layout

Create a Grunge Photographer Layout

web-layout-tutorial-8

Create a grunge photographer layout

Create a Clean and Colorful Web Layout in Photoshop

web-layout-tutorial-9

Create a Clean and Colorful Web Layout in Photoshop

Create Dark Wordpress Theme

web-layout-tutorial-10

Create dark wordpress theme

How to Create a Clean Web 2.0 Style Web Design in Photoshop

web-layout-tutorial-11

How to Create a Clean Web 2.0 Style Web Design in Photoshop

Architecture layout

web-layout-tutorial-12

Architecture layout

How to Create an Illustrative Web Design in Photoshop

web-layout-tutorial-13

How to Create an Illustrative Web Design in Photoshop

How to Create a Grunge Web Design Using Photoshop

web-layout-tutorial-14

How to Create a Grunge Web Design Using Photoshop

Design a Travel PSD Layout With Adobe Photoshop

web-layout-tutorial-15

Design a travel PSD layout with Adobe Photoshop

Create a Magic Night Themed Web Design from Scratch in Photoshop

web-layout-tutorial-16

Create a Magic Night Themed Web Design from Scratch in Photoshop

Create a Professional Portfolio Design in 17 Easy Steps

web-layout-tutorial-17

Create a Professional Portfolio Design in 17 Easy Steps

Design a Clean and Colorful Portfolio in Photoshop

web-layout-tutorial-18

Design a Clean and Colorful Portfolio in Photoshop

Awesome Tutorial Portfolio Design

web-layout-tutorial-19

Awesome Tutorial Portfolio Design

Create a Dark and Sleek Web Layout Using Photoshop

web-layout-tutorial-20

Create a Dark and Sleek Web Layout Using Photoshop

Create a Web design Company Layout in Photoshop

web-layout-tutorial-21

Create a webdesign company layout in Photoshop

Create a Promotional iPhone App Site in Photoshop

web-layout-tutorial-22

Create a Promotional iPhone App Site in Photoshop

How to Make a Green & Sleek Web Layout in Photoshop

web-layout-tutorial-23

How to Make a Green & Sleek Web Layout in Photoshop

Creative Design Layout Tutorial

web-layout-tutorial-24

Creative Design Layout Tutorial

Create a Web Layout with 3D Elements using Photoshop

web-layout-tutorial-25

Create a Web Layout with 3D Elements using Photoshop

How to Make a Light and Sleek Web Layout in Photoshop

web-layout-tutorial-26

How to Make a Light and Sleek Web Layout in Photoshop

Create a Grunge Personal Portfolio Layout

web-layout-tutorial-27

Create a grunge personal portfolio layout

Create a Clean and Effective Product Layout

web-layout-tutorial-28

Create a Clean and Effective Product Layout

Silver Splatter Web layout Design

web-layout-tutorial-29

Silver Splatter Web layout Design

Making the ‘Clean Grunge’ Blog Design

web-layout-tutorial-30

Making the ‘Clean Grunge’ Blog Design

Create a Dark Themed Web Design from Scratch

web-layout-tutorial-31

Create a Dark Themed Web Design from Scratch

Web Site Design Tutorial: Wellknown.as Case

web-layout-tutorial-32

Web Site Design Tutorial: Wellknown.as Case

How to Elevate Your Website Design Process and Results

web-layout-tutorial-33

How to Elevate Your Website Design Process and Results

Creating a Tech Blog Layout in Adobe Photoshop

web-layout-tutorial-34

Creating a tech blog layout in Adobe Photoshop

Create A Stylish Portfolio Layout

web-layout-tutorial-35

Create A Stylish Portfolio Layout

How to Create a Unique Wordpress Theme

web-layout-tutorial-36

How to Create a Unique Wordpress Theme

How to Create a “Worn Paper” Web Layout Using Photoshop

web-layout-tutorial-37

How to Create a “Worn Paper” Web Layout Using Photoshop

Create an Amazing Layout Using Textures

web-layout-tutorial-38

Create an Amazing Layout Using Textures

How to Create a Grunge Web Design in Photoshop

web-layout-tutorial-39

How to Create a Grunge Web Design in Photoshop

Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

web-layout-tutorial-40

Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it!

Design a Unique Grungy Website Layout

web-layout-tutorial-41

Design a Unique Grungy Website Layout

Design an Awesome Band Website Template

web-layout-tutorial-42

Design an Awesome Band Website Template

Create a Wordpress Interface in Photoshop

web-layout-tutorial-43

Create a wordpress interface in Photoshop

Photo Portfolio Web Page Layout

web-layout-tutorial-44

Photo Portfolio Web Page Layout

Corporate WordPress Style Layout

web-layout-tutorial-45

Corporate WordPress Style Layout

Full Photoshop Web Design – Journal

web-layout-tutorial-46

Full Photoshop Web Design - Journal

Design a Realistic Website Layout in Photoshop

web-layout-tutorial-47

Design a realistic website layout in photoshop

Create a Modern Blog Layout

web-layout-tutorial-48

Create a modern blog layout

How to Create a Unique Colorful Site Layout

web-layout-tutorial-49

How to Create a Unique Colorful Site Layout

Tutorial RocknRolla Blog Design

web-layout-tutorial-50

Tutorial RocknRolla Blog Design

Design a Creative Design Studio Layout

web-layout-tutorial-51

Design a creative design studio layout

Create a Sleek and Textured Web Layout

web-layout-tutorial-52

Create a Sleek and Textured Web Layout

Design an Amazing 3d Hosting Layout

web-layout-tutorial-53

Design an amazing 3d hosting layout

Design a Beautiful Website From Scratch

web-layout-tutorial-54

Design a Beautiful Website From Scratch

Water Colored Design Studio Blog Layout

web-layout-tutorial-55

Water colored Design Studio Blog Layout

Design a Sleek Real Estate Website

web-layout-tutorial-56

Design a Sleek Real Estate Website

Clean Business Layout Tutorial

web-layout-tutorial-57

Clean Business Layout Tutorial

Design Studio Layout #2

web-layout-tutorial-58

Design Studio Layout #2

Design a Creative Wordpress Theme

web-layout-tutorial-59

Design a creative wordpress theme

Web Design Layout #9

web-layout-tutorial-60

Web Design Layout #9

Source : http://designrfix.com/resources/web-layout-designs-60-tutorials


NOTE : ALL CREDITS FOR THE ORIGINAL TUTORIAL MAKER :)


=================================
=== For more tutorials keep visiting ;) ===
= http://photoshop-manic.blogspot.com =
=================================

Adobe Photoshop Training - Photoshop Classes -
Photoshop Tutorial - Photoshop Seminars -
Photoshop CS3 - Photoshop CS4 - Photoshop 7 -
Photoshop Tutorial Downloads - Lots more :-)