I was just reading through some threads on the forum and people discuss making web pages using Photoshop.

 

By this do people create the website in terms of the whole layout and its elements; banners, pictures, pictures to be used for links, menu bars etc etc all nicley laid out on Photoshop layers then break it down into the individual files to use when creating the site in other software?

 

Is this a common way of designing a site?

Photoshop, and all other image editing software, is for creating and manipulating images not web pages!

 

In essence you're on the right track though - you create all the images used on your site in your image editor then place/include them in your page template or CSS file as appropriate. The most important part, the HTML and CSS, you need to write in a decent HTML editor first.

I agree with ^ but would like to add that GIMP (why pay for photoshop when there is a gimp?) is very useful for creating a layout before tearing it apart and coding by hand.

Be carefull if you are going to use Photoshop like that as I did that for a while and my coding skills started to slip, It was probabbly just me being stupid tho XD

There's been a lot of talk recently about the use of Photoshop for web site mockups, or even for creating a full layout to then slice up and code. It seems to be a way that a LOT of people work, and its certainly the way my company works. Designer designs/mocks up, then I (or someone else!) slices, codes and makes the site actually work.

 

I am not 100% sure what I think about this procedure, as it seems to me that Phototshop really isn't the right tool to be working with for this kind of job as Bluedreamer suggests above. As I currently am not involved in teh design process for my company, its not an issue I have had to worry about, but I have a few personal projects in the works where I will do everything from the design upwards, so this is a very relevant topic for me at the moment.

There's been a lot of talk recently about the use of Photoshop for web site mockups, or even for creating a full layout to then slice up and code. It seems to be a way that a LOT of people work, and its certainly the way my company works. Designer designs/mocks up, then I (or someone else!) slices, codes and makes the site actually work.

 

I am not 100% sure what I think about this procedure, as it seems to me that Phototshop really isn't the right tool to be working with for this kind of job as Bluedreamer suggests above. As I currently am not involved in teh design process for my company, its not an issue I have had to worry about, but I have a few personal projects in the works where I will do everything from the design upwards, so this is a very relevant topic for me at the moment.

 

Hmmm...

 

I should point out that an image editor is still a vital tool in the build process for most web sites. To put some more meat on the bone here (don't ya love those corporate buzz words eh?) there's a lot more to web design than knocking up a design/mockup in an image editor. Left to their own devices, many graphics designers don't have any knowledge of accessibility, usability and how to create graphics for an elastic/flexible page - most of them are only familiar with a "fixed canvas" approach.

 

Has anyone ever tried to teach a graphics designer about repeating background images or how to cope with users adjusting their font sizes - it's a hard job I can tell you!

 

I'm not knocking graphic designers here - indeed I'm often envious of the fantastic stuff they produce - just trying to point out that graphic design is not the same as web design.

I work quite a lot on both sides of the fence, as a designer and as a developer. I used to create the layout and give all the CSS block elements a solid background colour so I knew what was what and then insert images but I've recently changed my method of work.

 

I now create the design in Photoshop or on paper so that I'm limiting myself by my design skills and not my technical prowess (though to be honest I feel confident I could cope with developing most of what I design, without being cocky or arrogant). However as I'm a developer too I do know about accessibility and more importantly I DO keep it in mind while designing websites.

 

As Bluedreamer points out I can imagine it being a hassle trying to explain accessibility and other lesser known web development areas to designers.

I generally work in the opposite way to you cabbage! Your method of creating layout in CSS with background colours as appropriate always allows me to design so the site works with images turned off which is a fairly important accessibility feature.

I generally work in the opposite way to you cabbage! Your method of creating layout in CSS with background colours as appropriate always allows me to design so the site works with images turned off which is a fairly important accessibility feature.

 

I design what I want the vast majority of people to see and then when I'm done with that I tweak for accessibility. To be honest I think both methods are fine but people prefer different things. The worst method I've ever seen is a guy who would just steal a template, change the images and call it his own without changing the underlying HTML or giving a link back to the original.

I thoroughly disagree with the idea of designing the entire website in Photoshop. For me the best start is pen and paper, maybe a ruler

 

The most grievous mistake I think you can make is simply using Photoshop/Fireworks inbuilt website creator. Dont get me wrong, it does a fantastic job of *replicating* the image into a functional site, but code wise it is disgusting - layers upon layers of images and z-indexes beyond belief.

 

Once you have a design planned out in your head, it is nice to be able to see what it might look like on screen - to easily edit colours and small design elements, but thats where other issues are introduced where people get carried away with all the effects.

 

The best way IMO is to always consciously have your design in mind in the context of how you would make it with CSS.

I was also wondering about this topic today and find it really annoying that It seems to be that when competing for work, alot of client look at the work of a graphic designer and somehow think it more worthy/skilled than the work of a good web developer.

 

Often the web developer (with a mind to usability, accessability, ease of updating , code weight etc.) makes the site simpler and 'less flashy' than the designer would, ultimately leading to a vastly superior site. Yet in the eyes of the uneducated (on web design that is) it just looks a bit more plain and boring. They always forget that people acess the web primarily to access information or services, or watch movies or listen to music, most of the time these activities have NOTHING to do with the way a site looks.

 

I'll repeat the sentiments above.... Web design ≠ Graphic Design.

 

Maybe I'm just jealous that my Graphic Design talents aren't as good as I'd like them to be.....

Think about what you are capable of in coding terms, and design a layout with that ability in mind in something like photoshop.

 

For instance, if you know how to repeat a graphic with css, make a graphic in photoshop that will repeat seemlessly and make your nav bars stand out.

 

The thread titles in this forum make use of a repeating blue gradient image. Which will more than likely be 1px in width and around 12px in height.

 

Just a guesstimation.

The most grievous mistake I think you can make is simply using Photoshop/Fireworks inbuilt website creator. Dont get me wrong, it does a fantastic job of *replicating* the image into a functional site, but code wise it is disgusting - layers upon layers of images and z-indexes beyond belief.

NEVER let photoshop create your code! There is nothing wrong with drawing your layout in ps or gimp or whatever, but coding by hand is essential IMO.

In that I agree hand coded CSS is going to produce the best results, I believe that a tool that gets you started or most of the way there can be extremely helpful too. You might want to try http://psd2cssonline.com to get fully compliant CSS/XHTML from your PSD files. It takes only seconds and it's free. You can even get dynamic content like image roll overs, dynamic menus and the like without coding. The generated code has all sorts of comments in it too so you can learn some CSS from it, and/or extend the page to do even more.

I was just reading through some threads on the forum and people discuss making web pages using Photoshop.

 

By this do people create the website in terms of the whole layout and its elements; banners, pictures, pictures to be used for links, menu bars etc etc all nicley laid out on Photoshop layers then break it down into the individual files to use when creating the site in other software?

 

Is this a common way of designing a site?

 

 

please visit www.pixelseffect.blogspot.com and review it please

Concept then Pen/Paper then PS then site for me.

I find that designing the whole layout in photoshop can save a heck of a lot of time. This is because once the design is complete and everything is exactly how it is liked it can be converted to code/images and look the same. I use to use code, then make the images to suite the layout, which meant changing the code and images alot to get it how I liked it (quite time consuming), I prefer my new method much better

@Mesa I do exactly the same But after Photoshop bit I manually slice it and hand code the XHTML & CSS

Same here Peartree

 

 

EDIT: I misunderstood the term slice. That's not what I do.

The most grievous mistake I think you can make is simply using Photoshop/Fireworks inbuilt website creator. Dont get me wrong, it does a fantastic job of *replicating* the image into a functional site, but code wise it is disgusting - layers upon layers of images and z-indexes beyond belief.

 

Ah, that is what I was going to ask, having not yet tried Fireworks myself. I was hoping it would be good for prototyping somewhere between Photoshop and fixing code to make the website functional. But if it's disgusting code-wise - well I guess I'm disappointed, because the time saved by prototyping in it must be lost through cleaning up code. Oh well.

I love using photoshop for designing sites.

 

Before you ask, yes I do code xhtml and css, and I am getting the grasps of semantic code e.t.c and standards /accesiblity.

 

I dont ever use the image slice feature, its just pathetic. I like to work with the rectangular marquee tool and create any images for the design I need to use by hand selection. Its a much easier and less resource intensive method.

 

I must say though, I do think its important to jump from a sketch on graph paper (important for rule of thirds e.t.c), straight into photoshop. Otherwise I find designs become very modular and dull.

 

I think web design is graphic design. Atleast it should be, or websites will be dull. It is possible to have a good grasp of both.

You are right on the money... You make a web design in ps and you cut it into the pieces that you need to put in certain places.

You are right on the money... You make a web design in ps and you cut it into the pieces that you need to put in certain places.

 

 

Just checked out your Blog - lovin the look! you are obviously a dab hand at photoshop!

 

I find PH limiting as im not that knowledgeable at drawing in it - I mainly sketch out on paper and then build it..... this has been fine up to now but I would prefer to be able to supply clients with a swanky PS design to show them as it looks loads more professional and would be loads easier for them to see what I have in my head .

 

 

Anyone got any tips on getting my skills up to scratch so I can achieve this?