<   Prior Home         Share Blog Bloke     Share Blog Bloke Tips       Share to Twitter       Share to Facebook       Share to Twitter       Share to Google Plus       Share to LinkedIn       Pin this       Get Updates            
        Next   >  

Design a Blog Layout with Adobe Photoshop

Here is a video tutorial showing how to design a blog layout using Adobe Photoshop 7.

Adobe Photoshop Tutorial Web Design Layout - These bloopers are hilarious

I don’t design this way being a coder myself, but it’s scary seeing how easy it can be done using Photoshop.

Written October 19th, 2007 by | 25 Comments | Filed under: Design Tips, Videos

Thanks for Sharing     Share - enable java in your browser Share to Twitter            

Did you enjoy this article? Keep up to date with Blog Bloke Tips the moment it's published by email. Your Privacy is Guaranteed and will not be shared with anyone.


Keep it real with Blog Bloke Thanks for reading the original Blog Bloke. You can read more about me here. Contact me if you have any questions, tip requests or if you would like to be a guest blogger. Keep it real every day and subscribe to the newsfeed, share with friends or follow me.

    Subscribe to the Newsfeed     Share to Twitter     Share to Facebook     Share to Google Plus     Pin this     Share to LinkedIn


Got an opinion? Let's be real and start a conversation:

It's your turn to tell Blog Bloke what you think, ask a question or suggest another blog tip. Don't forget the comments policy and I'm looking forward to reading what you have to say.

There are 25 Comments so far to “Design a Blog Layout with Adobe Photoshop”

  1. It doesn’t seem like such a great way to me. That just creates a single background image for the whole of the page. You then have to position all your elements on top of it, making allowances for the different screen resolutions.

    Unless I’m missing something huge, that would be a very messy way of doing it.

    I think that coding would be a better way to do it.

      Reply   ·   Share Share Blog Bloke Tips  

  2. It sounds like Dreamweaver on graphical steroids. Being a WYSIWYG editor you also gotta wonder what kind of code it will generate.

    Something like this will be Ok I guess for a very basic template. But nothing fancy.

      Reply   ·   Share Share Blog Bloke Tips  

  3. Whoa ! Thats a lot of steps for creating such a simple template !

    I am glad I never learnt Photoshop/Illustrator !

    I do all my graphics on Macromedia Fireworks and I can do all that in way fewer steps !

    I may be missing something if Bloke posted this !

      Reply   ·   Share Share Blog Bloke Tips  

  4. I haven’t used Fireworks in years so maybe I’m the one who’s missing something.

      Reply   ·   Share Share Blog Bloke Tips  

  5. I didn’t bother watching all of the video because I found the guys voice sooooo dull but I regularly use Photoshop as one of the first stages of designing a site.

    Initial ideas are put together using pen and paper - old school, eh? I then open up Photoshop and start playing around with positioning of the various elements of the site in terms of navigation, content positioning, ad positioning, etc.

    I find this works for me as I can play around with image sizes, banner ideas, font sizes and such like much quicker this way and can see if something will work or not before getting into the CSS styling.

    Horses for courses, I guess.

      Reply   ·   Share Share Blog Bloke Tips  

  6. I also start with old school pen and paper. I suppose using a WYSIWYG editor at first concept is a good idea to play with ideas. Then get into the nitty gritty of coding later. So long as you can clean up the bad code WYSIWYG’s usually generate.

    By the way Mike, which version of Photoshop do you use?

      Reply   ·   Share Share Blog Bloke Tips  

  7. I was using CS2 having upgraded just before CS3…grrr. I have to say, though, having used 5.5 for years that CS2 is an absolute breeze to use.

    I rarely use a WYSIWYG editor any more, if at all. There’s no real reason. Not once you’ve got to grips with CSS. That’s why I use Photoshop so that I can position the graphics on the page where I want them, get the absolute positions and then transpose to CSS.

      Reply   ·   Share Share Blog Bloke Tips  

  8. I’m still using Elements 2, but it doesn’t have this capability. If CS3 is as easy as you say it is I might consider upgrading.

      Reply   ·   Share Share Blog Bloke Tips  

  9. I do not style this way, but this guy forgot to add that you can use what is called slicing in Photoshop.

    In essense, he left a bunch out. This is very amateurish in my view.

    Bloke, I am a coder too, and design everything by hand with html and css.

    But I will say that Photoshop is awesome and far more powerful than this video demonstrates. I have been using for my job for some time now and I still learn new techniques with it almost every day.

      Reply   ·   Share Share Blog Bloke Tips  

  10. Brent, you guys got me at a disadvantage because I’m still using Photoshop Elements 2. I only use it for graphics and have never played with CS2 or 3 for styling websites.

    It sounds intriguing though and knowing myself I will probably give it a whirl one of these days. Thanks for dropping by bro.

      Reply   ·   Share Share Blog Bloke Tips  

  11. This is much easier to do in CS3 now.

      Reply   ·   Share Share Blog Bloke Tips  

  12. Thank you for your website :-)
    I made with photoshop backgrounds for myspace or youtube and ect..
    my backgrounds:http://tinyurl.com/6r7cav
    all the best and thank you again!

      Reply   ·   Share Share Blog Bloke Tips  

  13. I have been learning photoshop for the last one month. Recently our tutor taught us how to make a template in photoshop. But as far as slicing the image is concern, the background consist of single color is much more easier than the background having gradient effect.

      Reply   ·   Share Share Blog Bloke Tips  

  14. Nice work! Hopefully this will help me at work. -Slumberg

    Photoshop Tutorials last blog post…Photoshop Tutorial: Improve Photograph/Image Quality

      Reply   ·   Share Share Blog Bloke Tips  

  15. thank you webmaster.Very Good site.

      Reply   ·   Share Share Blog Bloke Tips  

  16. Adobe Photoshop is the best photo editing tool in my opinion.Photoshop has been my bread and butter software on my current job which involves a lot of photo editing.

      Reply   ·   Share Share Blog Bloke Tips  

  17. I use Adobe Photoshop on my Webpage making business at home. Photoshop got all the features i need to make some really great graphics and banners. ~

      Reply   ·   Share Share Blog Bloke Tips  

    Reply by: BLOGBloke at 5:46 pm said...

    @Lacnette, I swear by Photoshop for all my images but I haven’t yet tried it for creating webpages. I’m an old school coder. More precision.

      Reply   ·   Share Share Blog Bloke Tips  

  18. Yes, certainly this fellow was showing a just a rip it quick design. You gotta remember that you can take and make these wonderful detailed graphics designs that would be just a killer to code. Then you take and slice them up and load them up like a picture. It was a mind opening experience for me when I learned about it. Photoshop is merely the graphics tool and then you have to make it live through the coding.

    Granted this was not a particularly exciting video but I imagine that if a pro showed us how to do one of the really fancy website designs the video would be so long we would all be in a coma. :)

    Rex

      Reply   ·   Share Share Blog Bloke Tips  

  19. Nice tutorial thank you for sharing! :-)

      Reply   ·   Share Share Blog Bloke Tips  

  20. there is no other photo editing tool that is as good as Adobe Photoshop, It is simpy the best *

      Reply   ·   Share Share Blog Bloke Tips  

  21. adobe photoshop is the best photo-editing tool that we have used;~*

      Reply   ·   Share Share Blog Bloke Tips  

  22. Great post :) Thank you for posting this informative content .. I am looking forward to see more interesting and informative like this :)

      Reply   ·   Share Share Blog Bloke Tips  

  23. Adobe Photoshop is the best photo editing tool in my opinion.Photoshop has been my bread and butter software on my … http://bit.ly/4sqD25

  24. @Lacnette, I swear by Photoshop for all my images and I haven’t yet tried it for creating webpages. I’m old school when it comes to coding but I’ll take your word it works… http://bit.ly/4sqD25

Share     Share this article with your friends

Subscribe to Better Blog Tips Newsfeed   SUBSCRIBE to Bloke Bloke's Articles (Newsfeed)

Subscribe to Better Blog Tips Newsfeed   Subscribe to only Comments for this Article | TrackBack URL

You can also use these html tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>