13 Replies - 4635 Views - Last Post: 24 January 2013 - 05:36 AM

#1 Tenderfoot  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 160
  • Joined: 21-March 12

Photoshop's role in web design

Posted 19 December 2012 - 06:53 PM

Hello all.

I'm debating on whether or not to buy "Photoshop CS6 Unleashed" in order to learn PS for web design. However I'm having some doubts. I'm interested to hear what you think of photoshop's role in web design. If the website is full of images, then that means that it'll make people download more, so that's more bandwidth, and the website would take longer to load. But what I'm wondering is, by how much?

The book I'm thinking about purchasing covers making a background, a button, and some other things. And then in the end she (the author) covers making a whole web design in photoshop. I've heard that's really not the way to go. But the occasional button and a background, is that something that would really count when considering the time it takes for the site to load, and the bandwidth?

Is This A Good Question/Topic? 0
  • +

Replies To: Photoshop's role in web design

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9363
  • View blog
  • Posts: 35,172
  • Joined: 12-June 08

Re: Photoshop's role in web design

Posted 19 December 2012 - 06:57 PM

So like this?

http://www.noupe.com...sion-73513.html
Was This Post Helpful? 1
  • +
  • -

#3 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Photoshop's role in web design

Posted 19 December 2012 - 09:03 PM

Is Photoshop worth the cost for one site that you're doing, maybe not. If you are looking at becoming a professional web developer then yes it is a great investment. Almost all professional graphic designers utilize Photoshop at some point so it is a very valuable skill to add to your repertoire.
Was This Post Helpful? 1
  • +
  • -

#4 Tenderfoot  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 160
  • Joined: 21-March 12

Re: Photoshop's role in web design

Posted 20 December 2012 - 09:35 AM

View Postmodi123_1, on 19 December 2012 - 06:57 PM, said:



Exactly like this. The overall "smooth" look on these websites looks familiar to me, so I assume it's used a fair bit. I'm still wondering how it will affect the speed of the site though.

View Postgregwhitworth, on 19 December 2012 - 09:03 PM, said:

Is Photoshop worth the cost for one site that you're doing, maybe not. If you are looking at becoming a professional web developer then yes it is a great investment. Almost all professional graphic designers utilize Photoshop at some point so it is a very valuable skill to add to your repertoire.


Yeah, that is one downside, it's quite expensive. On adobe's site I noticed that they're offering a month-to-month (or annual) subscription though. So I guess month-to-month might be something for me as I'm not willing to cough up 700 dollars just like that. I ended up deciding to buy this book though, and perhaps, in theory, one could learn using a pirated edition before deciding whether or not it's worth a purchase or if it's something one can/will use professionally. I am looking to become a professional developer, though design has never been my strong suite.

I'm curious though, would you say it's a no-no when making a website that needs to be fast? I.e. one with a lot of user interaction with the site/database and some traffic?
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9363
  • View blog
  • Posts: 35,172
  • Joined: 12-June 08

Re: Photoshop's role in web design

Posted 20 December 2012 - 09:38 AM

Quote

Exactly like this. The overall "smooth" look on these websites looks familiar to me, so I assume it's used a fair bit. I'm still wondering how it will affect the speed of the site though.


Did you flip through any of the tutorials? Phothoshop is good for getting the layers laid out and slicing up images (if you need to).. their compression is something fierce on a slice and you can typically get things down to single digits in terms of kb. As for the layout though - that's still on your shoulders for the CSS and what not. PS provides a framework when you slice things up, but for the most part it isn't much.
Was This Post Helpful? 2
  • +
  • -

#6 Tenderfoot  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 160
  • Joined: 21-March 12

Re: Photoshop's role in web design

Posted 20 December 2012 - 09:46 AM

View Postmodi123_1, on 20 December 2012 - 09:38 AM, said:

Quote

Exactly like this. The overall "smooth" look on these websites looks familiar to me, so I assume it's used a fair bit. I'm still wondering how it will affect the speed of the site though.


Did you flip through any of the tutorials? Phothoshop is good for getting the layers laid out and slicing up images (if you need to).. their compression is something fierce on a slice and you can typically get things down to single digits in terms of kb. As for the layout though - that's still on your shoulders for the CSS and what not. PS provides a framework when you slice things up, but for the most part it isn't much.


Ahh, okay, I'll definitely look into this then. I glanced at the overview of each tut. I'm not going into this in-depth at the moment, I was merely wondering whether or not this would be worth a purchase, I intend to go through it at a later date. I'm currently focusing on PHP/MySQL, after which I'm going to try to get better at CSS (and now PS). Thanks again for your help.
Was This Post Helpful? 0
  • +
  • -

#7 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9363
  • View blog
  • Posts: 35,172
  • Joined: 12-June 08

Re: Photoshop's role in web design

Posted 20 December 2012 - 09:53 AM

Honestly - you can get the majority of the layout use for photoshop in gimp or paint.net. Something that uses layers.. but the real magic is in the CSS you need to learn to position things. PS is some automagical tool to make amazing sites.. it's just helps with the graphic object part. Just like Dreamweaver isn't some end-all-be-all of css. ;)
Was This Post Helpful? 3
  • +
  • -

#8 Tenderfoot  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 11
  • View blog
  • Posts: 160
  • Joined: 21-March 12

Re: Photoshop's role in web design

Posted 20 December 2012 - 10:13 AM

View Postmodi123_1, on 20 December 2012 - 09:53 AM, said:

Honestly - you can get the majority of the layout use for photoshop in gimp or paint.net. Something that uses layers.. but the real magic is in the CSS you need to learn to position things. PS is some automagical tool to make amazing sites.. it's just helps with the graphic object part. Just like Dreamweaver isn't some end-all-be-all of css. ;)/>


I've heard good things about paint.net, though I can't recall where. It certainly would be a lot easier on my consistently-empty wallet. I wonder though, it wouldn't do me no harm learning how to work things out with PS? What I mean is, the skills I'd acquire there could probably be applied with a similar program (like gimp or paint.net)?

And now that you bring it up, I've always been a little curious about dreamweaver. I've been wondering whether it would be beneficial to say, position things randomly with that program and see how the CSS comes out. I've heard it tends to poop out excessive code all around - which wouldn't be all that helpful. I do intend to strengthen my CSS though; I'm quite familiar with most of the general syntax, and how it should work (in theory). I'm just no good at piecing it together.
Was This Post Helpful? 0
  • +
  • -

#9 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: Photoshop's role in web design

Posted 20 December 2012 - 10:31 AM

Hello Tenderfoot. Most of what has been said has been really great advice. I will say that while GIMP and Paint.net are great alternatives, they definitely are no where near taking the #1 spot away from PS. Once you really dive into PS and see how intuitive it is, you'll understand why it is the main program used by professionals. You won't go back. And honestly, if you get a job interview for a design position in the career world, they will want to hear you say that you use PS and know the ins and outs of it, not a knockoff.

Stay away from dreamweaver. I am by no means one who jumps on the hater bandwagon when others start bashing something(specifically IE lol), but DW is just a waste. I can write the CSS code a lot faster and manipulate it exactly how I want without the verbosity. Save your money there, seriously! CSS will be one of the easiest things to pick up next to HTML and you'll learn it in no time.
Was This Post Helpful? 0
  • +
  • -

#10 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9363
  • View blog
  • Posts: 35,172
  • Joined: 12-June 08

Re: Photoshop's role in web design

Posted 20 December 2012 - 10:45 AM

Quote

it wouldn't do me no harm learning how to work things out with PS? What I mean is, the skills I'd acquire there could probably be applied with a similar program (like gimp or paint.net)?


True.. but again it's the cost ratio, right?


Quote

I've always been a little curious about dreamweaver. I've been wondering whether it would be beneficial to say, position things randomly with that program and see how the CSS comes out.

Sure.. but again if you want to position things randomly a spiral notebook, a pen, and some shears would do as well. Heck - maybe even splurge on a stencil kit.

http://www.uistencil...ite-stencil-kit

because....

Quote

I've heard it tends to poop out excessive code all around - which wouldn't be all that helpful

This is the reason.


@ijet - ha.. too true.. that's why I ditched dreamweaver for MSWord and Frontpage! :D
Was This Post Helpful? 0
  • +
  • -

#11 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Photoshop's role in web design

Posted 20 December 2012 - 02:58 PM

Quote

I'm curious though, would you say it's a no-no when making a website that needs to be fast? I.e. one with a lot of user interaction with the site/database and some traffic?


Photoshop has nothing to do with the end speed of the site, that's all up to you and how you design it, you can put boxes and stuff in there that never have to be exported as you can create a lot of graphical elements with plane CSS, especially these days with CSS3. Most of the time anymore I'll only have a couple of images that are for the theme and that will all depend on the demographic of users (ie: if it were for a more technical demographic I would mainly use CSS3, but if I need to support older browsers I'll use images for gradients, etc).

I think that the monthly subscription plan is a great start, and they also offer education rates as well (not sure if you're in school or not). As far as code, I would stay away from Dreamweaver, it works fine but it is so bloated since it has all of the design view and site management, etc; not to mention the cost. You can easily try out Sublime Text 2 (one of the best code editors out there right now) and purchase it when you get a chance.

Good luck!
Was This Post Helpful? 0
  • +
  • -

#12 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9363
  • View blog
  • Posts: 35,172
  • Joined: 12-June 08

Re: Photoshop's role in web design

Posted 31 December 2012 - 11:59 AM

@OP - a follow up.. you may want to eye ball this video tutorial when you have a chance.

How to Work With Slices in Photoshop
Was This Post Helpful? 0
  • +
  • -

#13 fiddydips  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 20
  • Joined: 02-January 13

Re: Photoshop's role in web design

Posted 02 January 2013 - 09:52 PM

$270 and I'd be a happy customer. I tried to buy it until I came across the $1000+ price tag for the lastest version of photoshop. No deal this time :(
Was This Post Helpful? 0
  • +
  • -

#14 jayanta1  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 23-January 13

Re: Photoshop's role in web design

Posted 24 January 2013 - 05:36 AM

Photoshop was designed to be used for image manipulation. It was not designed to create effective pixel-precise layouts for computer screens, or to make quick changes to screen layouts. Photoshop tends to be used for this purpose however, because users are familiar with the program, and are not aware that Fireworks was designed for this specific purpose.

Users generally try to compare Fireworks with Photoshop. Of course you can do a lot of things you can do in Fireworks somehow in Photoshop. It is also possible to do the same tasks in Design as you can do in Photoshop, but is this effective and efficient way to work? In the case of In Design (layout for print), every designer knows it would be extremely inefficient to layout a magazine in Photoshop. Why is this different for Fireworks (layout for screen)? This is not an efficient way to work, however users tend to think that way.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1