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.
Pages to are hidden for
"Create A Detailed Portfolio Homepage"Please download to view full document