Designing sites using Photoshop

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8749
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

What do you all think about the whole using Photoshop to design a site? I'm thinking about using it for the first time and slicing the images before uploading it. I don't know where to start, but would be willing to learn if the general opinion on the idea is good.

For the record, my knowledge of CSS and PHP etc etc is generally okay. Do you think by using Photoshop to design the site it would be taking a step backwards?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Personally, I think it would be taking a step backwards. You can change the setting (maybe it's default in recent versions now?) to have Photoshop output divs instead of tables, but the code it kicks out is still pretty ugly.

Since you know some CSS, you'll probably be able to fix it up a little, but it will never be quite as well done as if you had structured it the right way from the start.

That being said, I use Photoshop to design websites all the time. It's great for putting together a mockup image for the client to okay. Then, you can take the various images from the mockup and use them when you put together the real site.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

Definitely not! That's how I do a good chunk of my designs!
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23473
  • Loc: Woodbridge VA

Post 3+ Months Ago

If you want a graphically oriented site, there's nothing wrong with using Photoshop to do it. Here's a good little tutorial that might help. Best thing to do is try a couple. See if you like the way it turns out or doing it that way.

http://www.sitepoint.com/article/design ... -photoshop
  • spork
  • Brewmaster
  • Silver Member
  • spork
  • Posts: 6299
  • Loc: Seattle, WA

Post 3+ Months Ago

jameson5555 wrote:
That being said, I use Photoshop to design websites all the time. It's great for putting together a mockup image for the client to okay. Then, you can take the various images from the mockup and use them when you put together the real site.

That's exactly what I do. I create the entire mockup in Fireworks and then create the HTML and CSS from scratch, using images from the mockup as needed.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

I slice out images in graphical formats where desired but still handcode all the programming - I would still say I used Photoshop to design it, however.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Right. In that way, I guess I use PS to design websites, too.

What I mean is that I don't think it's a great idea to have PS actually generate the whole website for you. It seems like it makes way more slices and way more divs than are necessary, which ends up making your website less efficiently designed and less maintainable.
  • spork
  • Brewmaster
  • Silver Member
  • spork
  • Posts: 6299
  • Loc: Seattle, WA

Post 3+ Months Ago

Agreed.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

I've never actually tried - I just assumed it would spit out crappy markup. I heard there's a plugin that does a good job spitting out validated CSS designs...but I haven't come across a trial...
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 374

Post 3+ Months Ago

I like the slicing action in Fireworks a little better. But I would use a image package just to create the images you want to use. Example Fireworks will spit on an entire page, but that doesn't mean it's the best code. Plus you don't learn much this way. I do my mock ups with Photoshop and just get that slice tool humming.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

In my mind there are two different processes being discussed. I break creating a project of any kind (web, print, furniture, etc) into two parts.

The first part I call "Design". In this process I understand the audience, determine communication goals, consider layout, color, imagery. This is the step where I solve visual problems. In essence this "design" step is used to create a blueprint for the final product. I always use image manipulation programs (photoshop, illustrator, c4d, etc) in this stage to create the final look of a project.

The second step is "production / development". In this stage I actually find a way to produce the end product. In the case of web this stage makes uses of HTML, CSS, Javascript, Actionscript and any helper programs (Flash, Dreamweaver, Notepad, etc) to make everything work.

In essence I always use photoshop to "design" a website. Photoshop has the ability to "build" a website as well but its really no better than any of the myriad of other programs available to write html. The moral of the story? Yes, learn Photoshop because it will help you make a better looking website, but stop there and "build" the website yourself.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

I use photoshop to create my site... I slice them up and save for web. Than I rewrite the HTML and make it XHTML (Using divs and CSS). Doing all that, I never run backwards :lol:

IT works great. I get the images the size I want and... I get the site that I want :)
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

zaiah wrote:
I like the slicing action in Fireworks a little better. But I would use a image package just to create the images you want to use. Example Fireworks will spit on an entire page, but that doesn't mean it's the best code. Plus you don't learn much this way. I do my mock ups with Photoshop and just get that slice tool humming.


Don't export as HTML :)
  • spork
  • Brewmaster
  • Silver Member
  • spork
  • Posts: 6299
  • Loc: Seattle, WA

Post 3+ Months Ago

graphixboy wrote:
In my mind there are two different processes being discussed. I break creating a project of any kind (web, print, furniture, etc) into two parts.

The first part I call "Design". In this process I understand the audience, determine communication goals, consider layout, color, imagery. This is the step where I solve visual problems. In essence this "design" step is used to create a blueprint for the final product. I always use image manipulation programs (photoshop, illustrator, c4d, etc) in this stage to create the final look of a project.

The second step is "production / development". In this stage I actually find a way to produce the end product. In the case of web this stage makes uses of HTML, CSS, Javascript, Actionscript and any helper programs (Flash, Dreamweaver, Notepad, etc) to make everything work.

In essence I always use photoshop to "design" a website. Photoshop has the ability to "build" a website as well but its really no better than any of the myriad of other programs available to write html. The moral of the story? Yes, learn Photoshop because it will help you make a better looking website, but stop there and "build" the website yourself.


Very well put, graphixboy.
  • IcyDragoon
  • Student
  • Student
  • IcyDragoon
  • Posts: 65

Post 3+ Months Ago

I always use photoshop to create the designs and slice them up into parts, then manually write codes to fit them in the page ^^

Its a nice software ^^ I am creating all my images using it, hehe.
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6890
  • Loc: up a tree

Post 3+ Months Ago

graphixboy put it very well.

personally I design the whole site in photoshop first, then once approved by the customer, i slice it up and keep the bits i need and code the CSS/html.
  • Allied77
  • Beginner
  • Beginner
  • Allied77
  • Posts: 40

Post 3+ Months Ago

One thing I noticed, the slicing option in image ready or fireworks just makes it more complicated.

I made my page in photoshop, then just started copying the pieces I need, created a table in dreamweaver and just started from the top down. in the end, it look longer, but I knew where i was at all the time.

so in the future i won't go near image ready
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6890
  • Loc: up a tree

Post 3+ Months Ago

i never bother with the slices tool. i just create create a flattened copy of the final peice and cut the bits i need and make the background of the cut bits a colour that stands out so i can see where i need to make my next selection and cut.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

Am I the only one that uses Image Ready? lol
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

neksus wrote:
Am I the only one that uses Image Ready? lol

Maybe.. lol

I don't use Imageready either. It seemed like the slices just made everything more complicated than it needed to be.

Instead, I just use the crop tool and/or hide layers along with 'save as' to get the images I need. That way I have a more three dimensional access to the Photoshop document than the slice tool could give me.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

I never use the automated slices because they suck. But it only takes a few minutes to slice up an entire site. You can also hide/show layers and configure all the separate colour palettes and file formats (not to mention file names!) in Image Ready to prepare for batch output.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Maybe I'll try playing around with slices again now that I have CS2. I think one of the things I didn't like before was that I couldn't export slices as .PNGs.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

What's wrong with JPGs or GIFs? Although I like PNGs as well... I like the transparency support in it... MSIE doesn't agree with me though :x
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Bogey wrote:
What's wrong with JPGs or GIFs? Although I like PNGs as well... I like the transparency support in it... MSIE doesn't agree with me though :x

It's only IE6 that doesn't handle PNG transparency and there's a pretty easy hack for that. For me it's worth it to have true transparency and better resolution. Every image type has it's time, but I find PNGs to be more versatile in a lot of cases.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Alright :) I agree with you James. I actually like PNGs too, but I mostly use JPGs. I don't like GIFs though... don't know why, just don't.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

Lol I don't like GIFs either for some reason.. maybe it's because I've seen to many of them done with jagged edges or crazy animations.

I do use a lot of JPGs too because you can get smaller file sizes out of them than you can with PNGs.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

Glad we're on the same page :D
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

I still use GIFs pretty exclusively for text-based images.
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6890
  • Loc: up a tree

Post 3+ Months Ago

what are you talking about gif is beautiful! especially for vector based artwork and text. plus it saves down to next to nothing file size wise! :D
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8488
  • Loc: USA

Post 3+ Months Ago

musik wrote:
what are you talking about gif is beautiful! especially for vector based artwork and text. plus it saves down to next to nothing file size wise! :D

Maybe, I still don't like it though... Don't really know why. I just don't like GIFs :x
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

I used to hate them until I understood how they worked :D
I hate having to change my CS2 settings around depending on whether I'm working on photos or other stuff, though. I know there's workspaces but default/last actions don't change!
  • websushil
  • Novice
  • Novice
  • websushil
  • Posts: 24

Post 3+ Months Ago

IcyDragoon wrote:
I always use photoshop to create the designs and slice them up into parts, then manually write codes to fit them in the page ^^

Its a nice software ^^ I am creating all my images using it, hehe.


Definitely photo shop is the best software to design pictures. use photoshop and make your website great.Good Luck
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

musik wrote:
what are you talking about gif is beautiful! especially for vector based artwork and text. plus it saves down to next to nothing file size wise! :D

I think the only time GIFs should still be used is if you're restricted by file size. Small PNGs like the ones you use for text-based images don't take up all that much space, though, and they look a whole lot better. Check out the navigation links on this site, for example. I changed them to text-only for IE6, but in modern browsers they're done using background PNGs. I don't think you can do that with GIFs.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

You sure can't - but that is an example of how PNGs should be utilized, not replacing GIFs.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8749
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Wow, thank you for the replies. I seriously can't believe i forgot about posting this already. My last few weeks have been super hectic, so i'll use that as my excuse.

Some good advice here. I think i always knew that it was something i should start looking at. I was just more concerned about how messy things would be behind the scenes. I need to really start looking into using this as it would just be ideal for the kind of website i need to start developing.

The link you left ATNO/TW seems to show a good tutorial, however the Photoshop that user is using is very old and as far as i can see there is no such thing as Imageready in Photoshop CS3, so for slicing the iamges i'm not 100% sure on what to do.

Thanks everyone for the good replies so far.
  • dyfrin
  • Expert
  • Expert
  • User avatar
  • Posts: 503
  • Loc: WI

Post 3+ Months Ago

I have been doing it all wrong!

I look at notepad/vi, and create a page layout. (2 column, funky, etc).
I create all the html/css and then I start thinking of coloring/pics.
A picture forms in my head, then I try to graphically fill it.

I think perhaps its from doing sites in a non x11 gentoo environment =\
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2193
  • Loc: Canada

Post 3+ Months Ago

I know somebody who does sites like that. He's a solid programmer and his sites are functional, but he seriously lacks in creativity.
  • Darkmike
  • Born
  • Born
  • Darkmike
  • Posts: 4

Post 3+ Months Ago

I have to agree with you guys. My last client runs a production studio in florida and when we met with him to build him a new site he had the whole thing the way he wanted it already done in photoshop. This obviously doesn't happen everyday but it was awesome. i'm using photoshop for all my pre development work now. the site was built and put up in a matter of hours. (it was a very simple site)
  • mobergh
  • Born
  • Born
  • mobergh
  • Posts: 1

Post 3+ Months Ago

My first post in here! :)

Here's my development-stages in short:

*Collect info about the client/customer
*Start quickdrawing on paper...(I can't draw good)
*In to photoshop and make a "draft" that client/customer can coment.
*draw "boxes" on a paper that will bi needed to place the graphic.
*decide which type of boxes(divs, p, span etc.)to use and then name them (id). And all this on paper too.(this makes it very easy to code right and to know how the boxes will relate to eachother.
*In to dreamweaver an start coding both XHTML and CSS.

*sometimes the making/saving of separet pictures from Photoshop draft is made before i start to code and sometimes after - all choosen through inspiration! =)

I hope you can read even though my spelling & grama' ai'nt that good.
  • michaelt
  • Newbie
  • Newbie
  • michaelt
  • Posts: 8

Post 3+ Months Ago

I know theres a program called site grinder which dosn't require any slicing. I have never used it but I know it it makes the whole process alot simpler.

Post Information

  • Total Posts in this topic: 40 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2016. Ozzu® is a registered trademark of Unmelted, LLC.