8/22/2019 Freelancer Portfolio Design
1/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 1/28
Search adobe, tutorials, n
Home
Adobe
Photoshop
FreebiesInspiration
Subscribe via RSS |
Get E-mail Updates |
Follow us on Twitter
Freelancer portfolio design
May 8th, 2009 by ART-D Posted in Adobe Photoshop, Web Layout
Step by step tutorial on how to create a portfolio web layout in Adobe Photoshop CS3.
Final Image Preview
http://www.googleadservices.com/pagead/aclk?sa=L&ai=CiTG9ZW_4UcvPN7O_6gGzn4GgCIbz0_EF3q2W4H2ug4K_3AEQASCzwdkEUJa327b4_____wFgzZjggOgCoAHiyrXiA8gBAqgDAcgD0QSqBKoBT9CMpRYwjgb2FbakvMybkI_yNd94EfdNYmhcj2Edv7ldUlMGPNVYF8EoeSHCH07CO_oBqw6y9RRtsgXz5LToxB_6o6aDq8ICF0GOAoIthD-iX29nxI1xpD1ai-v5Rn0GrwQvRiwN5YMjMwqZuT_D0gL-u3rbQrdrKX99Hsl-ciwLX489eB8yU1j_lKu5Hriy0qCADnJpZC-4bpISOxJCXjZuv0cCU64EqsyIBgGgBgKAB4a1yh0&num=1&cid=5GiYVkiHMg2TGWdmr_JcaWp2&sig=AOD64_3nXHu4fT195BhaBG-ZbMUjwW2vRQ&client=ca-pub-7078831811468039&adurl=http://www.wix.com/buildhtml5site/pt400%3Futm_medium%3Dcpc%26utm_campaign%3Dbi_ads_similar_br%5Etop10-1000x1000%26experiment_id%3Dwww.adobetutorialz.com%5E33705246814http://www.googleadservices.com/pagead/aclk?sa=L&ai=CiTG9ZW_4UcvPN7O_6gGzn4GgCIbz0_EF3q2W4H2ug4K_3AEQASCzwdkEUJa327b4_____wFgzZjggOgCoAHiyrXiA8gBAqgDAcgD0QSqBKoBT9CMpRYwjgb2FbakvMybkI_yNd94EfdNYmhcj2Edv7ldUlMGPNVYF8EoeSHCH07CO_oBqw6y9RRtsgXz5LToxB_6o6aDq8ICF0GOAoIthD-iX29nxI1xpD1ai-v5Rn0GrwQvRiwN5YMjMwqZuT_D0gL-u3rbQrdrKX99Hsl-ciwLX489eB8yU1j_lKu5Hriy0qCADnJpZC-4bpISOxJCXjZuv0cCU64EqsyIBgGgBgKAB4a1yh0&num=1&cid=5GiYVkiHMg2TGWdmr_JcaWp2&sig=AOD64_3nXHu4fT195BhaBG-ZbMUjwW2vRQ&client=ca-pub-7078831811468039&adurl=http://www.wix.com/buildhtml5site/pt400%3Futm_medium%3Dcpc%26utm_campaign%3Dbi_ads_similar_br%5Etop10-1000x1000%26experiment_id%3Dwww.adobetutorialz.com%5E33705246814http://www.adobetutorialz.com/http://www.adobetutorialz.com/http://www.googleadservices.com/pagead/aclk?sa=L&ai=CiTG9ZW_4UcvPN7O_6gGzn4GgCIbz0_EF3q2W4H2ug4K_3AEQASCzwdkEUJa327b4_____wFgzZjggOgCoAHiyrXiA8gBAqgDAcgD0QSqBKoBT9CMpRYwjgb2FbakvMybkI_yNd94EfdNYmhcj2Edv7ldUlMGPNVYF8EoeSHCH07CO_oBqw6y9RRtsgXz5LToxB_6o6aDq8ICF0GOAoIthD-iX29nxI1xpD1ai-v5Rn0GrwQvRiwN5YMjMwqZuT_D0gL-u3rbQrdrKX99Hsl-ciwLX489eB8yU1j_lKu5Hriy0qCADnJpZC-4bpISOxJCXjZuv0cCU64EqsyIBgGgBgKAB4a1yh0&num=1&cid=5GiYVkiHMg2TGWdmr_JcaWp2&sig=AOD64_3nXHu4fT195BhaBG-ZbMUjwW2vRQ&client=ca-pub-7078831811468039&adurl=http://www.wix.com/buildhtml5site/pt400%3Futm_medium%3Dcpc%26utm_campaign%3Dbi_ads_similar_br%5Etop10-1000x1000%26experiment_id%3Dwww.adobetutorialz.com%5E33705246814http://www.adobetutorialz.com/categories/Adobe-Photoshop/Web-Layouthttp://www.adobetutorialz.com/categories/Adobe-Photoshophttp://twitter.com/adobetutorialzhttp://feedburner.google.com/fb/a/mailverify?uri=adobetutorialz&loc=en_UShttp://feeds.feedburner.com/adobetutorialzhttp://feeds.feedburner.com/adobetutorialzhttp://www.adobetutorialz.com/categories/inspirationhttp://www.adobetutorialz.com/categories/Freebieshttp://www.adobetutorialz.com/categories/Adobe-Photoshophttp://www.adobetutorialz.com/http://www.adobetutorialz.com/http://stats.buysellads.com/click.go?z=1245232&b=3689433&g=&s=&sw=1152&sh=864&br=chrome,28,win&r=0.31785124400630593&link=http://depositphotos.com/trial-subscription.html/?ref=2540845&utm_source=buysellads&utm_medium=cpc&utm_content=728_90&utm_campaign=http://depositphotos.com/?ref=1255735&utm_source=buysellads&utm_medium=cpc&utm_content=728_90_trial_black&utm_campaign=adobe8/22/2019 Freelancer Portfolio Design
2/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 2/28
Lets create a new file (File>New) of1000x700px/72 dpi. Select the Rectangle Tool (U) to represent the background of the layout
to be.
Choose the next demonstrated styles by making a click on the layer we work with on the layers palette: Blending Options>Gradient
Overlay
8/22/2019 Freelancer Portfolio Design
3/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 3/28
Gradient Editor:
8/22/2019 Freelancer Portfolio Design
4/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 4/28
Next well represent the web-sites header, applying the earlier chosen Rectangle Tool (U).
The layers styles: Blending Options>Gradient Overlay
8/22/2019 Freelancer Portfolio Design
5/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 5/28
Gradient Editor:
8/22/2019 Freelancer Portfolio Design
6/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 6/28
Now well have to create a background pattern with useful tool located on BGPatterns, setting the parameters by turn.
http://www.bgpatterns.com/8/22/2019 Freelancer Portfolio Design
7/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 7/28
Download the new pattern and go to Edit>Define Pattern
On the new layer well select Edit>Fill and apply the saved pattern.
The layers styles: Fill 0%, Blending mode-Color Dodge
8/22/2019 Freelancer Portfolio Design
8/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 8/28
Make a click on the same layer on the bottom part of the layers panel on Add a Maskselection and choose the Brush Tool (B) and
black color to erase the textures parts coming out of the headers edges:
8/22/2019 Freelancer Portfolio Design
9/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 9/28
Insert now the sites name, keeping the demands from the next table (used font):
http://www.josbuivenga.demon.nl/museo.html8/22/2019 Freelancer Portfolio Design
10/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 10/28
The layers styles: Blending Options>Drop Shadow
Blending Options>Outer Glow
8/22/2019 Freelancer Portfolio Design
11/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 11/28
Blending Options>Gradient Overlay
Gradient Editor:
Using the Rounded Rectangle Tool (U) (radius of 20 px), try to make the menus button:
8/22/2019 Freelancer Portfolio Design
12/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 12/28
The layers styles: Fill 0%, Blending Options>Outer Glow
Blending Options>Stroke
8/22/2019 Freelancer Portfolio Design
13/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 13/28
Make three copies of the buttons layer and select the Free Transform option to place the copies the same way indicated below:
Insert the titles for the menus buttons, putting each word on a separate layer:
8/22/2019 Freelancer Portfolio Design
14/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 14/28
Select for the layers containing the buttons titles the same styles demonstrated below: Blending Options>Outer Glow
Next well select the Rectangle Tool (U) to represent the sites panel, giving it the color#F5F5F5
8/22/2019 Freelancer Portfolio Design
15/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 15/28
The layers styles: Blending Options>Drop Shadow
8/22/2019 Freelancer Portfolio Design
16/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 16/28
Make three copies of the layer and choose Free Transform option to place the copies the same way as below:
Insert the pictures on the made layers, I used thisphoto from deviantart. I would like to thank the authorof this artwork:
http://waver-h.deviantart.com/http://www.deviantart.com/http://waver-h.deviantart.com/art/Tree-Goddess-Hamadryad-818580088/22/2019 Freelancer Portfolio Design
17/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 17/28
Select the same styles for the pictures layers:
Blending Options>Stroke
Try to represent a button under the picture, choosing the Rectangle Tool (U) and white color.
8/22/2019 Freelancer Portfolio Design
18/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 18/28
The layers styles: Blending Options>Drop Shadow
8/22/2019 Freelancer Portfolio Design
19/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 19/28
Make three copies of the layer containing the button and use Free Transform option to place the copies the same way demonstrated
below:
Insert the titles for the made buttons:
8/22/2019 Freelancer Portfolio Design
20/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 20/28
Next well introduce the basic text on the site:
8/22/2019 Freelancer Portfolio Design
21/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 21/28
Using the Line Tool (U), well represent a line under the text, giving it the color #6E6969
On the last stage well insert the copyright, keeping the next demonstrated demands:
8/22/2019 Freelancer Portfolio Design
22/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 22/28
The layers styles: Blending Options>Drop Shadow
Blending Options>Outer Glow
8/22/2019 Freelancer Portfolio Design
23/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 23/28
Blending Options>Gradient Overlay
Gradient Editor:
8/22/2019 Freelancer Portfolio Design
24/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 24/28
Finished!
View full size here.
Tags: design, freelancer, layout, Photoshop,portfolio, tutorial, Web Layout
If you enjoyed this article, please consider sharing it!
mailto:?subject=Check%20out%20this%20article%20on%20AdobeTutorialz&body=http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design&title=Freelancer%20portfolio%20designhttp://twitter.com/home?status=Currently+reading%3A+http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design&title=Freelancer%20portfolio%20designhttp://www.designfloat.com/submit?url=http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design&title=Freelancer%20portfolio%20designhttp://www.stumbleupon.com/submit?url=http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design&title=Freelancer%20portfolio%20designhttp://digg.com/submit?phase=2&url=http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design&title=Freelancer%20portfolio%20designhttp://del.icio.us/post?url=http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design&title=Freelancer%20portfolio%20designhttp://www.adobetutorialz.com/articles/tag/Web-Layouthttp://www.adobetutorialz.com/articles/tag/tutorialhttp://www.adobetutorialz.com/articles/tag/portfoliohttp://www.adobetutorialz.com/articles/tag/Photoshophttp://www.adobetutorialz.com/articles/tag/layouthttp://www.adobetutorialz.com/articles/tag/freelancerhttp://www.adobetutorialz.com/articles/tag/designhttp://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design#http://www.adobetutorialz.com/content_images/AdobePhotoshop/ART-D/tutorial469/freelancer-portfolio-design.jpg8/22/2019 Freelancer Portfolio Design
25/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 25/28
Serega
25/04/2010
Name (required)
Mail (will not be published) (required)
Webs ite (optional)
Submit Comment
You can score your best marks by consulting ourjncia and 1Y0-A24 dumps exam practice questions,you can also download our best
quality BH0-006 dumps,000-119 and F50-532 which will greatly help you in preparation.
http://www.thetestkings.biz/exam/F50-532.htmlhttp://www.thetestkings.us/000-119.htmlhttp://www.brain-dumps.me/exam/BH0-006.htmlhttp://www.braindumps.co/1Y0-A24.htmhttp://www.certkey.com/JNCIA.htmlhttp://www.adobetutorialz.com/articles/30970062/1/Waves-text-effecthttp://www.adobetutorialz.com/articles/30970196/1/make-3d-spectacular-text-effect-in-photoshophttp://www.adobetutorialz.com/articles/30970602/1/how-to-create-a-new-year-2011-colorful-card-in-photoshop-cs5http://www.adobetutorialz.com/articles/30970853/1/how-to-create-neon-illustration-happy-new-year-2012-photoshop-cs5http://www.adobetutorialz.com/articles/30970678/1/apply-fantastic-lighting-and-coloring-effect-on-images-with-photoshop-cs5http://www.adobetutorialz.com/articles/30970297/1/how-to-create-3d-love-text-compositionhttp://www.adobetutorialz.com/articles/30970084/1/abstract-glowing-backgroundhttp://www.adobetutorialz.com/articles/30970178/1/how-to-create-a-christmas-card-in-photoshophttp://www.adobetutorialz.com/articles/30970208/1/how-to-create-a-colorful-photo-manipulation-in-photoshophttp://www.adobetutorialz.com/articles/30970670/1/use-lighting-effects-to-make-beautiful-artwork-photoshop-cs5http://www.adobetutorialz.com/articles/30970031/1/Colorful-Glow-Text-Effectshttp://www.adobetutorialz.com/articles/30970034/1/photoshopping-aqua-wallpaperhttp://www.adobetutorialz.com/articles/30970546/1/design-stylish-poster-mixed-with-displacement-effect-in-photoshop-cs5http://www.adobetutorialz.com/articles/30970346/1/how-to-create-abstract-colorful-background-with-bokeh-effect-in-photoshophttp://www.adobetutorialz.com/articles/30970191/1/how-to-create-an-impressive-looking-text-effecthttp://www.adobetutorialz.com/articles/30970507/1/create-an-abstract-light-streaks-poster-in-photoshop-cs58/22/2019 Freelancer Portfolio Design
26/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 26/28
Advertise Here
adobetutorialz
Like
7,442 people like adobetutorialz.
Facebook social plugin
Custom Signs
Royalty Free Images
Download Adobe Photoshop
onlinephoto retouching services
Hughesnet Gen4
Free Stock Photos and Images
http://www.stockvault.net/http://www.servicont.com/hughesnet-gen4-internethttp://photorelive.com/http://www.downloads.info/windows/graphics/photo-editors/adobe-photoshop.htmlhttp://www.123rf.com/http://www.signazon.com/http://www.facebook.com/nusrat.sharif.33http://www.facebook.com/janos.horvath.14811692http://www.facebook.com/ajay.deka.90http://www.facebook.com/andrian.syahroni90http://www.facebook.com/analucia.canelhttp://www.facebook.com/KarenRPeelhttp://www.facebook.com/hoalv12http://www.facebook.com/bimakuruhttps://www.facebook.com/help/?page=209089222464503http://www.facebook.com/pages/adobetutorialz/295163461914http://www.facebook.com/pages/adobetutorialz/295163461914https://www.facebook.com/help/?page=209089222464503http://www.facebook.com/pages/adobetutorialz/295163461914http://stats.buysellads.com/click.go?z=1235804&b=3005616&g=&s=&sw=1152&sh=864&br=chrome,28,win&r=0.5148321825545281&link=http://www.biznessapps.com/reseller.htmlhttp://buysellads.com/buy/detail/772/zone/1234724?utm_source=site_772&utm_medium=website&utm_campaign=adhere&utm_content=zone_1234724http://stats.buysellads.com/click.go?z=1234724&b=1440437&g=&s=&sw=1152&sh=864&br=chrome,28,win&r=0.28537613595835865&link=http://depositphotos.com/?ref=1255735&utm_source=buysellads&utm_medium=cpc&utm_content=buyer&utm_campaign=adobetutorialz.comhttp://stats.buysellads.com/click.go?z=1234724&b=3567501&g=&s=&sw=1152&sh=864&br=chrome,28,win&r=0.6851762621663511&link=https://sitetropolis.marketpath.com/signup/worker8/22/2019 Freelancer Portfolio Design
27/28
7/30/13 Freelancer portfolio design
www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design 27/28
Adobe Connection
eFOX shop fr Chinawaren in DeutschlandWholesale Handbags From China,Enjoy Wholesale Price
Categories
Acrobat Family
Adobe Photoshop
Adobe Technologies
Creative Suite FamilyDesign Software
Digital Imaging
Digital Photography
Software
About / ContactUs
Contact Us
Advertise with us
Submit a bug report
Privacy Policy
Popular
searches
Merry Christmas
Saint Valentine
Wallpapers
Subscribe
Subscribe via RSS
Get E-mail Updates
Stats
http://new.addfreestats.com/?usr=00720117http://feedburner.google.com/fb/a/mailverify?uri=adobetutorialz&loc=en_UShttp://feeds.feedburner.com/adobetutorialzhttp://feeds.feedburner.com/adobetutorialzhttp://www.adobetutorialz.com/?s=Wallpaperhttp://www.adobetutorialz.com/?s=Valentinehttp://www.adobetutorialz.com/?s=christmashttp://www.adobetutorialz.com/privacy-policyhttp://www.adobetutorialz.com/contact-ushttp://www.adobetutorialz.com/advertisementhttp://www.adobetutorialz.com/contact-ushttp://www.adobetutorialz.com/categories/Digital-Photography-Softwarehttp://www.adobetutorialz.com/categories/Digital-Imaginghttp://www.adobetutorialz.com/categories/Design-Softwarehttp://www.adobetutorialz.com/categories/Creative-Suite-Familyhttp://www.adobetutorialz.com/categories/Adobe-Technologieshttp://www.adobetutorialz.com/categories/Adobe-Photoshophttp://www.adobetutorialz.com/categories/Acrobat-Familyhttp://themeforest.net/popular_item/by_category?category=wordpress&ref=atixhttp://www.leatherelement.com/http://www.efox-shop.com/http://adobeconnection.com/http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design#8/22/2019 Freelancer Portfolio Design
28/28
7/30/13 Freelancer portfolio design
Freebies
Inspiration
Macromedia Products
Photoshop Plugins
Print and Web Publishing
Video and Audio
Photo Effects
Web Layouts
Follow us on
2006-2011 Adobetutorialz. All rights reserved.
a Media Temple company
http://www.adobetutorialz.com/articles/3075/1/Freelancer-portfolio-design#http://twitter.com/adobetutorialzhttp://www.adobetutorialz.com/?s=web+layouthttp://www.adobetutorialz.com/?s=photo+effectshttps://www.google.com/adplanner/site_profile?s=adobetutorialz.com&b=1http://www.adobetutorialz.com/categories/Video-and-Audiohttp://www.adobetutorialz.com/categories/Print-and-Web-Publishinghttp://www.adobetutorialz.com/categories/Photoshop-Pluginshttp://www.adobetutorialz.com/categories/Macromedia-Productshttp://www.adobetutorialz.com/categories/inspirationhttp://www.adobetutorialz.com/categories/FreebiesRecommended