Graphics in Web pages

[Nick]

Hello,

I wanted to know if anybody has any good suggestions of any books
or other resources that could teach me how to make good Web graphics
and how to use them in HTML to make Web pages look good.

When I say graphics, I mean GIFs and not any flash or anything like
that.

I am a PHP programmer and I know how to use HTML and CSS well, but
I am horrible at making buttons, background images, logos etc. and
I really don't know how to implement images into HTML to help make
the Web page look good. Not only do I need to learn how to make the
images but also how to put them into the HTML -- how it all works
together well.

Does anybody know of which software to use and good books that have
good examples and so on?

Please help, using graphics in my Web pages to make them look good
is my missing ingredient.

Thanks,
Nick

 

[NOXwebmasterx]

Not only do I need to learn how to make the
images but also how to put them into the HTML -- how it all works
together well.

http://www.mbstevens.com/howtothumb
might be helpful.  Do searches at w3.org
for 'img' 'png' 'jpg' and 'gif'.  
Do the same at alistapart.com.
 

Does anybody know of which software to use and good books that have
good examples and so on?

Download the Gimp; also download documentation for it.
Takes a few hours of experimenting to get up to speed.
The time spent will be well worth the trouble.  
For <em>webpages</em> it's as powerful as photoshop.
Don't settle for one of the less powerful packages just because
it might not require several hours of study.  Be sure to get
Gimp 2, the newest version.
mbstevens      

 

[Roy Schestowitz]

Hello,

I wanted to know if anybody has any good suggestions of any books
or other resources that could teach me how to make good Web graphics
and how to use them in HTML to make Web pages look good.

When I say graphics, I mean GIFs and not any flash or anything like
that.

I am a PHP programmer and I know how to use HTML and CSS well, but
I am horrible at making buttons, background images, logos etc. and
I really don't know how to implement images into HTML to help make
the Web page look good. Not only do I need to learn how to make the
images but also how to put them into the HTML -- how it all works
together well.

Does anybody know of which software to use and good books that have
good examples and so on?

Please help, using graphics in my Web pages to make them look good
is my missing ingredient.

To be absolutely honest (and not just lazy), you needn't do any
work on graphics. There are tools like the GIMP that do it all for you. Why
do I mention the GIMP with some confidence? Because I used Photoshop and
Paintshop before, but nothing compares to Script Fu which generates
beautiful banners, buttons, backgrounds, etc. See, for example:

http://www.schestowitz.com/Software/Script_Fu/

There are also some nice menus that are GPL'd at:

http://www.e-lusion.com/design/menu/

I mention it only because I stubled across it yesterday.

 

[Jey Gifford]

Nick,

My suggestions would be:

1) Buy Photoshop (with ImageReady) and learn how to use those. (They
can export your images to the correct html tables and whatnot)
2) Visit LOTS of web sites and read TONS of magazine ads. Bookmark &
clip the ones that you think look good.
3) Ask yourself and analyze WHY something looks good.
4) Try to pay special attention to spacing and alignment of text &
graphics
5) Avoid "GOING NUTS" with font usage. That's a sure way to set off
the amateur alarm.
6) REMEMBER: Simplicity and readability speak VOLUMES
7) Enjoy the ride. Five Years from now, you'll look back at your
proudest work and scream "WHAT WAS I THINKING?!?!?!?!?!"

jEY

 

[Henry]

Nick,

My suggestions would be:

1) Buy Photoshop (with ImageReady) and learn how to use those. (They
can export your images to the correct html tables and whatnot)
2) Visit LOTS of web sites and read TONS of magazine ads. Bookmark &
clip the ones that you think look good.
3) Ask yourself and analyze WHY something looks good.
4) Try to pay special attention to spacing and alignment of text &
graphics
5) Avoid "GOING NUTS" with font usage. That's a sure way to set off
the amateur alarm.
6) REMEMBER: Simplicity and readability speak VOLUMES
7) Enjoy the ride. Five Years from now, you'll look back at your
proudest work and scream "WHAT WAS I THINKING?!?!?!?!?!"

jEY

Amen!

Roy... you must be bad in Photoshop!

These samples are very, very average.

Just few actions and you could do magic in Photoshop.

And in some sites you could d/load them for free.

 

[Matthew Superstar Swass]

To be absolutely honest (and not just lazy), you needn't do any

work on graphics.

http://schestowitz.com

And clearly, you haven't. Fact is, a stunning display of original visuals can
increase the value of a site many times that of "regular" sites.

I can't believe I am actually seeing people in this thread recommending the
automation of graphic design. This is the equivalent of someone coming in here
and saying not to learn HTML, just use FrontPage.

 

[Tony Clarke]

Some tips...

1 Photoshop/ImageReady: Use these to make decent images/buttons/menus.
ImageReady can slice an image up into links and do some stuff that can
really save you time.
2. Dreamweaver MX: A quick an easy way to format everything. MS Word will
put ALOT of extra stuff into a html page for formatting.
3. Stylesheets: By far the best way of getting some consistancy onto your
site.

 

[Roy Schestowitz]

And clearly, you haven't. Fact is, a stunning display of original visuals
can increase the value of a site many times that of "regular" sites.

Fair Enough. I used to work on banners in Paintshop and Photoshop and it was
very time-consuming. As soon as I started working on my personal site, I
wanted a quick and effortless machinery to give a diverse collection of
banners. I still use the GIMP to render effects like shadows, transparency,
etc.

As I said, your point is valid.

I can't believe I am actually seeing people in this thread recommending
the automation of graphic design. This is the equivalent of someone coming
in here and saying not to learn HTML, just use FrontPage.

I was using FrontPage many years ago. I have not touched it for 6 years. I
advocate _no_ automatic Web design, unless you are not fluent with SGML or
not comfortable with the concept (as sometimes is the case with
non-scientists, e.g. Word versus LaTeX).

Roy

 

[Roy Schestowitz]

Amen!

Roy... you must be bad in Photoshop!

These samples are very, very average.

Just few actions and you could do magic in Photoshop.

And in some sites you could d/load them for free.

These are _not_ logos I designed. Think of them as a basic templates (have
you read the text at the top of this thumbnails page?).

 

[Henry]

I was using FrontPage many years ago.

Yeah! Cough...cough... than was total crap.

I have not touched it for 6 years. I
advocate _no_ automatic Web design, unless you are not fluent with SGML or
not comfortable with the concept (as sometimes is the case with
non-scientists, e.g. Word versus LaTeX).

I love FP 2003 because when I have splitted page, on the bottom I have a
layout and on the top the code. When I press on layout, it highlights
the code and vice versa.

Any work on layout is showing immediately in code.

So basically I use it as *good text editor* with a preview.

When I have to replace some code like

<font face="Arial" size="5" color="#FF0000">

I'll highlight the code, press Ctrl-F to find it and than I have a
windows asking me, if I want to replace that code with nothing or with a
different code.

When I have to replace with different code, FP is asking me if I want to
replace every instance of a original code.

That way is FAST!!! Try imagine replace 25 instances. ;-P

Working with tables is very easy. All I have to do is to remove unwanted
code like cell height and other crap from M$ and I can see what I'm doing.

Just in case I have my file opened in Firefox and I'm checking if I'm
going right.

FP has one more great feature.

When I see nice page and I want to copy something from it, I save page,
open it in FP, make new blank page and copy some elements from copied page.

FP is copying often that element with css coding just for the element
only. Neat huh?

It's just... me.

 

[Alan Cole]

Yeah! Cough...cough... than was total crap.



I love FP 2003 because when I have splitted page, on the bottom I have a
layout and on the top the code. When I press on layout, it highlights
the code and vice versa.

Any work on layout is showing immediately in code.

So basically I use it as *good text editor* with a preview.

When I have to replace some code like

<font face="Arial" size="5" color="#FF0000">

Try using CSS instead... that sirt of code is waaay outdated

I'll highlight the code, press Ctrl-F to find it and than I have a
windows asking me, if I want to replace that code with nothing or with a
different code.

When I have to replace with different code, FP is asking me if I want to
replace every instance of a original code.

That way is FAST!!! Try imagine replace 25 instances. ;-P

As above..... Using CSS is much better for such things.

Working with tables is very easy. All I have to do is to remove unwanted
code like cell height and other crap from M$ and I can see what I'm doing.

Just in case I have my file opened in Firefox and I'm checking if I'm
going right.

FP has one more great feature.

When I see nice page and I want to copy something from it, I save page,
open it in FP, make new blank page and copy some elements from copied page.

FP is copying often that element with css coding just for the element
only. Neat huh?

It's just... me.

Each to their own.... but there are plenty of other Good text editors
out there with preview panes that don't write bad code themselves, they
just leave it up to you!

Al.

 

[Sybren Stuvel]

Alan Cole enlightened us with:

Each to their own.... but there are plenty of other Good text
editors out there with preview panes that don't write bad code
themselves, they just leave it up to you!

I never needed anything but VIM.

Sybren

 

[Jeffrey Silverman]

I never needed anything but VIM.

Sybren

Me too. Just thought I'd mention that and thus cement my geekiness in
stone. Vim is the best thing. Not best text editor, but best overall
anything. Go on, name something. I dare ya. Ha! Nope, Vim is better. [1]




[1] well, okay, really fantastic sex pretty much trumps it. Heck even
sorta lame queasy sex is better. but now you're just nitpicking. Come to
think of it, even thinking about lame queasy sex is better, but Vim is a
close second

 

[Sybren Stuvel]

Jeffrey Silverman enlightened us with:

Vim is the best thing. Not best text editor

Yes it is.

, but best overall anything.

Que? I think it's video playing abilities are rather poor.

Sybren

 

[Toby Inkster]

Vim is the best thing. Not best text editor, but best overall anything.

Pizza is better than Vim. Vim is better than Vimto though.

 

[Roy Schestowitz]

Me too. Just thought I'd mention that and thus cement my geekiness in
stone.

That's the sole reason vim users stick with it (no offence). It's wonderful
when you have no X session running. Nothing else!

[1] well, okay, really fantastic sex pretty much trumps it. Heck even
sorta lame queasy sex is better. but now you're just nitpicking. Come to
think of it, even thinking about lame queasy sex is better, but Vim is a
close second

Hmmm... if you had used a proper text editor, you'd know it's far better
than sex. So here's the test, folks: if you'd rather have sex than edit,
then you must be using the wrong editor.

 

[Mark Parnell]

So here's the test, folks: if you'd rather have sex than edit,
then you must be using the wrong editor.

http://editor.usenetshit.info/

 

[Alan Cole]

http://editor.usenetshit.info/

Or maybe those that prefer the editing are using the wrong sexual
partner!

Al.

 

[Sybren Stuvel]

Roy Schestowitz enlightened us with:

That's the sole reason vim users stick with it (no offence). It's
wonderful when you have no X session running. Nothing else!

Vim is also great in a XTerm. I use it right now to type this
followup. GVim is great if you don't want to use a terminal version,
or if you want to free up your terminal to do other work. I use it all
the time, also to develop X applications.

Sybren

 

[Toby Inkster]

That's the sole reason vim users stick with it (no offence). It's wonderful
when you have no X session running. Nothing else!

I bet you have /bin/bash running... and /sbin/init and a few other
processes.

If you really want vim running and *nothing* else, type "linux
init=/bin/vim" at the LILO prompt.