Creating a website layout tutorial

[Cisco]

Does anyone know of a tutorial that takes you through creating a website layout in Photoshop step-by-step? Like one that would tell you what dimensions to use, and go through splicing, then how to fix it up for the web in a WYSIWYG editor, etc.

[Koobi]

Well about the slicing bit, you could check this (http://www.graphic-forums.com/showthread.php?s=&threadid=346) out.

Also try doing a search on slicing and look up posts by a user named Samuel. I cant remember in what other thread he posted, but he posted some pretty useful info on slicing.

[Samuel]

What I should do is make a tutorial, but I'm sitting here thinking to myself, what good would it do?

I'm self taught, what I do to arrive at whatever I end up has been from trial and error. I know that what I do in photoshop is not neccesarily what you're supposed to do, Meaning; there might be a "Right Way" versus the way I do it.

I'm considering doing one, but I don't want anyone to think I "Think" I'm all that, because I know I am a hack with photoshop and dreamweaver =)

[Silver145]

If you are wanting a step-by-step tutorial for making a web page in photoshop a good place to go is Photoshop Cafe (http://www.photoshopcafe.com/tut_misc.htm) look at the Super Tutorial 2 it gives u the basics for photoshop and it goes into dreamweaver.:)

[Samuel]

http://www.photoshopcafe.com/tutorials/rounded/rounded.htm

This is a really bad tutorial lol

[SeventhVirgo]

Lol, yeah it is Sam...I could write a better one...and I don't know shiet :D. So please, if you'd like, write one, and what's wrong with people thinking that you're all that? I think that you are all that...and you pretty much are...you own your own servers and you make professional looking layouts...So if you have any freetime...please consider it :P

[Koobi]

Originally posted by Samuel
What I should do is make a tutorial, but I'm sitting here thinking to myself, what good would it do?

I'm self taught, what I do to arrive at whatever I end up has been from trial and error. I know that what I do in photoshop is not neccesarily what you're supposed to do, Meaning; there might be a "Right Way" versus the way I do it.

I'm considering doing one, but I don't want anyone to think I "Think" I'm all that, because I know I am a hack with photoshop and dreamweaver =)

I say go for it Sam :2thumbs:
I learnt how to do the basic slicing thing out of some book sometime back but it's better to learn from someone who would have come accross practical problems so go for it :) and yeah that tute is ahem.....I love all Colin Smith's other work though :)


Cisco Hows it going? Found the threads I was talkin bout?

[Cisco]

Bane - Thanks for telling me to search through Samuel's posts, I've found a lot of helpful stuff.

[monk]

Hell yes Sam, if you learn something, and you can pass the knowledge along to others, i say go for it, you may get a few people who think 'showoff' but the amount of people you will be helping far outweighs it, and they're the ones that count :)

[Caged]

I have a two part Site layout tutorial on www.skinsntemplates.com you can check out :)

[Samuel]

Ill do one for this (http://www.sighost.us/templates/v3.html) site I sliced out this morning

[Koobi]

Nice one Caged. Good collection of tutes there :)


heh heh Sam, looking good sam....i especially liked:
The hottest thing to hit the Internet since porn lol

[Caged]

Thanks Bane :)

[User 011]

Nice caged, thanks.

EDIT - The site went down? I'm getting a 404...

-User 011

[Samuel]

Caged, why is your site so dark? Its impossible to read, although it looks like a very nicely done site.

I can help you improve this tutorial:
http://www.skinsntemplates.com/dark/tutorials/Color2Sketch.php

Cntrl Shift U
Cntrl J
Cntrl I
(Set top layer to color dodge)
Filter/Blur/Gausian Blur

[Cisco]

Samuel - Will the tutorial go through just the Photoshop aspect of that design or will you go through editing it with a WYSIWYG or text editor? Because I am curious about how to go from having a complete, sliced Photoshop image to having a centered, usable web page. Also, will your tutorial go through making parts of the web page "nonimages", areas where you can place text, etc.?

[Caged]

My monitor seems a little brighter than others...but the entire site is about to change very soon... Going with white this time ;)

[Samuel]

Yes, the slice I did above has cells that use tiled images to re-create the layout, and also give the ability to place other things, other images (Utility Image Hosting) is an example.

I don't know any other way than to meld the two applications into a tutorial. One "To me" cannot exist without the other, so yes they will be used hand in hand.

As long as I have used one I will have to make certain determinations on to what I want to "State" versus what I know as every slice offers it's own challenges, and even though that slice up there looks simple, it is an exact recreation of the PSD which took quite a bit of fiddling, and thought, to make it come out just right.

Its not uncommon for me to slice something twice, or parts of it twice and I realize what I am trying to do won't work, but I've never had a layout that couldnt be recreated out of photoshop.

This is my challenge I guess, to type all that shit out with screenshots so it is readable.

[Mr.FeelNothing]

Design a Website In Photoshop (http://www.sitepoint.com/print/881)
I hope that helps.

[Samuel]

That certainly suits just fine, thanks Mr Feelnothing

[Koobi]

Originally posted by Samuel
Its not uncommon for me to slice something twice, or parts of it twice and I realize what I am trying to do won't work,


oh man that's happenned to me more than a few times :(
thankgod im a bit better though, i learned a bit in my last jog as a web designer :S

so when are these tutes gonna come out? i know theres so much i dont know about slicing and integrating with DW

[Samuel]

Well, I put up a new layout I did this morning for devimg, and the first tut is for making a rounded sliced out corner border.

http://www.devimg.com/index.php?page=tutorials/index

I'm starting it now, just got back from an appointment and it will lead to a full slice out of a site.

Thought it would be a good idea to show an intimate tutorial first with PS and DW

[Cisco]

Originally posted by Mr.FeelNothing
Design a Website In Photoshop (http://www.sitepoint.com/print/881)
I hope that helps.
Thanks, that tutorial is very good.