9 Replies - 706 Views - Last Post: 29 October 2012 - 05:44 PM

#1 Tenderfoot  Icon User is offline

  • D.I.C Head
  • member icon

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

Photoshop & HTML/CSS

Posted 26 October 2012 - 02:52 AM

Hello people of the HTML forum.

I've never been much good with HTML/CSS and have just recently decided to try to learn it a little bit better. I've been making a website layout and somehow I'm never satisfied with my navigation bar. I also use box-shadow for a couple of elements which I'm given to understand aren't supported in a few versions of certain browsers, which brings me to my question:

Would it be better to make the website layout in photoshop and then cut the images up, and insert them into my divs/layout? And if so, could anyone point me to a decent guide for doing so? Including making buttons/a navbar. I'm hoping that this will do two things at once: 1) Get ma a decent looking navigation bar. 2) Make my website compatible with more browsers.

Is This A Good Question/Topic? 0
  • +

Replies To: Photoshop & HTML/CSS

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: Photoshop & HTML/CSS

Posted 26 October 2012 - 02:57 AM

View PostTenderfoot, on 26 October 2012 - 11:52 AM, said:

Would it be better to make the website layout in photoshop and then cut the images up, and insert them into my divs/layout?

IMHO, no. this requires a) pixel perfection, b) speedy internet connection* (lots of images). and it can have problems in scaling.

besides that, does it matter if certain browsers do not have a drop shadow? how many of those browsers are actually used to visit your site? the keywords here are progressive enhancement and unobtrusive design.



* - note, the provider (i.e. you) pays for increased data traffic

This post has been edited by Dormilich: 26 October 2012 - 02:58 AM
Reason for edit:: I detest automatic emoticons

Was This Post Helpful? 3
  • +
  • -

#3 Tenderfoot  Icon User is offline

  • D.I.C Head
  • member icon

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

Re: Photoshop & HTML/CSS

Posted 26 October 2012 - 03:04 AM

View PostDormilich, on 26 October 2012 - 02:57 AM, said:

View PostTenderfoot, on 26 October 2012 - 11:52 AM, said:

Would it be better to make the website layout in photoshop and then cut the images up, and insert them into my divs/layout?

IMHO, no. this requires a) pixel perfection, B) speedy internet connection* (lots of images). and it can have problems in scaling.


Ahh okay. But things like navbars are generally made in Photoshop right? The layout of the navbar in HTML/CSS but the buttons as images?

View PostDormilich, on 26 October 2012 - 02:57 AM, said:

besides that, does it matter if certain browsers do not have a drop shadow? how many of those browsers are actually used to visit your site? the keywords here are progressive enhancement and unobtrusive design.


Ehh, no, I suppose not. I was thinking there might be several other features that I'd need to fix. But you're right though. I'm assuming that IE6 and IE7 don't support it, and according to some study I read, that's about 9% of the Internet. But the shadow is not absolutely essential, you're right.

View PostDormilich, on 26 October 2012 - 02:57 AM, said:

* - note, the provider (i.e. you) pays for increased data traffic


Very good point.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: Photoshop & HTML/CSS

Posted 26 October 2012 - 03:10 AM

View PostTenderfoot, on 26 October 2012 - 12:04 PM, said:

Ahh okay. But things like navbars are generally made in Photoshop right? The layout of the navbar in HTML/CSS but the buttons as images?

not necessarily. CSS now as a lot of possibilities to generate curves and gradients. only if you need an image pattern, a graphic is a must. often you only need partial images (something < 1 KB).

though Iím not a professional there.
Was This Post Helpful? 1
  • +
  • -

#5 Darky88  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 51
  • Joined: 16-October 12

Re: Photoshop & HTML/CSS

Posted 29 October 2012 - 06:10 AM

Only IE doesn't support Drop Shadow?
Drop Shadow is a concept in CSS3!!!
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: Photoshop & HTML/CSS

Posted 29 October 2012 - 06:25 AM

View PostDarky88, on 29 October 2012 - 03:10 PM, said:

Only IE doesn't support Drop Shadow?

no.


View PostDarky88, on 29 October 2012 - 03:10 PM, said:

Drop Shadow is a concept in CSS3!!!

thatís a very true statement.
Was This Post Helpful? 0
  • +
  • -

#7 Darky88  Icon User is offline

  • D.I.C Head

Reputation: -1
  • View blog
  • Posts: 51
  • Joined: 16-October 12

Re: Photoshop & HTML/CSS

Posted 29 October 2012 - 06:52 AM

View PostDormilich, on 29 October 2012 - 06:55 PM, said:

View PostDarky88, on 29 October 2012 - 03:10 PM, said:

Only IE doesn't support Drop Shadow?

no.


View PostDarky88, on 29 October 2012 - 03:10 PM, said:

Drop Shadow is a concept in CSS3!!!

thatís a very true statement.


I used IE, Firefox, Chrome and Opera in Windows and only IE does not support.
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: Photoshop & HTML/CSS

Posted 29 October 2012 - 07:02 AM

IE 8 is certainly too old for CSS3.
Was This Post Helpful? 0
  • +
  • -

#9 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 218
  • View blog
  • Posts: 1,004
  • Joined: 25-June 12

Re: Photoshop & HTML/CSS

Posted 29 October 2012 - 07:18 AM

Most modern browsers besides IE support CSS3. The only version of IE having any CSS3 support at all is IE 9. This is in part due to CSS3 not yet being standardized. CSS3 is currently still in a developmental stage with some features being added and others looking to be removed, testing is not set to begin until AT LEAST 2014, hoping for a standardization by 2016.

This is not to say do not develop using CSS3 or any words of the sort. Just be sure to keep in mind, if (and as is usually the case) most of your clients or potential visitors are going to be IE users, there is a good chance your site will appear different/strange/horrible to them.

By all means, play with CSS3 and develop with it should it suit your needs, but keep IE in mind, and do some specific styling to keep IE browsers from completely destroying the appearance of your site.
Was This Post Helpful? 0
  • +
  • -

#10 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 782
  • View blog
  • Posts: 1,663
  • Joined: 30-January 09

Re: Photoshop & HTML/CSS

Posted 29 October 2012 - 05:44 PM

View PostDormilich, on 26 October 2012 - 08:10 PM, said:

View PostTenderfoot, on 26 October 2012 - 12:04 PM, said:

Ahh okay. But things like navbars are generally made in Photoshop right? The layout of the navbar in HTML/CSS but the buttons as images?

not necessarily. CSS now as a lot of possibilities to generate curves and gradients. only if you need an image pattern, a graphic is a must. often you only need partial images (something < 1 KB).

though Iím not a professional there.

In modern browsers (and I'll include IE8+ in this list) the only css3 gradient/curve/shadow issue that I'm positive of is that IE8+ doesn't support curved corners and gradient backgrounds at the same time. I believe there may also be an issue with gradients in Opera, BUT, I've only noticed that on my website, so it's probably that I haven't declared the CSS properly.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1