Designing sites using Photoshop

  • SB
  • Moderator
  • Genius
  • User avatar
  • Joined: Nov 16, 2004
  • Posts: 8677
  • Loc: Aberdeen, Scotland
  • Status: Offline

Post April 15th, 2008, 7:59 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 15th, 2008, 7:59 am

  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post April 15th, 2008, 8:18 am

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.
phoenix web design
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 15th, 2008, 8:28 am

Definitely not! That's how I do a good chunk of my designs!
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Post April 15th, 2008, 8:45 am

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
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post April 15th, 2008, 9:25 am

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.
The Beer Monocle. Classy.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 15th, 2008, 9:34 am

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
  • Joined: Oct 02, 2007
  • Posts: 575
  • Loc: Phoenix, AZ
  • Status: Offline

Post April 15th, 2008, 10:06 am

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.
phoenix web design
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post April 15th, 2008, 10:42 am

Agreed.
The Beer Monocle. Classy.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 15th, 2008, 10:46 am

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
  • No Avatar
  • Joined: Dec 15, 2007
  • Posts: 375
  • Status: Offline

Post April 15th, 2008, 12:58 pm

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post April 15th, 2008, 1:50 pm

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.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post April 15th, 2008, 2:01 pm

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 :)
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 10, 2004
  • Posts: 2194
  • Loc: Canada
  • Status: Offline

Post April 15th, 2008, 2:18 pm

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
  • Joined: Sep 22, 2003
  • Posts: 6130
  • Loc: Seattle, WA
  • Status: Offline

Post April 15th, 2008, 8:57 pm

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.
The Beer Monocle. Classy.
  • IcyDragoon
  • Student
  • Student
  • No Avatar
  • Joined: Mar 12, 2008
  • Posts: 65
  • Status: Offline

Post April 16th, 2008, 11:15 am

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 16th, 2008, 11:15 am

Post Information

  • Total Posts in this topic: 40 posts
  • Users browsing this forum: No registered users and 103 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.