Web site layout design with PS CS2

[ab.bs]

Hi guys, I just wanted to know if any of you guys are web designers and know of any free online tutorials for web designing using PS CS2. I want to know how to make web layouts. Your help is greatly appreciated.

Eric

[googlit]

The method used in these two tutorials is what I used when I first started doing web design. Now I make the smaller, component images I need, then put the site together from scratch with html and css. Photoshop is really helpful if you're just starting out, though. Definitely give it a shot and play around with the options and settings. I thought it was pretty awesome that PS will make mouseovers for you. :)

http://www.sitepoint.com/article/design-website-photoshop

http://www.entheosweb.com/photoshop/layout.asp

[wulf]

I can't help directly as I don't use Photoshop. However, I am a web designer. I'm always wary of websites produced with graphical tools because the underlying code tends to be gnarly and unnecessarily complex. That may not be an issue if you are just knocking something together for you own pleasure or to share with a few friends. However, if you are doing something for, say, a company website you have to think about things like accessibility, which a bunch of graphics chopped up into a table won't be.

Programs like Photoshop are good tools for visualising ideas (although I still turn back to pencil and paper) but it is worth bearing in mind that good web design is about more than how it looks on your computer (not least because it may well not look the same on someone else's machine).

Wulf

[ab.bs]

Thanks Wulf for the input... I know that doing a web site layout entirely from a Graphical software is not the best thing to do. I am just trying to learn the basics when it comes to web layouts and stuff... my bros will be doing most of the programming and they asked me to take care of the pictures and images for the website that we are trying to put together.

So Wulf... do you have any links/sources where I can learn the basics of web design?

[chris]

hi

i am new to this site but if this uis any help m8

i go to good tutorials.com

u can get tutorials on most things about ps cs2 there
hope is was help full

[Seltzer]

I'm always wary of websites produced with graphical tools because the underlying code tends to be gnarly and unnecessarily complex.

I agree, entirely depends on what you are looking to do, if you want examples of the (mostly) default photo pages made from ps7 that's what I used to do the pages in my very bare website here (http://johnwright.homeip.net). The code isn't that bad to modify but it can be a pain if you want to take out just one picture and want to reset how the main page looks and where the 'back' and 'next pictures go for the pictures before and after that one..
Aside from that.. it is a very easy way to setup the initial pages.. if you don't plan to edit or make them shiny after the initial build.

[wulf]

So Wulf... do you have any links/sources where I can learn the basics of web design?
There are lots of places where you can pick up the basics of being a code-monkey but, to get your head round thinking like a web designer, check out A List Apart (http://www.alistapart.com/). In fact, a perfect article for the purpose was published this morning: How to Grok Web Standards (http://www.alistapart.com/articles/grokwebstandards).

Wulf

[ab.bs]

Thanks Wulf.

[loosestring]

wulf, what about css? i've been trying to learn it and i seem to have grasped the concept, but most of the tutorials i've went through seem incomplete. i use dreamweaver mx (not an expert at it) so i'm trying to get my basic html skills to come together with dreamweaver and css into a package that i'd be able to assemble a good looking website.
so far i haven't found any "real good" tutorials for creating css files using dreamweaver that would walk through all the different variables you can adjust in your css style.

[wulf]

For a definitive guide, see the official specification (http://www.w3.org/TR/CSS21/). It is quite technical so a couple of other references include a list of all CSS properties (http://www.blooberry.com/indexdot/css/propindex/all.htm) (as you browse through, you'll realise that not all browsers can cope with all the options) and a website written as an online guide (http://www.westciv.com/style_master/academy/css_tutorial/index.html).

As far as Dreamweaver goes... I haven't used it myself but have done some work publishing a site that was set up with DW. Charitably, I would say that it tends to make things much more complex than it needs to (you don't want to hear the uncharitable version ;)

Wulf

[loosestring]

Actually I'd love to hear the uncharitable version. I'm always open to hearing people's opinions. When I first got into toying around with web design I learned some basics from this huge book called "Teach Yourself Web Publishing with HTML 4.0". It wasn't until a few years later that I began trying Dreamweaver and thus far I haven't really gotten along with it all that well. I haven't really spent that much time trying though either.

[googlit]

also check out http://www.csszengarden.com/

it's not so much tutorials, but lots of examples of what you can do with css. When I first started learning it, I liked to look through what they have. The best ways to learn are by example and experimentation. I often reference the official spec, as well.

[loosestring]

That site is sweet and it's exactly the sort of result I'm seeking. Perhaps if I view the code for one or two of those sites and check out the other site with the official spec I'll be able to piece it together.
Thanks guys.:)

[wulf]

Actually I'd love to hear the uncharitable version. I'm always open to hearing people's opinions.
Uncharitable is probably putting it a bit strongly. I could vent about how much I hate programs like DW but (a) I've hardly used them and (b) probably the only purpose that would serve would be to get some DW fans sounding off equally ill-informed counter opinions.

My personal dislike for visually orientated web design programs (Dreamweaver, FrontPage, etc) stems from three things.

1. They seem to produce HTML and CSS scripts that are unnecessarily long, complex and often inaccessible to people not able to surf with a current generation browser.

2. They give the illusion that what you see on your computer will be what someone else sees when they visit your site. That's not a true representation of how things work - there are a wide range of browsers and, with the growth of mobile devices, I expect that to grow over the next couple of years.

3. If you do go into the code to fix something, they often revert back and undo all your changes.

I suspect that there may be options in the programs that mitigate some of this but, over more than a decade of web design experience, remain to be convinced that they win out over knowledge, a text editor and testing on a range of platforms.

Wulf

[clickdeath]

Do you have any examples of your work?

[loosestring]

Uncharitable is probably putting it a bit strongly. I could vent about how much I hate programs like DW but (a) I've hardly used them and (b) probably the only purpose that would serve would be to get some DW fans sounding off equally ill-informed counter opinions.

My personal dislike for visually orientated web design programs (Dreamweaver, FrontPage, etc) stems from three things.

1. They seem to produce HTML and CSS scripts that are unnecessarily long, complex and often inaccessible to people not able to surf with a current generation browser.

2. They give the illusion that what you see on your computer will be what someone else sees when they visit your site. That's not a true representation of how things work - there are a wide range of browsers and, with the growth of mobile devices, I expect that to grow over the next couple of years.

3. If you do go into the code to fix something, they often revert back and undo all your changes.

I suspect that there may be options in the programs that mitigate some of this but, over more than a decade of web design experience, remain to be convinced that they win out over knowledge, a text editor and testing on a range of platforms.

Wulf

Understood. When I first began using Dreamweaver I thought it may make web design "easier", but as time went by I realized that it really is more of a nuisance. Sometimes I'll try to do things with it and it will either not respond to what I did or I'd get some whacked up result, yet I keep using it all the while banging my head against a digital wall that I just don't fully understand. Come to think about it, the designs I came up with prior to using Dw worked better anyways. Perhaps I should ditch that lady and stick to the code. After consulting the official spec on the page you posted earlier I may actually take off with it and do much better. Lets hope so.
I have grown a bit weary of the big software co.'s over the years. I use Autodesk and Microsoft products at my full time job and then there's my experience at home working with products like Dw and I must say that I'm much more pleased working with the non-conventional open source products as I seem to get better support in that arena. The corporate products seem to write their help and support sections in a manner that provokes one to seek training from "certified trainers". Nice business plan from one perspective, but not very convenient for the consumer or small business.
Sorry, I'm ranting on a tangent now.:o
Thanks again.:)

[wulf]

Do you have any examples of your work?

Check the blog in my signature for my personal site - the "creating" link at the top of that points to a couple more sites that I have worked on, although that page needs some updating.

I doubt any of the pages will blow you away with their visual impact but they do meet my goal of being accessible to the widest possible range of visitors.

Wulf

[loosestring]

Hey you're pretty good man. I see you use the GIMP as well. I've been trying to learn that program too.

[wulf]

The GIMP is great! It does have a pretty steep learning curve at the beginning but, after following a few tutorials and doing some experiments of your own, you should start to get the hang of it.

Wulf

[loosestring]

I sure hope so. I fully understand the layers as I deal with that every day on my cadd software. I understand paths, although I have a feeling they do a lot more than what I know so far. I don't really understand the masks and channels. I was doing some tutorials (on the GIMP site) the other day and it had me adding masks and such and I just wasn't comprehending what I was doing although I saw the result of it and it worked (in most cases, sometimes it didn't as the tutorial(s) seemed to have left a few important steps and/or details out).

Yesterday I used a path to select and crop an image and then I did a ctrl/n for a new file and pasted it and then I wanted to have the image fade to black from that path outward and I couldn't figure out how to do that either.

[wulf]

Masks are an essential tool to get the hang of. When you put a mask on a layer, anything that is black on the mask becomes invisible and anything white remains opaque. Everything in between becomes increasingly transparent, depending on how dark or light the grey is.

One way to accomplish what I think you are describing is to create a copy of your image as a new layer. Put a flat black layer underneath it. Add a layer mask to the copy of your image and set it to black (full transparency). Now, making sure you are working on your new mask and not the image, turn your path into a selection and fill that new selection with white. You will now have your image floating on a black background. Select the whole mask layer (Ctrl-A) and then apply a gaussian blur filter; now you have a fade to black (play around with the filter settings to get the amount of feathering you want).

There are also other ways to accomplish the same effect but that is one that will work.

Hope that helps.

Wulf

[loosestring]

Hey it worked! Check it out. Thanks a lot Wulf. Now I understand masks a little more. :)

[loosestring]

Here's an image I created last night for a webpage background. I took a picture of a lampshade and used that as a bumpmap for texture. Then I added the fog (http://gug.sunsite.dk/tutorials/waldgeist2/) and if I remember right I antiqued it afterwards to give it sort of a rustic look. Finally, I made it seamless.

I might add that the tutorials on w3c.org make learning css much easier for me. It's a lot more simple when I'm just doing the code rather than using software like DW. Thank you so much for the help in this dept.

[wulf]

That's the way a lot of the neat textures out there on the web were done - take a picture, mess with the colours, perhaps blend it with another image, make it seamless and voila.

It is much easier to get interesting textures that way than trying to draw them from scratch. Even a very subtle bit of texturing can help - for example, if you look at my blog, you will probably hardly see the background (based on photos and done in white and very light green) but, unless you have your monitor too bright, it is just enough to stop the white looking completely flat and clinical.

Is the site you are working on live yet? Your MySpace link (which I checked) seems not to be working at the moment (although my connection has been flaky of late).

Wulf

[loosestring]

No it's not live. As a matter of fact it's not even started. I am just beginning to collect some ideas. I'll be using the texture in my last post as the background. It's going to be my first blog that I've done, not including myspace blog. As I collect ideas for the design and learn css better I'll begin to assemble the page. I want to have a rustic design that may remind the viewer of an old log cottage in the mountains or maybe a farm. I'm going to try to design the content to look something like you would see in classic (18th-19th century) literature. I feel there is a long road ahead of me. Hehe.:)
Oh speaking of that, do you have any ideas of how to make a modern photo look like an illustration in an old book?

I goofed the code in the link. It is fixed now.

[loosestring]

Ooo I think I may have achieved the illustration effect by using filters > artistic > cartoon (mask radius = 10.00, percent black = 1.00) then select > by color > click black and copy to new layer (white background) and use the script fu for old photo to antique it. What do you think?

[wulf]

I think it is probably a bit too heavy on the brown. Old illustrations often didn't have such a weight because of limitations in the printing process (inks would have softened the paper and made it more likely to tear, etc). I think you're on the right lines though - maybe increase the contrast on the original and try again with the same techniques?