Hello. This is our first photoshop tutorial here on Grafpedia. You can subscribe to the rss feed to receive our next tutorials.In this tutorial i will show you how to create a web 2.0 business layout. For start you need to create a new document in Photoshop I will use the following size for my layout : height 900 pixels, width 1000 pixels Choose Rounded Rectangle Tool, and on the top in the Control panel, you need to set the radious of rounded corners to 15 px Set your foreground color to #313538 Create a few shapes on your document With the same tool, create another white shapes like in the following image. I will turn the color to red for a few moments. I want you to see better how i place the shapes Now i will turn the colors to white. You can see a smooth line around the white shapes. I have applied a stroke to the shapes. To add a stroke you need to go to Layer > Layer Styles > Stroke This are my settings At the top of the layout, i will create another shape with the tool : Rounded Rectangle Tool Over the navigation bar, i will create a simple shape with Pen Tool. It will look like in the following image For this button, i will add a layer style. Navigate to Layer > Layer style > Gradient Overlay This is the way my buttons looks so far I will select Ellipse Tool, and i will create 2 small circles Then i will drag the layers right above the background layer. Simple drag each layer one after the other The circles will be placed behind the black shape, and in this way we will create a nice 3D effect With Horizontal Type Tool, i will write down some text. Then i will add some images On the left side, i will create a logo with a clock for start i will use Ellipse Tool to create a circle In the middle i will create another shape I will select Rectangle Tool , and i will create 3 simple shapes like in the following image Then with Ellipse Tool, i will create another small circles and i will place them in the middle of the clock I will select Line Tool, and i will set the width of the shape to 1 pixel The i will add another small details over our clock I will select one more time Ellipse Tool, and i will show you the easy way on how to create a shadow. Under the clock you can create a shape like in the following image Then i will go to Filter > Blur > Gaussian Blur You will be asked if you wnt to rasterize the shape. Click On Ok In the Gaussian Blur window i will enter 10 This is my result What i don’t like is the color for the black shape under the ” Business CO.” text logo Select thew layer in your layer palette, then go to Layer > Layer Style > Gradient Overlay This is my result I am almost ready with this tutorial. I want to add a few buttons with ” Read more ” I will select Polygon Tool, and in Control panel toolbar, i will set the number of ides to 3 I will create some simple triangles like in the following image On the top of the layout, i will add a RSS icon This is my final image [Via grafpedia]
The size is not so important, but if you want to create web 2.0 layouts you need to create large websites, with a lot of empty spaces, and when you choose the text size, it should be a bigger size
To change the color fo the shape simply double click on the layer thumbnail. This step is not necessary now. please create the shapes from the first time with a white color
and use the following settings
To create a fixed circle hold down the Shift Key then start
I will add a layer style to that shape to fit better within our layout
0 comments to "Create A Web 2.0 Website Template within half-an hour with photoshop"
Recent Posts
Search Medhley
Followers
Blog Archive
-
▼
2010
(85)
-
▼
July
(31)
- How To Create A Sparkling Animated Text in Photoshop
- Bas Relief Effect Using Photoshop’s 3D Tool
- Creating Modern photography menu Using Flash filte...
- Making A Vector-Style Woman Composition In A Easy Way
- With Simple Hand-Drawn We Can Create Vivid Themed ...
- Cheating with Visualization in Photoshop
- With Paint Brush Icon We can Create A Set of Digit...
- Full Workflow For Creating an iPhone Icon
- Romantic Heart Made Of Semantic Code
- Medhley.com has changed its Logo
- Easy To Create A Burger,First Aid Box,Briefcase Ic...
- Createting a Attractive Dynamic Nature Poster in ...
- Pathway Chalk Creation
- High Quality Beautiful Icon Sets
- Creative Digital Art Graphic Designing Photos
- More Than 100 Attractive And Amazing Text Designin...
- Creating A Sleek Audio Player Panel With Photoshop
- Easy Way To Create A Image Using Flash Effect Wit...
- 40+ Ideas for Creating Advertisement Design
- TOP 5 OFTEN VISITED WEBSITES!
- Easy Way To Create Shapes Using Pen Tools in Photo...
- Create Glassy Button in 5 Steps
- To Create A Powerful Flash Menu With Sound Effect
- Creating A Flash Banner Effect Within 10 Minutes
- Easy To Create Apple i Phone Modular With Photoshop
- Secret Shortcuts in Photoshop
- Create A Web 2.0 Website Template within half-an h...
- Ideas For Opening 404 Error Pages
- Pixelated Dead of the Night.Zombies Easily made wi...
- Marvelous Photo Stack Gallery with jQuery and CSS3
- Easy to Draw a Vector Dog Character in Illustrator
-
▼
July
(31)
Post a Comment