freelancer portfolio design

Upload: ana-paulla-graciano

Post on 08-Aug-2018

222 views

Category:

Documents


0 download

TRANSCRIPT

  • 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=adobe
  • 8/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.html
  • 8/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-81858008
  • 8/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.jpg
  • 8/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-cs5
  • 8/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/worker
  • 8/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

    Twitter

    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/Freebies