Computer Graphics with Photoshop

Author

Want crisper text

rfdjr@aol.com

2005-05-24, 4:14 am

Hi. I just finished a re-write of a site I've had for about eight
years. I finally learned enough of Dreamweaver to do the project. I'm
happy with the results, except for some text I've put there. I created
both the title in the main frame and the word "index" on the left with
Photoshop. But they don't look that great. You can see the site at the
link below. It's the words "Index" and "Folk U.S.A." that I'd like to
see sharper. The other text is right out of Dreamweaver. Thanks.

http://www.folkusa.org

Craig Flory

2005-05-24, 4:14 am

Try using levels and upping the shadow slider. But I'd also look to use
bevel & emboss, next time, as well as stroke. And another font may look a
bit sharper too. Finally, you might want to make a dupe layer, run the
high-pass filter and then in blend mode use overlay.

Craig Flory

tacit

2005-05-24, 4:14 am

In article <ofn491pjbju996jrdj0fkqbqildfialpe2@4ax.com>, rfdjr@aol.com
wrote:

> Hi. I just finished a re-write of a site I've had for about eight
> years. I finally learned enough of Dreamweaver to do the project. I'm
> happy with the results, except for some text I've put there. I created
> both the title in the main frame and the word "index" on the left with
> Photoshop. But they don't look that great.

Yep, that's correct. You put drop shadows on them and saved them as
transparent GIFs. But the GIF standard does not support translucency; a
pixel must be 100% percent transparent or 100% opaque, with no
in-between permitted. So when you save a transparent GIF that has smooth
antialiased edges or soft drop shadows, it looks raggy and ratty.

Open the original .psd file--NOT the .gif--in Photoshop and go
File->Save for Web. In the Save for Web window, you will see a place
where you can specify a "matte color." This is used by Photoshop to
create the illusion of translucency, which makes a smoother edge. Choose
a "matte color" that is the same color as your Web page background.

--
Art, photography, shareware, polyamory, literature, kink:
all at http://www.xeromag.com/franklin.html

KatWoman

2005-05-24, 7:18 pm

as his page has a textured background how would you select the matte?
in this case white is close but what about other pages with patterns in
background?
"tacit" <tacitr@aol.com> wrote in message
news:tacitr-CE78D4.20290923052005@news-server1.tampabay.rr.com...
> In article <ofn491pjbju996jrdj0fkqbqildfialpe2@4ax.com>, rfdjr@aol.com
> wrote:
>
>
> Yep, that's correct. You put drop shadows on them and saved them as
> transparent GIFs. But the GIF standard does not support translucency; a
> pixel must be 100% percent transparent or 100% opaque, with no
> in-between permitted. So when you save a transparent GIF that has smooth
> antialiased edges or soft drop shadows, it looks raggy and ratty.
>
> Open the original .psd file--NOT the .gif--in Photoshop and go
> File->Save for Web. In the Save for Web window, you will see a place
> where you can specify a "matte color." This is used by Photoshop to
> create the illusion of translucency, which makes a smoother edge. Choose
> a "matte color" that is the same color as your Web page background.
>
> --
> Art, photography, shareware, polyamory, literature, kink:
> all at http://www.xeromag.com/franklin.html

Tacit

2005-05-25, 7:14 pm

In article <%6Jke.9262$lQ3.4600@bignews5.bellsouth.net>,
"KatWoman" <JoliePrincessKatana@hotmail.com> wrote:

> as his page has a textured background how would you select the matte?
> in this case white is close but what about other pages with patterns in
> background?

It's virtually impossible to create a transparent GIF that blends
cleanly with a textured background. This is simply one of the
limitations of the Web that Web designers have to contend with. There
are a number of solutions, none of them perfect:

- Choose a matte color that matches the predominant color of the
textured background. It doesn't look perfect, but it does look
surprisingly good. This is the most common solution.

- Do not create a transparent background at all; instead, merge the
background texture in with the logo. Works flawlessly, but the designer
must be careful; if the image does not precisely align with the texture
of the background, it doesn't work. This means controlling the location
of the image precisely in the browser window--something that's not
always easy to do.

- Create the image with no matte, and accept that it may have a jagged
edge or a halo around it.

- Create the image as a transparent PNG, and accept the fact that the
majority of Web browsers will not render it properly--probably the least
desireable solution.

- Rework the Web page design so as not to use a textured background, or
to use a textured background with only a subtle texture, and then use
solution #1 above.

If you're going for a text-heavy design, using no textured background
(or a very subtle textured background) is probably good design anyway.
In fact, I've mostly stopped using textured backgrounds in Web sites I
design, as they do tend to make text more difficult to read.

--
Art, photography, shareware, polyamory, literature, kink:
all at http://www.xeromag.com/franklin.html

KatWoman

2005-05-25, 11:14 pm

thank you for such detailed info
I mostly do retouching and printing so I don't use gif format too much.
Now that I am doing some web design I find a lot of stuff I don't know. I am
trying my first 'from scratch" pages using Illy, PS, Image Ready and Flash.
I like the FrontPage program but never used the templates without having to
do a lot of customization to the graphics.
I thought the guy's site needed better design overall.

"Tacit" <tacitr@aol.com> wrote in message
news:tacitr-1BA3AE.10104725052005@news-server1.tampabay.rr.com...
> In article <%6Jke.9262$lQ3.4600@bignews5.bellsouth.net>,
> "KatWoman" <JoliePrincessKatana@hotmail.com> wrote:
>
>
> It's virtually impossible to create a transparent GIF that blends
> cleanly with a textured background. This is simply one of the
> limitations of the Web that Web designers have to contend with. There
> are a number of solutions, none of them perfect:
>
> - Choose a matte color that matches the predominant color of the
> textured background. It doesn't look perfect, but it does look
> surprisingly good. This is the most common solution.
>
> - Do not create a transparent background at all; instead, merge the
> background texture in with the logo. Works flawlessly, but the designer
> must be careful; if the image does not precisely align with the texture
> of the background, it doesn't work. This means controlling the location
> of the image precisely in the browser window--something that's not
> always easy to do.
>
> - Create the image with no matte, and accept that it may have a jagged
> edge or a halo around it.
>
> - Create the image as a transparent PNG, and accept the fact that the
> majority of Web browsers will not render it properly--probably the least
> desireable solution.
>
> - Rework the Web page design so as not to use a textured background, or
> to use a textured background with only a subtle texture, and then use
> solution #1 above.
>
> If you're going for a text-heavy design, using no textured background
> (or a very subtle textured background) is probably good design anyway.
> In fact, I've mostly stopped using textured backgrounds in Web sites I
> design, as they do tend to make text more difficult to read.
>
> --
> Art, photography, shareware, polyamory, literature, kink:
> all at http://www.xeromag.com/franklin.html