Hi Guys,

 

I've been coding in HTML and CSS for a number of years now and PHP since last year. I've always used either notepad or notepad++ and just hand coded everything & it's improved my skills tenfold.

 

I've seen a lot about people using Photoshop and was wondering what the benefits are and how people use Photoshop for their web development?

 

Any input would be great.

 

Thanks,

Marc

Photoshop is like 'Microsoft Front Page' basically it allows users to drag and drop elements in there as it is a WYSIWYG editor. The code is generated automatically but can be filled with numerous errors and cause many issues when you upload it to the web.

 

I use it to help create with HTML emails as it is easier to keep them in check with this, however I hand code them all it is just good to see where the elements are etc

Photoshop is like 'Microsoft Front Page' basically it allows users to drag and drop elements in there as it is a WYSIWYG editor. The code is generated automatically but can be filled with numerous errors and cause many issues when you upload it to the web.

 

I use it to help create with HTML emails as it is easier to keep them in check with this, however I hand code them all it is just good to see where the elements are etc

 

At first that made me think I have never heard of people using Photoshop for development, but then I remembered Photoshop (and Illustrator) has actually an option to slice and save as code. The code generated is awful, needless to say, as far as I remember years ago I made some experiments, and the code was a table consisting of absolutely positioned elements and images :D

 

I can check what code Photoshop CS6 produces, hope it's a bit better than CS4 (that's what I tried it on).

 

I personally use Photoshop to design the site fist - I cannot build a site straight in the browser.

Edited August 14, 201312 yr by teodora

Thanks both of you for your replies first of all

 

At first that made me think I have never heard of people using Photoshop for development, but then I remembered Photoshop (and Illustrator) has actually an option to slice and save as code. The code generated is awful, needless to say, as far as I remember years ago I made some experiments, and the code was a table consisting of absolutely positioned elements and images :D

 

I can check what code Photoshop CS6 produces, hope it's a bit better than CS4 (that's what I tried it on).

 

I personally use Photoshop to design the site fist - I cannot build a site straight in the browser.

 

Second Teodora, do you basically just use this for mockups?

 

What do you do with the design after this? Do you then code it by hand?

Photoshop is used by many designers to create an image of how they want the site to look like.

 

If they are worth their salt then they should save it as PSD which allows you to dip in and pull the right images from it to use on the site rather than slice the PSD up and use these slices as the site.

 

I work with PSDs from clients and they use the layers so it is easy to pull the images for the site and use the image as a reference as to what the client wants.

 

If you are thinking of using Photoshop to help you I would suggest a pen and paper sketch and then transfer it into Photoshop and work from there.

 

If you are looking at building a site using an Adobe product it would be Dreamweaver although I personally don't use it for sites.

Photoshop is used by many designers to create an image of how they want the site to look like.

 

If they are worth their salt then they should save it as PSD which allows you to dip in and pull the right images from it to use on the site rather than slice the PSD up and use these slices as the site.

 

I work with PSDs from clients and they use the layers so it is easy to pull the images for the site and use the image as a reference as to what the client wants.

 

If you are thinking of using Photoshop to help you I would suggest a pen and paper sketch and then transfer it into Photoshop and work from there.

 

If you are looking at building a site using an Adobe product it would be Dreamweaver although I personally don't use it for sites.

Hi Junior,

 

Thanks for your reply once again. I'm more than happy hand coding a site, its no so much that I want to use an adobe product I was just wondering why Photoshop gets mentioned quite a lot when you ask web designers what they use. Obviously i'm aware that its down to personal taste I was just wondering how it can be used to aid with design or how it aids design I suppose.

 

Basically how do you use Photoshop in a full scenario example. Just for mockup, for complete design etc

 

On a side note I've used dreamweaver before and have taken a serious dislike to it, I prefer coding straight in notepad++ that way I get the code I want in the structure I want first time.

 

Marc

I'm more than happy hand coding a site, its no so much that I want to use an adobe product I was just wondering why Photoshop gets mentioned quite a lot when you ask web designers what they use. Obviously i'm aware that its down to personal taste I was just wondering how it can be used to aid with design or how it aids design I suppose.

 

Basically how do you use Photoshop in a full scenario example. Just for mockup, for complete design etc

 

On a side note I've used dreamweaver before and have taken a serious dislike to it, I prefer coding straight in notepad++ that way I get the code I want in the structure I want first time.

 

Marc

 

To be honest, I thought designing a layout in Photoshop and then slicing it up into pieces of a website was redundant practice a long time ago. Any Photoshop design would be a terrifically inaccurate depiction of what the site would really look like, never mind the fact that you're dealing solely with imagery and CSS3 is starting to take over as the predominant means of styling.

 

On a personal note, in the past I used Photoshop to design my sites, then when I became more competent with coding I would ditch the middleman (Photoshop) and just jump straight into coding the site, then design it later. After all, structure comes first, then design/style. Nowadays, when designing any site, whether it's for myself or one of my clients, I open up my coding editor, "design" my layout with the relevant HTML attributes and then style it as I please along the way. This is a much more fluid means of web design in my estimation, rather than complying to a static template created previously in Photoshop, incredibly restrictive. Now, I use Photoshop to design my logos, buttons and discover good colour combinations. That's it.

Thanks both of you for your replies first of all

 

 

Second Teodora, do you basically just use this for mockups?

 

What do you do with the design after this? Do you then code it by hand?

 

Yes, I use Photoshop for mock-ups, after that, I just re-create the design with CSS/HTML - no slicing

Everyone works differently, you need to find what's the easiest way for you.

i prefer fireoworks for web graphics generally and layouts - easier to work with when it combines the best bits of illi and PS. each to their own

 

btw i know there's a lot of text editors out there but have yoy tried sublime text? it's not free but you can try it for free...

I also don't use photoshop to design in any more. I just grab a pen and paper initially then design in my code editor.

 

Once a mockup is made I can play around with different colours and styles easily using the chrome developer tools.

 

The biggest reason I don't use photoshop much is that you can't really give an accurate representation of a responsive design. That and I can often find it faster to create mockups in my code editor.

Thanks for all of your input everyone. Cleared any speculation i had.

 

I just code mockups and then like someone said mess around with the CSS and then split it into files when the time comes to integrate a CMS if ones required.

 

And i of course do pencil and paper drawings first, speeds up the coding process tenfold. Its quite suprising really how much faster you can work when you have these infront of you.

 

Thanks again,

Marc

http://balsamiq.com/ (paid) and https://moqups.com (free/paid) have saved me a lot of time in the past. I'm pretty bad at drawing by hand, and tools like Photoshop seem so bloated for making a mock-up. I bring together a ridiculously quick wireframe in Balsamiq until I'm happy with the layout, then bring in images/logos etc that have been produced in Photoshop or similar. It then takes no time at all to produce the HTML and CSS with the mock-up details and dimensions to refer to!

Hy Dear,

 

I'm using because i love PS i have 4 years exp.I can to make what i want with PS.!!

I use Photoshop to design the site, layout, colours, textures etc before I code the site, I cannot design something 'off the cuff', I need to know what the final project is going to look like before I can code it. This is just a personal opinion but I think designing in the browser would take longer (for me). But I guess it's about what is the best way to do things for you.

 

To be honest, I thought designing a layout in Photoshop and then slicing it up into pieces of a website was redundant practice a long time ago. Any Photoshop design would be a terrifically inaccurate depiction of what the site would really look like, never mind the fact that you're dealing solely with imagery and CSS3 is starting to take over as the predominant means of styling.

 

On a personal note, in the past I used Photoshop to design my sites, then when I became more competent with coding I would ditch the middleman (Photoshop) and just jump straight into coding the site, then design it later. After all, structure comes first, then design/style. Nowadays, when designing any site, whether it's for myself or one of my clients, I open up my coding editor, "design" my layout with the relevant HTML attributes and then style it as I please along the way. This is a much more fluid means of web design in my estimation, rather than complying to a static template created previously in Photoshop, incredibly restrictive. Now, I use Photoshop to design my logos, buttons and discover good colour combinations. That's it.

 

Photoshop to design logos? :0 The graphic designer in me squirms at that, logos should always be designed in a vector program, Illustrator (or equivalent).

 

I also use Photoshop for what it was designed for, to edit photographs

Edited August 20, 201312 yr by StephenOC

I think PhotoShop color overlay effect is a great tool to quickly try diferent color schemes if you have a mock-up in multiple layers.

Slicing up psd files for web depends a lot on the design. If you need to do some sort of "grunge" design with dirt-textures, grafitti elements ect. a good image editor like PS is essential. But if you are working with flat minimalistic designs you can (and should) do most of the graphic effects with modern css. And you should never use html/css generated by Photoshop/illustrator/fireworks.

To be honest, I thought designing a layout in Photoshop and then slicing it up into pieces of a website was redundant practice a long time ago. Any Photoshop design would be a terrifically inaccurate depiction of what the site would really look like, never mind the fact that you're dealing solely with imagery and CSS3 is starting to take over as the predominant means of styling.

 

It's been that way for years, and there are a lot of old school designers who have never used an image editor during the design process - only using one to create images that are required for the layout (eg the decoration). Photoshop has never been a true web design tool, rather a graphics design tool, and it's use in "web design" originates back to when print designers were moving over to the web and they bought the only tool they could use with them.

 

When you go back to pre 2000 most web designers used programs like PaintshopPro and PhotoImpact for web image creation and manipulation, both these supported things like .jpg handling, .gif transparecies, and image optimisation long before Adobe got round it it.

After reading everyone's replies its cleared the question up for me.

 

I've seen a lot of stuff (articles/videos) about slicing and when I saw it didn't think it looked great to be honest. Looks like using this method you end up with a graphic heavy site. I started designing when it was only dial-up available for an internet connection (at a very young age) but have only just got the confidence to start developing as a profession, back then it wouldn't have been great to have a graphic heavy site, maybe it wouldn't matter as much today though but everything seems to be moving into CCS3, patterns etc. were never possible back then.

 

I don't think I could justify the cost of Photoshop for just mockups.

 

Thanks again

After reading everyone's replies its cleared the question up for me.

 

I've seen a lot of stuff (articles/videos) about slicing and when I saw it didn't think it looked great to be honest. Looks like using this method you end up with a graphic heavy site. I started designing when it was only dial-up available for an internet connection (at a very young age) but have only just got the confidence to start developing as a profession, back then it wouldn't have been great to have a graphic heavy site, maybe it wouldn't matter as much today though but everything seems to be moving into CCS3, patterns etc. were never possible back then.

 

I don't think I could justify the cost of Photoshop for just mockups.

 

Thanks again

I'd say it still matters today. A lot of users today is on slow mobile connections. So unless you are designing for desktop only a fast loading site is always a top priority

Edited August 24, 201312 yr by Nillervision

I admire people who use Notepad or Notepad ++ to create a website/webpage, it is really difficult.

 

Photoshop is a must-have web designing tool, I think. You cannot use it to design a graphic for your website but also you can use it to design the layout of your website or webpage. In this way, you can intuitively view your website's layout. However, since you can create a website using Notepad, I think you are professional enough not to use Photoshop.

I admire people who use Notepad or Notepad ++ to create a website/webpage, it is really difficult.

 

Photoshop is a must-have web designing tool, I think. You cannot use it to design a graphic for your website but also you can use it to design the layout of your website or webpage. In this way, you can intuitively view your website's layout. However, since you can create a website using Notepad, I think you are professional enough not to use Photoshop.

 

Design work is often taken out of Photoshop and coded by hand, could be in Notepad, or another text editor. Really there is no difference in coding in Notepad to something like Sublime Text 2, accept your bound to make more mistakes with the lack of syntax highlighting and the lack of snippets, plugins and shortcuts, this will eventually slow your workflow down.

 

Also, Photoshop is used by a tonne of professionals in all sort of industries, and Notepad doesn't really come into designing at all, unless your designing in the browser. I think you're getting a tad confused.

I admire people who use Notepad or Notepad ++ to create a website/webpage, it is really difficult.

 

Actually, compared to creating a website in Photoshop and slicing it up like in the good ol' days... it really isn't difficult at all after you've had practise.. It's actually rather easy.

By using photoshop we have more advantages to more environments.

We can design website layout, Photo editing, graphics designs and meny more is there.

 

PSD to HTML converting means, first we have to design a photoshop format
layout for template and using this template convert html development.
We can take off images from this layout design.

 

http://extreemwebsitedesign.blogspot.in/

PSD to HTML converting means, first we have to design a photoshop format

layout for template and using this template convert html development.

We can take off images from this layout design.

http://extreemwebsitedesign.blogspot.in/

To the people that design straight into their editors. How does it work if the client doesn't like what you've done and wants a complete redesign? You effectively have to build 2 sites?

I use Photoshop because in my opinion the community is larger and people are making really cool tools and extensions that make our work more efficient.

 

There's a blog I stumbled on today that covers a tool for Photoshop that's pretty cool.

 

http://leightonrodney.me/the-chuck-norris-backpack-speed-up-your-workflow

 

It's only part one in a series, don't know when the rest is coming out.

 

 

I use Photoshop because in my opinion the community is larger and people are making really cool tools and extensions that make our work more efficient.

 

There's a blog I stumbled on today that covers a tool for Photoshop that's pretty cool.

 

http://leightonrodney.me/the-chuck-norris-backpack-speed-up-your-workflow

 

It's only part one in a series, don't know when the rest is coming out.

 

 

I use Photoshop because in my opinion the community is larger and
people are making really cool tools and extensions that make our work
more efficient.

 

There's a blog I stumbled on today that covers a tool for Photoshop that's pretty cool.

 

http://leightonrodney.me/the-chuck-norris-backpack-speed-up-your-workflow

 

It's only part one in a series, don't know when the rest is coming out.