Designing sites using Photoshop

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8741
  • 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?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • 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: 2194
  • 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: 23456
  • 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
  • User avatar
  • Posts: 6247
  • 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: 2194
  • 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
  • User avatar
  • Posts: 6247
  • Loc: Seattle, WA

Post 3+ Months Ago

Agreed.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • 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: 375

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: 1828
  • 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: 8388
  • 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: 2194
  • 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
  • User avatar
  • Posts: 6247
  • 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: 6893
  • 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: 6893
  • 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: 2194
  • 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: 2194
  • 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: 8388
  • 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: 8388
  • 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: 8388
  • Loc: USA

Post 3+ Months Ago

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

Post 3+ Months Ago

I still use GIFs pretty exclusively for text-based images.
  • musik
  • Legend
  • Super Moderator
  • User avatar
  • Posts: 6893
  • 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: 8388
  • 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
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 40 posts
  • Users browsing this forum: No registered users and 39 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-2014. Ozzu® is a registered trademark of Unmelted, LLC.