Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Create A Detailed Portfolio Homepage by foxnrocks

VIEWS: 2 PAGES: 12

									Dezign Folio: Create A Detailed Portfolio Homepage
Design In Photoshop
    P o s te d in :   T u t o ria l s   • W ri t te n b y :   M i ch a e l B u rn s


Tools for Intelligence
Conference on patent intelligence Search
tools, visualization tools
www.ii-sdv.com


Eye Tracking
European leading eye tracking and usability
company
mirate ch.com



Matthew Woodson
Illustrator Represented by Jed Root, Inc.
www.jedroot.com




         0

                   156
      Like    27




             StumbleUpon



I   n this tutorial you w ill le arn how to create a Portfolio homepage de sign w ith a unique slide show and
    w elcome me ssage design. Also choosing great resources around the w eb to make our design more
cooler. I Hope that you can go through in this tutorial and learn a fe w techniques.




                                                                                                                                               Advertise Here




                                                                                                                Re ad more about o the r a dve rtism e nt options




                                                                                                                             Get Our RSS Feed For Free!
                                                                                                                             20,997 Subscribers
                                                                                                                What Is RSS? C heck other subscription options!




Resources you will need to complete this tutorial:
  960 Grid System
  108 Mono Icons by Tutorial9
  This Is Art2
  Ve gur Font
Here is w hat we w ill making, click on image for full preview :                      Find us on Facebook

                                                                                                   Design Blog
                                                                                                       Like


                                                                                      6,993 people like Design Blog.




                                                                                        M ike       M echelle      Dhan     William Dity a    Jitto




                                                                                       C heng-Li     P atricio    Ibrahim       Luan         Kumari




                                                                                         A lex        A nol

                                                                                         Facebook social plugin




                                                                                                      Follow Us On Twitter:

                                                                                                      27,289 Followers

                                                                                      #Te mplate Show : How to Design a Gallery
                                                                                      Layout in #Photoshop http://goo.gl/fb/ew Fqj
                                                                                      #quicktips #tutorials
                                                                                      2 hours ago


                                                                                      MySpace Sold to Ad Netw ork for $35 Million
                                                                                      http://t.co/w hLHSDu via @mashablemedia
                                                                                      @mashable
                                                                                      1 day ago


Step1: Working with Site Structure                                                    CSS Tricks for Smart #Quotes and Tooltips
                                                                                      http://goo.gl/fb/Fg4Hp #coding #htmlcss
Before we ge t started dow nload first 960grid system for easy Guideline cre ation.   #coding #csstricks #smartquotes
                                                                                      1 day ago

Open 960_download\templates\photoshop\960_grid_12_col.psd
                                                                                      @QadirRahim w ell, just aim for jque ry galle ry
                                                                                      tuts, a lot of cool ready to use galle ries there
We also ne ed to make sure that our Rulers and Guides are vie wed. By pressing        toi!
                                                                                      2 days ago
  CTRL + R (Vie w Rulers)
  CTRL + ; (View Guides)                                                              Agile Web De velopme nt That Works
                                                                                      http://aw e.sm/5Numg
CTRL + SHIFT + C to change the canvas size.                                           2 days ago


                                                                                      Pretty nifty- GMAP3 : A JQUERY PLUGIN TO
                                                                                      USE GOOGLE MAPS VERSION 3
                                                                                      http://aw e.sm/5Nukd
                                                                                      2 days ago


                                                                                      @SaadBassi maybe thats a good thing for a
                                                                                      change:)
                                                                                      2 days ago


                                                                                      @kailoon you mean about GooglePlus circles?
                                                                                      Why is it so? objection?
                                                                                      2 days ago


                                                                                      @LeeHarding83 oh cheers..then let's
                                                                                      see how our se arch traffic increases ;D
                                                                                      2 days ago


                                                                                      @AshConnell huh, I don't know yet,
                                                                                      but it w ould be good for FB get some healthy
                                                                                      competition :)
                                                                                      2 days ago




Using the Paint Bucket Tool(G) fill the background layer to #242b30
Now you nee d to create a folders. Here is the folders that we w ill use in orde r to be organized.




Step2: Working with Header
Make sure that you have downloaded all the resources. Create a new layer inside the heade r folder and nae
it toe header_bg (Make sure that you have finished cre ating the folde rs as said e arlie r). Now create a new
Guideline to do this go to View > New Guide, set the value to 100px and set the Orientation to Horizontal.




                                                                                                                      Help Us & Leave Feedback!

                                                                                                                 Do you have an excellent article idea you would
                                                                                                                 like to read about here? Share it!


                                                                                                                 Do you have some interesting tips how we could
                                                                                                                 improve our site?
Select Rectangular Marquee Tool(M), make a selection as show n in the screen shot below. Now se t the
foreground #f4f4f4, background #ffffff. Se lect Linear Gradient drag it by starting at the top dow n to the      Something missing here? Help us make this blog a
middle of the section .                                                                                          better place, leave feedback!



                                                                                                                          We would love to hear from you!
                                                                                                                             Be active! Write us now!


Logo

Still w e w ere working on the Header folder, create a new folder and name it to Logo. Make sure you installed
the Vegur font that you have downloaded. Follow the text formatting as shown in the screen shot be low .




Add this Blending Option




Drop Shadow




Gradient Overlay

Color Used


  #191919
  #505050
  #202020




Apply this styles to both texts




Navigation

Create a new folder and name it to Navigation. We will be putting our navigation links and place each icons
“108 Mono Icons by Tutorial9″ for its desired link , so grab text tool and place it as shown in the screen shot
below .




Add this Blending Option to the Icons




Let see what w e have on this step. First w e created our he ader background adding up our Logo using the
Veguar font w e style it by the power of Blending Options, here w e can style it uniquely. Next w e added our
Navigation menu using simple text and Icons from Tutorial9. Thats it for our Header section.




Step3: Working with Slideshow
Preview of what w e w ill making




Let’s w ork on first with the dark background. Cre ate a ne w layer inside the Slideshow folde r and name it
slide_bg. Next create a new guide Value to 465px, Orientation to Horizontal. Make a selection starting
below our he ader dow n to the guideline. Now se lect Linear Gradient, se t the Foreground to #0f0e0f and
Background to #1a181a start dragging from the top down to the bottom of the selection.




Create a new layer and name it slideshow_holder. Next cre ate a ne w guideline as show n in the screen shot
below . Select Re ctangle Marquee Tool(M) make a rectangle at the center of the guideline and fill it w ith white.




Add this Blending Option




Inner Glow




Gradient Overlay

Color Used


  #ffffff
  #f0f0f0




Stroke



Now we w ill delete some area in our slieshow_holder to place our Next and Previous buttons. Se lect Elliptical
Marquee Tool(M) and make a se lection as shown in the screen shot below . Do this in both sides.




Next and Previous Buttons
Create a new folder and name it to Arrow. Sele ct Rounded Rectangle Tool, radius to 10px and follow the
screen shot as show n below.




Place this icons both sides.
Add this Blending Option




Gradient Overlay
  #d7ff00
  #d7ff00
  #fff600




Now add up some text w ith the font choice of yours and also grab some image for the slide show .




Tabs


Create a new folder and name it Tabs. For the background of the tabs select Rectangular Marquee Tool(M),
place it as shown in scree n shot be low and fill it w ith w hite.




Add this Blending Option




Gradient Overlay
  #ffffff
  #dcdcdc




Stroke
  #b8b8b8




Inside the Tabs folder create anothe r folde r and name it to hover. Select Re ctangular Marquee Tool(M), place it
as show n in the screen shot below and fill it with black.




Add this Blending Option




Inner Glow




Gradient Overlay
  #191919
  #5d5d5d




Stroke
  #2d2d2d




Select Te xt Tool(T) and add this text formatting.
Create another folder and name it to Normal, Sele ct Text Tool(T) and add up texts with the same formatting.
Also I adde d a Divider. Follow the screen shot as show n below .




Let see what w e have on this step. We started our slide show by doing first its background follow by the
holder of the entire slide show . Next thing we have done is putting up some text and image to contain the
slide, then we added Tabs a design for active/hover and the other is styled in a normal state.




Welcome Message


Still w ere in the slide show folder. Create anothe r folder and name it message. Now select Rectangle Tool(U),
place the shape as show n in the scre en shot below.




Add this Blending Option




Drop Shadow




Inner Glow




Gradient Overlay
  #191919
  #585757




Stroke
  #2c2c2c




Notice in the Pre view of the Welcome Message it looks like it is hanging, so to do that select Pen Tool(P) and
create a shape both sides as show n in the scree n shot be low .




Make a se lection of it. Se t the Foreground to 0a090a, Background to #1b1b1b. Sele ct Linear Gradient and
start dragging from the top dow n to the bottom of the se lection.


Add this Blending Option




Stroke
  #100f10




You may have something that looks like this




Now we re going to add the me ssage, so se lect the Te xt Tool(T) and put up you message with the same
formatting as shown in the screen shot below .




In this step w e styled the w elcome message to make it looks like its hanging on the design. With the help of
the dark background and Drop Shadow w e achieve this hanging effect. Also w e styled our text to make it
looks like beveled effect by duplicating the text place it at the back of original, make the text darker and move
it up once by the use of the arrow key.




Step4: Working with Services
Preview of what w e w ill making




In the Services folder create another folder and name it to Service1. Open up “This Is Art2″ and select some
icons that is appropriate to e ach services. Now se lect Text Tool(T), follow the placement and the formatting as
show n in the screen shot bellow .




When you’re done duplicate it 2 times then change it texts and icons. Now were going to add a background
to our se rvices section to make it more nicer. Select Rectangular Marquee Tool(M), make a se lection as shown
in the screen shot below . Select Linear Gradient, set the Foreground to #f4f4f4 and Background to #ffffff,
start dragging from top dow n to bottom of the selection.




In this step w e simply grab some nice Icons, style our text w ith a proper font, font size, colors and by the use
of proper alignment of texts.




Step5: Working with Information
Preview of what w e w ill making




In the Information folder cre ate a layer and name it to background. Sele ct Rectangular Marquee Tool(M), make
a shape and fill it with #eaeaea




Add this Blending Option




Inner Glow




Stroke
  #e0dfdf




Now we re going to add the site Information. Select Te xt Tool(T), follow the formatting and place it as show n
in the screen shot below .




Create another folder and name it RSS Subscribe. Sele ct Rectangle Tool(U), cre ate a shape color to #b7b7b7
as show n in the screen shot.
Duplicate the shape. By the use of arrow key move it 1px to the right and 1px to the bottom.


Add this Blending Option




Gradient Overlay
  #eeee ee
  #ffffff




You may have something that looks like this




Select Rectangle Tool(U), create a shape and place it as show n in the screen shot.




Add this Blending Option




Drop Shadow




Inner Glow




Gradient Overlay
  #191919
  #585757




Stroke
  #2d2d2d




In this step w e just copy the text formatting of w hat we have done on our services area. Also w e create
an RSS Subscribe area w here we style the subscribe button looks like it is hanging the same as w e did to
our Welcome Message




Step5: Working with Footer
Select Footer folder and create a layer name it foot_bg. Using Rectangular Marquee Too(M) cover all the
remaining w hite space below the information are a and fill it w ith #1d1d1d.




Add this Blending Option




Inner Glow




Stroke
  #2d2d2d
To finish the de sign add up your copyright text using Text Tool(T).




Conclusion:
I really hope tha t you follow and learn something from this tutorial for your future projects. If there are some
steps that you didn’t understand feel fre e to ask some question below. Also if you like this tutorial please
share it to your friends and don’t forget to subscribe to our new s letter. Have a great day!.




For Further Reading:




  1st Photoshop We b           22 Photoshop Web             Convert 1stDe licious            1stDelicious: Cre ate A
  De sign Professional       Design Interface Tutorial      Portfolio Layout From            Simple Cle an Portfolio
    Layout Tutorial                    Sites                  PSD to HTML [Ve ry             Layout In Photoshop
                                                                   Detailed]




           Did you enjoy this article and found it useful?

     Be helpful and show your appreciation:                            Get even more of our stuff:


    Like   27                            3                         Get Our RSS Feed           Follow Us on Twitter
                            StumbleUpon




                                   Article was created by Michael Burns

                           Visit Michael Burns's Website | Follow Michael Burns On Twitter


  Graphic & Webdesigner from Philippines. Visit my page on D.A burnstudio and also you can follow me on Twitter.
       8 Brilliant Comments - Join Discussion Now!


                  Sagar


   Your are the best!
   One of the best tutortial!




                                                                             Reply




                  f



   he y how do i make the slideshow come to reality in dreamwe aver! thnks




                                                                             Reply




                  Marcin Wojciech


   I re ally like it!
   Nice and cle an.

   Thanks for sharing! :)




                                                                             Reply




                  Edison Leon



   Nice tutorial, thanks for sharing!




                                                                             Reply




Vivek Parmar
thanks for the useful article. wish i could de sign my blog like this




                                                                                                          Reply




                     Alex



        You can! Follow the tutorial and you’ll learn :) And one day you’ll be making those tuts yourself!

        I didn’t follow the tut but i realy like the design, nice !




                                                                                                          Reply




                     Dainis Graveris



        Well Vivek, just enjoy then these tutorials..and acquire necessary skills! With this tutorial I
        cannot see w hy you couldn’t design quality blog design yourself! Good luck!




                                                                                                          Reply




            Raghav



Ve ry good and useful Article.. good :)




                                                                                                          Reply




   Add Your Own Brilliant Comment:

Name (required):                     E-Mail (required):                 Website:




Comment:
T ags allowed: <a href=" " title=" " > <abbr title=" " > <ac ronym title="" > <b> <bloc kquote c ite=" "> <c ite> <c ode> <del

datetime=" "> <em> <i> <q c ite=" " > <s trike> <s trong>




                                                                                            Page loaded in 0.358 seconds.

								
To top