Design a Blog Layout with Adobe Photoshop
Buzz it
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.
Filed under: Blog Design Tips, Video
What Next? Read More Tips From BLOGBloke:
Sharing is Caring...
Subscribe here to the Better Tips Newsfeed! 
Follow @BLOGBloke on Twitter for Social Media Tips & News!
Subscribe here to the Better Tips Newsfeed! Follow @BLOGBloke on Twitter for Social Media Tips & News!
Opinions? (click here to jump to the comments form)
Video
.gif){kind=small}
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..]
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..]
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..]
I haven’t used Fireworks in years so maybe I’m the one who’s missing something.
[
Reply..]
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..]
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..]
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..]
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..]
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..]
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..]
This is much easier to do in CS3 now.
[
Reply..]
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..]
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..]
Nice work! Hopefully this will help me at work. -Slumberg
Photoshop Tutorials last blog post…Photoshop Tutorial: Improve Photograph/Image Quality
[
Reply..]
thank you webmaster.Very Good site.
[
Reply..]
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..]
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..]
@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..]
BLOGBloke (@blogbloketips) reply on November 10th, 2009 5:46 pm:
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..]
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
@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