Photoshop Web Design

[Pipeline-Webdesign]

how do i go about designing my site in photoshop... i've seen several people go about it this way and they're sites look great... if someone can pretty much step me through this... i'd greatly appreciate it!

[Calisonder]

think of an idea, sometimes drawing it out on paper first helps, then use your skills and create it in photoshop, then save it as a .jpg or .gif, then cut it up and write the html code and wah lah

[DaveyBoy]

wait a second, you seem to ask an awful lot of 'how do i...' questions for someone just been awarded a $4000 contract.

[DaveyBoy]

GIF, not JPG by the way, calisonder - endlessly better

[Calisonder]

what ever, just a sugestion

[Calisonder]

Originally Posted by DaveyBoy

wait a second, you seem to ask an awful lot of 'how do i...' questions for someone just been awarded a $4000 contract.

how do u know that

[alpha3m]

Not to sound harsh or anything, but if you don't know how to design a layout using photoshop, then you really shouldnt be taking on a $4000 project.

Why not just manage the project, and let the professionals do the work. JMO

[Pipeline-Webdesign]

since when do we judge others that are actually working hard to increase our skills? by the way, i, michael, was not awarded a $4000 contract... my firm was awarded a $4000 contract that i will be working along with others...

and in regards to asking the question "how do i"... how are you supposed to learn with out asking... or attempting to find out... skills aren't just aquired... thx for the help

[JuggoPop]

First off... I missed the $4000 comment elsewhere so I won't really get into that without saying that from time to time we get some people in here that claim more than they really do or need and it has made people a little weary of first impressions on some subjects. With that said...
congrats on the contract, it feels good to be on a team that can actually pull off nice projects & good luck.

back to your question... here are the steps.
- design the layout as you would want it to look, in photoshop.
- tip: always save your layered psd and never use the erase/use masking instead
- after finishing the layout, export it directly to imageready.
- in image ready, slice the image (this is where you will be putting your html skills to the test, as you will need to slice it with the vision of how the code is going to relate and how it will expand.)
- preview in a browser (from imageready)
- it will show you an example, and give you the html.
- take that html, put it in a editor, save your images over from the images folder that it exported to...
- clean the code as needed.
- remove any images that are solid colors (replace them with hex values)
- replace images that can expand, with one pixel (width or height depending on where it is) versions that will save load time and still look the same.
- move any images that are not linked to the background of that cell...

test, add content, etc.
to do it in CSS only, it's a whole other story... one which I am still trying to get down 100% myself.

good luck.

[Pipeline-Webdesign]

Originally Posted by JuggoPop

First off... I missed the $4000 comment elsewhere so I won't really get into that without saying that from time to time we get some people in here that claim more than they really do or need and it has made people a little weary of first impressions on some subjects. With that said...
congrats on the contract, it feels good to be on a team that can actually pull off nice projects & good luck.

back to your question... here are the steps.
- design the layout as you would want it to look, in photoshop.
- tip: always save your layered psd and never use the erase/use masking instead
- after finishing the layout, export it directly to imageready.
- in image ready, slice the image (this is where you will be putting your html skills to the test, as you will need to slice it with the vision of how the code is going to relate and how it will expand.)
- preview in a browser (from imageready)
- it will show you an example, and give you the html.
- take that html, put it in a editor, save your images over from the images folder that it exported to...
- clean the code as needed.
- remove any images that are solid colors (replace them with hex values)
- replace images that can expand, with one pixel (width or height depending on where it is) versions that will save load time and still look the same.
- move any images that are not linked to the background of that cell...

test, add content, etc.
to do it in CSS only, it's a whole other story... one which I am still trying to get down 100% myself.

good luck.

thanks so much for the help... all i needed was a push... i appreciate it!

[Atom]

Don't stop asking questions, RT, we all learn when people ask questions here...

[SN3]

Originally Posted by JuggoPop

back to your question... here are the steps.
- design the layout as you would want it to look, in photoshop.
- tip: always save your layered psd and never use the erase/use masking instead
- after finishing the layout, export it directly to imageready.
- in image ready, slice the image (this is where you will be putting your html skills to the test, as you will need to slice it with the vision of how the code is going to relate and how it will expand.)
- preview in a browser (from imageready)
- it will show you an example, and give you the html.
- take that html, put it in a editor, save your images over from the images folder that it exported to...
- clean the code as needed.
- remove any images that are solid colors (replace them with hex values)
- replace images that can expand, with one pixel (width or height depending on where it is) versions that will save load time and still look the same.
- move any images that are not linked to the background of that cell...

test, add content, etc.
to do it in CSS only, it's a whole other story... one which I am still trying to get down 100% myself.

good luck.

That's what I do, but sometimes I start from scrach in notepad. I also do a lot of editing in notepad after it is exported. You will probably need to edit a lot of html for it to load fast, work well (in all browsers, etc.

[greg]

i just use it to get a general feel for how i want the layout to be then i start working on it. Sometimes i'll cut out the header from the layout i make in PS, but not always.

I tried to keep this last site fairly minimalistic though, used a lot of css on it. not much of a graphic job honestly. The next one that i will work on this weekend should be though.

[Pipeline-Webdesign]

Originally Posted by JuggoPop

First off... I missed the $4000 comment elsewhere so I won't really get into that without saying that from time to time we get some people in here that claim more than they really do or need and it has made people a little weary of first impressions on some subjects. With that said...
congrats on the contract, it feels good to be on a team that can actually pull off nice projects & good luck.

back to your question... here are the steps.
- design the layout as you would want it to look, in photoshop.
- tip: always save your layered psd and never use the erase/use masking instead
- after finishing the layout, export it directly to imageready.
- in image ready, slice the image (this is where you will be putting your html skills to the test, as you will need to slice it with the vision of how the code is going to relate and how it will expand.)
- preview in a browser (from imageready)
- it will show you an example, and give you the html.
- take that html, put it in a editor, save your images over from the images folder that it exported to...
- clean the code as needed.
- remove any images that are solid colors (replace them with hex values)
- replace images that can expand, with one pixel (width or height depending on where it is) versions that will save load time and still look the same.
- move any images that are not linked to the background of that cell...

test, add content, etc.
to do it in CSS only, it's a whole other story... one which I am still trying to get down 100% myself.

good luck.

what size do i create my new image in?

[ATLien]

Pay me to do it, and then just look at the final product.

[DaveyBoy]

lol @ atlien's desperate attempts.

can't you do a mailshot with your 80 bucks, take a risk, it may work.

[TranceSpeeder]

when i make something, i just get a huge idea in my head of what I want it to look like, than i just go with the flow.

[Atom]

what size do i create my new image in?[/quote]

749x375 will fit in an 800x600 browser perfectly, w/no scrolling. This is the "safe" size.