Hi,

 

 

I've been playing around with Wordpress templates for some time now learning HTML and CSS, I feel i've learnt as much as I can on these subjects, so where to next? If I want to create really good websites do I really need to learn Photoshop?

 

How do people here get on, do you use free content and mix and match or do you create your own graphics?

Being good in the use of Photoshop is a skill worth having for any web designer.

 

Also learn to use a vector based program such as illustrator.

 

You don't have to use these of course, there are other free software but I don't use them

Oak is definately right. I am pretty good with Photoshop but I have given up with Illustrator for the time being. I will be coming back to learning it at some point.

I haven't designed a website fully in Photoshop in about two years.

 

However, I still think you need to be able to use either Photoshop or something similar, you need to be able to edit images, and all round it's just a great tool to have. Mine is very rarely not running.

I haven't designed a website fully in Photoshop in about two years.

 

However, I still think you need to be able to use either Photoshop or something similar, you need to be able to edit images, and all round it's just a great tool to have. Mine is very rarely not running.

 

Just out of interest what do you use Mike?

I hate photoshop....only because I am constantly using it, both at home and work.

 

Its really quite easy to do the basics, and if your not keen on spending money, Gimp does everything (afaik) photoshop can do.

If it's solely for screen and not for print, try Fireworks

 

There's a very strange situation at the moment where the industry standard is Photoshop, but ironically that isn't the correct program to be using for designing websites - Fireworks is. However, if you want to be involved in the trade, you will have to know Photoshop as everyone "thinks" it's the correct program to use. As a matter of fact, PS is a bit of a clunky nightmare to use for web design, but the graphic designers will keep insisting on using it for some strange reason. Probably because it's what they're "used" to.

 

What gets me is, as web designers/developers, we are expected to constantly adapt and change, and learn new software to keep up, but graphic designers get away with whining on about how they are "used" to PS so they refuse to learn FW because it brings them out of their comfort zone. Then we are left with mostly horrendous PS files being passed on to us from graphic designers which we have to wrestle with (unless they're done correctly which mostly they aren't) - and basically we have to take up the slack. If only they'd learn FW and make that the industry standard for web design, the process would be a lot smoother and more efficient.

 

But - there's no escaping it, if you want to get involved in the trade, you really have to at least know your way round PS as it is the industry standard, and for the time being, we're stuck with that.

Just out of interest what do you use Mike?

 

 

I primarily design "in-browser". That doesn't mean I always start with that, I sometime start with sketches, and some very rough Photoshop work.

 

But I find it really hard to create web designs in Photoshop. It always just ends up looking kinda crappy.

 

It's each to their own. Whether you use Photoshop or design in browser is personal preference, both have their down sides and up sides.

 

A lot of people will quite strongly advocate one or the other but it's not a case of right or wrong.

I primarily design "in-browser".

 

That's usually the best practice.

 

Especially now the styling of websites is moving more and more towards CSS.

 

In fact, I wonder how much benefit there is left (in most cases) of designing a mock-up in photoshop apart from having something to show a client or brainstorming. The days of slicing up PSD's for the web are numbered. Heard one guy say recently:- "When designing for the web, PSD's are files full of empty promises and broken dreams".

 

Still, I couldn't make a finished website at present without at least some use of Photoshop

Edited April 19, 201214 yr by oakleaves

Surely creating a site from sliced Photoshop designs is not going to perform speed wise as well as a site created with CSS?

 

I can use the basics of Photoshop but find it overly complicated and a headache to perform seemingly simple tasks.

Don't learn "Photoshop" but instead learn how to create and manipulate graphics and images that are used as part of web design. Once you have grasped the basics of image manipulation the software you use doesn't matter so much . For instance if you're only creating things like icons PS is very expensive and there are many other more affordable tools that can be used for the task. However, if you're working in the print related field then PS may be worth considering as one of the apps you use.

Really depends on the concept. As someone mentioned earlier many sites are adopting minimal styles that could arguably go straight to css after a mockup/prototype (drawn or otherwise) and a styleguide. If it's fairly rich in graphics that need slicing up, making sprites etc then photoshop/firefox is super handy to know how to use. For most front-end dev pepes just being able to use the marque tool to cut and manipulate then optimize for the web is all that's really required.

 

Often a 'pure' designer who doesn't know any code will pass along a PSD totally unprepared for slicing and you may need to know how to adjust and fix yourself. I'd learn the basics at least.

Surely creating a site from sliced Photoshop designs is not going to perform speed wise as well as a site created with CSS?

 

Exactly.. Two sites that spring to mind that aren't great on that front are this very forum (very image intensive) and 'heart internet' which, incidently, was where the owner of this forum used to work. There are many others of course.

 

The times were a site uses a lot of images should be for when you can't get the tone and warmth with CSS, ie the vintage/ retro style for example, or for something like jackwebdales new site

Edited April 19, 201214 yr by oakleaves

Surely creating a site from sliced Photoshop designs is not going to perform speed wise as well as a site created with CSS?

 

Well yes, but just because you design the concept in a graphics program doesn't then mean that you then slice the design, you can easily then go on and recreate it in css. I design my concepts in photoshop for ease, as clients tend to change their mind and its quicker to mock up a concept and show it to them. It also makes it easier if they decide to come it as you can quickly move things around to show them what they were thinking, where as if you code it first and they come in they have to sit while you recode parts just to show them what they wanted moved around.

 

 

However do I think you need photoshop, no, I learnt on photoshop which is why I use it but almost graphics software would do, Fireworks, GIMP, Paintshop Pro.. Just find something you are comfortable with that has a good range of tools and functions and learn it, it might just be to do the odd graphic or it could be to mock up an entire website, but Photoshop isn't the only option that you have

Exactly.. Two sites that spring to mind that aren't great on that front are this very forum (very image intensive) and 'heart internet' which, incidently, was where the owner of this forum used to work. There are many others of course.

 

The times were a site uses a lot of images should be for when you can't get the tone and warmth with CSS, ie the vintage/ retro style for example, or for something like jackwebdales new site

I gotta disagree on this point.

 

Just because a site may be image intensive, it doesn't make it slow. Whilst I agree generally speaking a full css site compared to a site that uses images, would be faster, but we live in an age where internet speeds are getting faster and faster, thus the speed difference is becoming negligible.

 

Also as great as CSS is, it will always be limited. Graphics i think, will always have a place in web design.

Edited April 19, 201214 yr by jamesosix

Also as great as CSS is, it will always be limited. Graphics i think, will always have a place in web design.

 

Completely. Even if an entire design is created with pure css, basic image editing skills for things like logo's, photo's, icons etc will always be needed. Photoshop/Fireworks are both very easy to get to grips with - get stuck in OP!

I gotta disagree on this point.

 

Just because a site may be image intensive, it doesn't make it slow. Whilst I agree generally speaking a full css site compared to a site that uses images, would be faster, but we live in an age where internet speeds are getting faster and faster, thus the speed difference is becoming negligible.

 

Also as great as CSS is, it will always be limited. Graphics i think, will always have a place in web design.

 

I think you miss my point. A while ago, navigation and buttons and shadows and background repeats were often done using images which was a bit of a hash. Getting nice background gradients was only possible by using sliced images about 2000px tall x 1px wide and then using background image repeat-x in the css. On heart internet site try some of the login forms, all have sliced up images and I suspect the navigation does too. All this can (and should) now be done with CSS3. There is still a fraction of delay waiting which creates an ugly form until the round corner images load and while the internet is undoubtably getting faster this is no excuse for using antiquated techniques.

 

As for graphics always having there place in web design, that was never in dispute. In the right context and places of course.

 

 

Just to illustrate what I mean - go to Heart Internet website using Google chrome. Using the toolbox click on developer tools > resources > images..

 

Look how many images there are for backgrounds all starting 'bg_something_or_other'

Edited April 19, 201214 yr by oakleaves

My thinking on the graphics intensive slower loading speed thing is with google, as far as I am aware google gives priority to quicker loading sites for search rankings, or so I am led to believe. In which case by creating a Photoshop based site, your already damaging your SEO before you've begun.

How does creating a site layout in photoshop (or any graphics software) automatically equals a poorly coded website that is graphic intensive, doesn't use css, loads slow and automatically damage seo?

 

In my opinion it doesn't, you can create the layout in photoshop and THEN code the site using the correct styling methods in css or whatever, just because the site is created in a graphic package doesn't mean the end coded site is going to be a sliced image.

I think people are still, somehow, seriously uneducated on CSS3 techniques. I believe a lot of the time people just make the assumption that they need to use an image for a visual style and it can't be done in CSS - when it can.

 

If you can replicate your Photoshop styles in CSS, that's fine. But a lot of people don't know how to do this properly, they just splice it up and you end up with a very image intensive site that's slow and sluggish to load.

 

I do believe, frankly, the time has come that it's simply unacceptable for a web designer to not know how to code perfect CSS and HTML to the latest standards. If you can do that, then you should be able to take a Photoshop design and code it with very minimal use of images.

 

I'm gonna take one of my own examples, sorry, but it demonstrates my point perfectly: http://michaelgunner.co.uk/modernising-with-css/

 

How many of you, in absolute 100% honesty, if you had designed headers styles like that would have coded them with CSS instead of using a spliced image? I am pretty sure it's zero and I'm not sure I'd believe anyone who says they would.

 

The fact is people are still using images for things they can achieve with CSS, and often these people are those with a Photoshop background. I believe web designers who prefer to design in-browser tend to be a little more clued up on speed, optimisation, CSS3 techniques etc.

Edited April 19, 201214 yr by brightonmike

I totally agree with you mike, i never use photoshop, all CSS3 my aim is to become a back end developer so I was put off by all the psd to html tutorials, CSS3 is amazing for achieving simple yet effective sites, i think i should look at illustrator tho instead of using other people's icons

Edited April 19, 201214 yr by JoshUK

Using images is a funny thing. If you still want to use a big vertical strip for your background, it's not usually a problem - look at the size of the .gif, it'll only be about 500 bytes or so, if that.

 

I don't believe there's anything wrong with using "graphics" on a site, as mostly they end up as .gifs/jpgs that only have a few colours in them - you can get away with all kinds of stuff.

 

The problem comes when adding actual photographic pictures to the site - this is where it can all slow down as if they're not optimised, they're massively bigger than any "graphic".

 

So long as you do your graphics/backgrounds/buttons whatever in proper sprites and optimised properly they shouldn't be a problem. Just watch out for actual pictures.

If you can replicate your Photoshop styles in CSS, that's fine. But a lot of people don't know how to do this properly, they just splice it up and you end up with a very image intensive site that's slow and sluggish to load.

 

To be fair a lot of the time I think it's to do with the way they slice it up as well. They don't think to take a 1px strip and repeat it, they just take the whole lot, out of laziness.

Using images is a funny thing. If you still want to use a big vertical strip for your background, it's not usually a problem - look at the size of the .gif, it'll only be about 500 bytes or so, if that.

 

 

That's very true. In fact it may be best to still do this for cross-browser compatibility. That's probably why people are still using older techniques for some things..

 

I guess it's getting the right balance based on the current state of the internet

 

I think where it's going too far the other way with CSS3 is with stuff like this:-

 

https://developer.mozilla.org/en-US/demos/detail/pure-css3-classic-train/launch

 

(But that of course is just my opinion)

Edited April 20, 201214 yr by oakleaves

 

https://developer.mozilla.org/en-US/demos/detail/pure-css3-classic-train/launch

 

 

Haha, that's silly. Looks like a mario train in ie7

Haha, that's silly. Looks like a mario train in ie7

 

I know - nearly as bad as the CSS twitter fail whale!

 

The other thing with main images being created with CSS is the lack of depth and warmth, not to mention the ridiculous coding.

 

That's where it's time to use Photoshop or another such program (in my opinion).

I'm wondering where Fireworks comes into this. See, if I was able to set up a HTML grid in Photoshop, and be able to give elements exact pixel dimensions, I might be more inclined to use it. It's this whole blank canvas thing that doesn't work for me, neither the whole splicing process.

I use Photoshop, Illustrator, GIMP, and Inkscape to create my web graphics. I've never really gotten on with Fireworks, IIH. With the Ps CS6 beta on the loose, I see no better time to get involved with Photoshop!

I'm wondering where Fireworks comes into this. See, if I was able to set up a HTML grid in Photoshop, and be able to give elements exact pixel dimensions, I might be more inclined to use it. It's this whole blank canvas thing that doesn't work for me, neither the whole splicing process.

 

Fireworks was supposed to be the right tool for the job. For some reason everyone jumped onto Photoshop as the industry standard - I have a feeling that its because a lot of the original 'Web Designers' were converted print designers wanting the the fluffy arty paint tools in Photoshop, and the big divide between designers and developers where designers didn't expect to have to slice up designs.

 

Since then Photoshop has included a lot of the fireworks features.

I think people are still, somehow, seriously uneducated on CSS3 techniques. I believe a lot of the time people just make the assumption that they need to use an image for a visual style and it can't be done in CSS - when it can.

 

If you can replicate your Photoshop styles in CSS, that's fine. But a lot of people don't know how to do this properly, they just splice it up and you end up with a very image intensive site that's slow and sluggish to load...

 

This.

 

I still work in Photoshop. I feel more comfortable than I do in any of the other options available, despite using Fireworks, Illustrator and In Design on a regular basis.

 

However, You can replicate just about every single layer style in CSS3 with pretty solid browser compatibility. So, my process is to design a mockup in Photoshop, slice out things like icons or logos that I'm not going to use a CSS3 or webfont for and then build everything else with CSS3. With icon fonts being more common, the only thing you'd need an image for is a company logo or things along those lines.

 

To answer the OP: Do you need to know how to use Photoshop? If you're a freelancer, probably not. There are alternatives that are cheaper that work just fine. However, if you want to work for an agency you need to at least be competent with Photoshop. Even if you never use it yourself, you'll be working on things other people have started in Photoshop now and then, so you'll need to be comfortable using it in that capacity. And, it's really the best option for working with photography (yay for non-destructive editing!), so it's a good tool to understand.

If its a personal project I go straight to notepad++ and just use photoshop when I need an image.

 

I only use photoshop to nock up mock ups for clients.

The other thing with main images being created with CSS is the lack of depth and warmth, not to mention the ridiculous coding.

 

That's where it's time to use Photoshop or another such program (in my opinion).

 

Yeah I don't quite agree with people when they say "the same effect can be achieved using css" - sometimes admittedly it can, but a lot of the time it seems to just fall short of replicating the "polish" you can get with a good tiny gif created in a graphics program. It doesn't do badly though. It has a good try.

 

I'm wondering where Fireworks comes into this. See, if I was able to set up a HTML grid in Photoshop, and be able to give elements exact pixel dimensions, I might be more inclined to use it. It's this whole blank canvas thing that doesn't work for me, neither the whole splicing process.

 

Not quite sure what you mean by this, did you mean "if I was able to set up a HTML grid like in photoshop etc." ?

 

You can certainly give elements exact dimensions in fireworks. I'm not sure whether you're saying FW can't do this or PS can't do this...

 

"Where Fireworks comes into this" - well in my experience the main thing now is the "Pages" system in FW where you can link all your pages to a master page to share any common elements. Also we have "styles" which I hear on the grapevine might be incorporated into photoshop.

Also, seemingly better control over the bread and butter graphic symbol effects like gradients etc.

Another thing I find way better than Photoshop is the object selection system - a border appears around the object you are going to select as you hover over it. I know PS has "auto select layer" but if there's anything in front or behind it, even if that layer's switched off, I find you end up on totally the wrong layer and in a bit of a mess.

Then there's the speed of object properties adjustment.... bang bang and there it is.

Then there's the shape manipulation system, very intuitive, adjustment of radius of rounded rectangles being the most obvious example. Then you have auto shapes, which I believe photoshop has as well, but the FW system remains more complete in this respect currently I think.

 

Personally I actually still use PS most of the time, as I keep getting crappily put together graphics files to code from a designer that htey use PS for so I stick to using PS for them. However it often has me ripping my hair out as I end up in a spaghetti mess of layers trying to find what I want.

 

To be fair though, this would be greatly improved if these designers could only get up off their arse and prepare the files properly for development. But a lot of them I think just don't get it, not being front end developers.

What we need as developers in a photoshop file is to hit "auto select layer" - have that take us to the layer, be able to hit control + layer thumbnail and bang - there's your object. Unfortunately it never quite works out like this. However in FW this is a lot easier (the object selection thing).

 

I tend to use FW for projects I'm designing and use Photoshop for any photo manipulation I need (which is rare).

 

Oh also I think the text rendering is better in Photoshop to be fair, but seeing as most of this will end up as html, it doesn't quite seem as important to me.

 

I'm still more "used" to Photoshop, but Fireworks wins outright in the web design department for me, hands down. I'm still learning it though.

Edited April 20, 201214 yr by Gibson

Hi Freedom:

 

Well, I was a "paint" person at first. It was quick, and easy to resize. But, now I'm taking pics, adding, stretching, this and that.

 

Yes, you will end up using Photoshop. There is no doubt about it.

 

Sometimes I will find the craziest picture on google pic, and add a great slogan to it. Photoshop makes this so easy to do. Other tools as magic erase come to mind, as well.

 

I mostly use 'paint' just to simply resize real quick if necessary now.

 

And while some here can really hammer out things with css, I'm already burdened down with work. I don't know if I would stretch my time for it.

 

Plus, I agree with the 'warmth' theory written shortly before. Photoshop does add that.

 

Take care...

 

OB

Sometimes I will find the craziest picture on google pic, and add a great slogan to it.

 

You sound like a definite lolcats fan

i use a program called gimp. Completely free download.. and i find it functions better then photoshop ( maybe because i know how to use gimp and not photoshop lol ) and i always use a program called corel but im not sure if that's free i cant remember.

i use a program called gimp. Completely free download.. and i find it functions better then photoshop ( maybe because i know how to use gimp and not photoshop lol ) and i always use a program called corel but im not sure if that's free i cant remember.

 

I'm very comfortable with Illustrator, but Illustrator is slow for designing vector graphics, although I can design in Illustrator. Would you recommend Fw over Illustrator for speed ? I'm thinking about keeping Illustrator but using it as a companion program for high detailed vector graphics that would be used for print and using Fw as my primary app, any opinions ? I'm going to give the demo a try see how I feel with the U.I within the first :20 minutes