Photoshop Tutorial: How To Make A Website Template

Today we’re going to be taking a look at making a fairly simple website template using Adobe Photoshop. We’ll be taking this template and coding it into a fully working .html/.css website in future tutorials. Click to tweet this video: ‪octotw.it If you don’t have Photoshop, then download the trial from here: ‪www2.adobe.com Color schemes: kuler.adobe.com Ankala font www.dafont.com Download the .PSD: octotuts.com Follow me: twitter.com Be a fan: facebook.com For more tutorials and extras: ‪octotuts.com
Video Rating: 4 / 5

24 Comments+ Add Comment

  • You never went over slicing the PSD… Could you help us all that are wondering out by explaining 😀 I went to some other videos on slicing but you made the template differently (And better) then them so the ways they went over weren’t applicable to this tutorial. PLEASEEEE go over slicing if you can?

  • @TizeTV There Is No Need For Slicing Here! Just Hide Other Images And Crop Your Image And Save It, e.g your header, hide all the other images that aren’t included in your header crop the image then save it to your theme folder as a non PSD image (JPEG,PNG) Then Re-insert it into your PSD as an image not layers!

  • @octotus any chance of you uploading a video on how to change my Photoshop file into a html file to get it up and running online, also could you make a video on how to do ‘links’ from one page to another?

  • Thank you so much, you have saved me, i have to do a website for university and this is amazing thank you again dude

  • I’m sorry if you have mentioned it in any of your other tutorials on website building, but I didn’t want o go any further until I could verify this. How do you make it expanding at the bottom if you have a blog, like if you keep writing past that point how do you get it to extend.

  • Love ya, keep up the great work, kid 😉

  • Liked and subscribed 🙂

  • Thanks so much for taking the time to make these videos and help me learn. I love your videos! ;-]

  • Heya octotus can you give me your Skype id or Yahoo please i wanna talk

  • 3:55 – confuse time

  • I need help.. where did you get the twitter, facebook widgets from? Great tutorial!

  • Kuler.com is now kuler.adobe.com, just letting you know.

  • hey, why I can not highlight the words when I finished???? It’s just an image

  • WebPaper.co can convert your .PSD into a website… Just save each image on a transparent background as a .png and upload it.. place the graphical elements into position and BAM! A fully functional website from a PSD.. =)

  • after doing all of this i found out that photoshop Elements8 doesnt have the slice tool. S-O-B

  • Hi, what about dynamic content? Is this technique mainly best for static sites? I mean how do you expand the content section if it’s just an image? For example, a site where the content changes daily like info from databases?

  • This site aint workin’ just one piece of s*it… u only take ppl’s .psd’s
    When you upload it takes you to other web address and when you try uploading again nothing happens.

  • i cant click and drag 03:41 doesnt work for me
    even if i hold down the CTRL button nothing works >.<

  • Are you McLovin??

  • i have a question can i add the text in after using html coding instead of putting it on the template it self and also how do you put scrolling with in the middle content area is that what you do on dreamweaver or is done with coding as well

  • and what do you save this file as so you can transfer it to dreamweaver ?

  • the website has to be made from divs instead of tables for dynamic changes like yours.
    hope that helps!! 😀

  • i know excatly nothing beats human coded websites!!

  • Exactly (y)