website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Clean Web 2.0 Design with Flowers
rss

Clean Web 2.0 Design with Flowers

Author: PhoNuts.org More by this author


1. Create a new document (800*600).

2. Fill the background with #ffffff and look at the guides I've created in the screenshot below.

Click to enlarge
Click to enlarge

3. Now create a new layer (layer - new layer) and select a rectangle using your selection tool like shown and fill it with #465d63.

Click to enlarge
Click to enlarge

4. Create another new layer and make a selection like shown in the screenshot below. Fill this one using your paint bucket with #52676c!

Click to enlarge
Click to enlarge

5. Now we're going to create some bars to create individual buttons on the menu... So use your pencil with a square 1px brush and draw something like this on your menu (note that the left stripe is 2px longer than the other one). The left color is #6a7b82 and the right one is #43585d. Don't forget to do this on a new layer.

image 4

6. Now duplicate that layer a few times (layer - duplicate layer) and position them like this to create some sort of a button for the menu on the top of your design.

Click to enlarge
Click to enlarge

7. Select a rectangle like this and fill it with any color you like because in the next step we will add a gradient overlay so it doesn't matter.

Click to enlarge
Click to enlarge

8. Adjust the blending options of the previously created layer and add a gradient overlay like I said using these settings...

image 7

9. In this step I've just added a little bit of text to the menu (microsoft sans serif, 11px). And a title for the site (la bamba let, 25px) unsing these 2 colors (#434343 and #d35c00).

Click to enlarge
Click to enlarge

10. Select your brush tool (change your foreground color to white #ffffff and also create a new layer) and use this brush (it's not the one I used because the deviant member who made them has been banned) to insert some vector flowers... After this step you normally should move the text layer of your title above the one you've just created.

Click to enlarge
Click to enlarge

11. Create a selection like shown below and fill it with #ffffff. This can be used as a search box or something else if you'd like to add such a function... I've already added some text so it looks more realistic!

image 10

12. In this last step I've just added a map of the world using the font webdings (this letter u) with this color #f9f9f9... Some demo text was also included to show off how the coded website would look like! Enjoy and have fun with the layout!

Clean Web 2.0 Design with Flowers Tutorial: Final Result (Click to enlarge)
Click to enlarge


Author's URL: phonuts.org

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Clean Web 2.0 Design with Flowers"