Templateo
BETA version - what does it mean?
Premium Website Templates!
Templateo website templates are ready-made web designs, that can be used instantly as a high-quality website. Our website templates are completely customizable with our Online Template Builder which is free for all members! Learn more »
 

Tutorial - Part 1 - Design and Slice in Photoshop

Bookmark It
Tutorial Part 1
  • Open default template file in Adobe Photoshop. You'll see the most common used sizes of boxes, which you can use as template's elements - header, footer, menu, etc.
  • We will use wide bar, with "960px" label to be our top menu, splash part an footer. Activate that layer, and duplicate it: > Layer > Duplicate Layer (ctrl+J)
  • Sometimes it's easier to navigate if you name your layers, so let's name it "menu"
  • Our layer is duplicated now, move it to front - so it's not hidden behid other layers: > Layer > Arrange > Bring to Front (Shift+Ctrl+])
  • Layer is on top now. We will need 2 more wide layers bases on this one, just make duplicate for main part (splash) now, you can name it "main", move it to front again and resize - make it higher
  • There are also smaller boxes available, we will use them - one will be our sidebar header, and another will be content header. Select box and move it below our main part, which we called "main" before.
  • Now, do the same with wider box, which will be our content header
  • Move layer to be near sidebar header
  • We will use wide box again, duplicate it and call it "footer"
  • Move new layer to bottom of your new template, and resize it to fit your needs
  • Finally, we can arrange our design - reduce white spaces or make them equal, so there is good balance. When template layout is ready, we can add some life on it. Starting from top menu, find it on layers list, use right-button on your mouse, and select "Blending Options", where you can add some style to this layer.
  • There are many styles available, but we will focus on gradient - select this option, and add some gradient. As a result, you'll get menu bar coloured, when you like your new colors, click "OK"
  • Do the same with sidebar header, go to layer styles and add some gradient.
  • Repeat the same action for content header, adding some style and for footer.
  • Our template's background is white, so we can add some life there too, use "footer" layer, duplicate it, rename to "main_background" and move it higher - it'll be our main light background, resize it to be as wide as template and add some style - here, we added light blue which is getting white. When you like your style, arrange this layer to be behind all other layers
  • Our template design is almost ready now, it's great base which you can use to build custom designs. In this tutorial, we'll add a photo which was prepared earlier - background was removed.
  • Open some photo, remove background from it (here it was removed earlier) and simply drag this object to our main tab, where we work on a template
  • Resize object, so it fit our main box and confirm changes. We could leave it as is, but to make things complicated, we'll add some background :)
  • Create a selection - find main layer on the list, press ctrl key and click that layer
  • Now, create new layer above our "main" layer, it will be empty, and we will add some brush on it
  • Select Brush Tool, set size to 300px or more, and add few dots there, it will make background more interesting than grey gradient. When you are ready, contract selection a little: > Selection > Modify > Contract (set 3px)
  • Now inverse selection: > Selection > Inverse (or Shift+Ctrl+I) and clear this part which we don't need: > Edit > Clear
  • To make it less white, we can play with opacity - go to layers list and find "Fill" value, set it to 60%

    Design is ready! Of course you can design it your own way, use your own images colors or effect in the background, but main part is ready. Now, we will slice it to HTML

  • Our top menu will use "Sliding Doors" technique - it's needed in this sample only for hover effect, but if our top menu was a little more complicated (pretty) it would be more helpful. To prepare it for Sliding Doors, duplicate top menu. You can press ALT key and drag layer lower - it will be duplicated automatically. This will be our default state menu - but in our template, menu will react on mouse move - it will change its color when you hover on it
  • Do the same action again, duplicate it and locate directly below or first copy. Why is that? Upper copy will be "normal" state, and lower copy will be "hover" state (menu color will change when you move mouse over it)
  • To make it different that "normal" state, change Layer Style for lower layer. Here, it's simply copied from sidebar's header - colors are the same
  • Our design is completed and we are proud of it :) Now, the funiest part, slicing it to HTML - when this process is completed, Photoshop will automatically slice our design into images - it will generate separate images for background, footer, menu, etc.
  • Select "Slice Tool" on toolbar, and use it to "show" to Photoshop where it should cut. First, select main background - it will be an image which will be full-window wide, the blue-white gradient. Slice should be 3px wide and as high as our gradient is - or higher. We can name it "background" - so when it's exported, filename will be "background.png"
  • Another image which will repeat horizontally is menu background. Create a slice, and name it "menu_background", in final website it wil be repeated from left to right side of your design (960px width)
  • One, big slice for our main part (splash), create wide and high enough slice and call it "main"
  • Do the same with sidebar header...
  • And content header.
  • And the last "easy" slice - footer.
  • Now, the most difficult :) slicing, the top menu which will work as "Sliding Doors", in our sample it's easy because menu is just a block, but sometimes you may want to do tabs or rounded corners or something more original. Menu will be always 2 or 3 images: Left (small image which will be on left), Middle (an image which can be repeated to make button wider) and Right (image which in template will be below "left" image and it will be as wide as the button - will fit automatically)

    Create 3 slices, leave right slice the widest and name them: left, middle, right
  • Now slicing is done, Photoshop will use our slices to produce separate images for each template's element: > File > Save for Web & Devices
  • You can see the preview now, just press "Save" button now and confirm. Photoshop will create "images" folder on your desktop and create all images there!
  • OK! You have created a beautiful design, and sliced it out, image files are ready to use them.