Photo Portfolio Web Page Layout
February 13th, 2008 by ART-D Posted in Adobe Photoshop, Web Layout
This tutorial will show you how to create a clean looking web layout for your portfolio.
Utilize these minimalist wordpress themes and promote your business with social media marketing.
Utilize these minimalist wordpress themes and promote your business with social media marketing.
Create a new file (File>New) with 766×750 px and 72 dpi. Next use the Paint Bucket Tool (G) to paint the new layer with this shown color – #0F1715
Find in Internet a kind of pattern, like this one:
Edit>Define Pattern. Create a new layer and select this option Edit>Fill, to insert the pattern on our main picture.
Make a mouse click on the same layer on Add a Mask option that may be found on the lowest part of the layers’ panel. Next choose the Brush Tool (B) and Opacity of 20% of black color to clean out the upper part of the picture.
Select for this layer these parameters: Blending mode-Soft Light
The Rectangle Tool (U) is helpful in drawing a thin stripe on the lowest part of the picture. The element’s color is #0F1715
Using the same instrument, it’s possible to represent the menu’s panel, reserved for the site’s header.
Apply the next parameters by making a mouse click on the layer we work with on the layers’ panel.
Blending Options>Gradient Overlay
Gradient’s parameters:
Use the Rounded Rectangle Tool (U) with a radius of 10 px to draw on the menu’s panel a button. Next stage we should hold on Alt button while using the Rectangle Tool (U) and cut out the unnecessary elements.
Web designers
04/09/2009
Cool design with refreshing look to make someone ‘s day as sunny as sunflower.
rich
09/09/2009
nice job ,
very creative
kartit
26/10/2009
Very nice tutorial Thanks a lot , keep it up!
Club Penguin Secrets
12/11/2009
Very nice and clear tutorial. I am going to try it now with some modifications. thanks alot for the effort!
dare2go
19/12/2009
Looks very nice – BUT
absolutely not what you want for a website!!! Everything is in form of graphics, which SEARCH ENGINES cannot read. You need text on a web page in order to get spidered (and a good page rank)with any search engine. And don’t start with ‘alt text’ – it will never replace decent text. PLUS: copyright 2007 – do you really want to change/update this image every year to keep it current? Or are you planning to design a new site every year?
Web pages done by designers usually look very good, and work very badly – sorry to say so
admin
19/12/2009
@dare2go
article was posted in February 13th, 2008
Gajanand Sharma
16/01/2010
It is very nice.
Regards
Nanovor
24/01/2010
Very nice and clear tutorial. I am going to try it now with some modifications. thanks alot for the effort!
ram
22/03/2010
it is very useful for us.,.,thank u
shrijan
11/04/2010
thanks for share i am always hungry this kinda tut
Suman
08/07/2010
Great post… very much helpful for the beginners
SHISHUPAL SODHA
14/08/2010
Hi,
thnx in advance
i have viewed your tutorial that’s fantastic i like it but you have not explained that what to do after the complete design(i mean to say that how to make an HTML page)
honey
15/09/2010
….i want a step by step process on how your webpage created
peterp
26/09/2010
may i use that pattern for commercial use?
M.MAJID
21/10/2010
THIS IS A GOOD TUTORIAL ,BUT I AM A BEGINNER SO FOR ME THE MANUAL PART IS HARD TO MANAGE , HOW YOU SPLIT THE MENU BAR INTO EQUAL PARTS AND HOW DO YOU DELETE THE UPPER PART FROM THE ROUNDED RECTANGLE
PLEASE DO HELP
mehdi
27/10/2010
really tanks it was pertty good
τρακτερ
05/12/2010
It is awesone
Olajide Tobun
16/02/2011
Cool, but could you please compile the whole tutorial into a pdf file.
houman
04/05/2011
It is awesome,thanx
starker01
24/05/2011
?Nice tutorial to make good layout
rajesh
04/07/2011
hi thanks i learn somthing
ashish sanap
27/07/2011
Very nice!!!
I want to make such a beauty web site.
amrew
04/12/2011
very nice
dinesh kuamr
16/12/2011
very very nice dear
Muddaser
30/01/2012
wow i made it “same” its amazing thanks for sharing
javad
12/03/2012
thanks .i enjoy from this post.
please insert psd file’s for every post is very good
Dee
04/05/2012
This is nice but how do you code it?
Amin
05/07/2012
very good , I like it.