Background image of wood with different different texture horizontally and vertically

ralphm · March 31, 2013, 2:35am

@font-face works fine on those browsers too.

this paper has a bunch of lines on it and those links are directly above the lines, but as you mentioned already, if you zoom in on the screen, the design
explodes.

As I said above, that’s why you need to save the line as a separate image and apply it as a background image on the elements it will sit below. I actually did the same thing in the site I linked to above, if you need some inspiration.

wc43870n · March 31, 2013, 3:34am

ok, i see. Then i just need to use the @font face tag, find the font on a font foundry and create regular links and use typical css style selectors to get rid of the underline on the text and then put a background on my link element of that line?

good tip.

though, i can’t find your example website. can you give me the link.

ralphm · March 31, 2013, 3:39am

That’s basically it, yes. Check out the FontSquirrel site for free fonts that look similar to the font you need (if the exact one is not available). Or you can use sites like TypeKit of FontDeck and link to their version of the font. FontQuirrel is handy, as it gives you the fonts you need and the CSS that goes with it, so check them out even if just to learn about this stuff.

i can’t find your example website. can you give me the link.

It was in post #21 above.

wc43870n · March 31, 2013, 3:49am

http://calligraphicworks.com ?

cause i don’t see you put a background on a link element there ?

ralphm · March 31, 2013, 4:27am

The menu links at the top have that, and also the horizontal lines on the main and footer sections are background images, too, so any of those serve as examples.

wc43870n · March 31, 2013, 11:18am

managed to get the line in there. but because each line they have is actually unique. it’s going to make this a bit image heavy.

are there any other solutions?

Also this designer’s client is going to request a similar design for the next project, so if you have some recommendations that i can convey to the designer, please let me know.

thanks.

ralphm · March 31, 2013, 2:05pm

A compromise is to have a single, longer version of the line and only show bits of it at a time. That way, just one image to download, and it need not be a big file

some recommendations that i can convey to the designer

I’m sure you have some of your own now.

Mine would be to learn something about web design. The web is a medium quite different from paper.

wc43870n · March 31, 2013, 5:53pm

i was looking at this and they have a very large background image and also background image is very huge in file size.

couldn’t i just do a huge background of that wood texture and the paper together to simplify things.

because when i separate the paper from the wood, i also have to deal with the paper not blending perfectly into the wood when its a transparent gif.

But they used some type of shadow on the paper.

on the six revisions site, they also have no font for the those unique fonts.

let me know your feedback on the sixrevisions tutorial

ralphm · March 31, 2013, 10:24pm

That’s not good web design, for a number of reasons. If images are disabled, there’s no heading text, which I don’t like. And if someone has their system fonts set larger than the default, you’ll end up with a site that looks like this:

That’s what will happen to your site if you stick the paper image to the background image.

As Paul’s example shows, it’s quite viable to do the paper image as we’ve described above. It would be worth sending the sliced image to the graphic designer to make it clear what yo really need, and then he/she can supply you with higher quality graphics.

wc43870n · March 31, 2013, 11:47pm

well there’s more to it than that. on that main homepage, there’s an arrow image that appears next to the text and on other pages, there’s like a paint brush like rollover where the under line looks like a paintbrush stroke underneath each text with that typewriter font.

so in addition to having varying line images as backgrounds for these links, then i have an arrow icon next to it on rollover. (javascript or css?)

is javascript for rollovers like yesterday’s news? or just bad practice nowadays?

Then i got the problem of having a designer who doesn’t know if they have the license for the fonts. and giving me fonts that are corrupt.

so wouldn’t that necessitate using images as buttons?

or has css advanced to a point where we no longer use images as buttons. the only time we do that is using a span and styling it’s background as that button image?

i’m quite confused.

ralphm · April 1, 2013, 12:09am

Don’t worry, it’s all doable.

i have an arrow icon next to it on rollover. (javascript or css?)

CSS is the way to do there. It’s quite straightforward to do CSS rolloevers.

is javascript for rollovers like yesterday’s news? or just bad practice nowadays?

Then i got the problem of having a designer who doesn’t know if they have the license for the fonts.

As mentioned, if the font has licensing restrictions, it will be easy to find a web-ready equivalent that looks very similar. There are thousands of options out there.

or has css advanced to a point where we no longer use images as buttons.

My preference is to use text if possible, but sometimes it’s not possible, such as with an arrow or something.

the only time we do that is using a span and styling it’s background as that button image?

There are more options than that.

i’m quite confused.

You are biting off a big mouthful at once … and you’re not being helped by a designer that doesn’t understand the web. O well, not an uncommon scenario.

wc43870n · April 1, 2013, 3:50pm

So i started coding it again and this time i’m using the @font-face tag

http://webpage.pace.edu/wc43870n/designlab/homepage.html

Can you take a look and see what i’m doing wrong?

i’m trying to color the text but it’s not letting me.

i’ve tested in ie 9, ie 8 and firefox. and safari.

wc43870n · April 1, 2013, 5:31pm

seem to have fixed it. but it still has issues. i’m wondering how i can get a nice faded look for the text. because on theirs they have a faded like effect on the name of the restaurant.

i guess for the logo, it really does have to be an image.

h1 with the image as a background probably best choice?

ralphm · April 1, 2013, 8:51pm

You can use RGBA colors for that, though they don’t work in alder IE versions (but that’s fine, you just get a solid color there if you give a standard color value first. For example, here is the RGBA value for black set to 70% opacity:

element {
  color: rgb(0,0,0);
  color: rgba(0,0,0.0.7);
}

wc43870n · April 2, 2013, 12:14am

ralph_m:

You can use RGBA colors for that, though they don’t work in alder IE versions (but that’s fine, you just get a solid color there if you give a standard color value first. For example, here is the RGBA value for black set to 70% opacity:
element {
  color: rgb(0,0,0);
  color: rgba(0,0,0.0.7);
}

When i look at the font for this through multiple browsers, it doesn’t quite look the same through each browser.

also the font doesn’t seem quite right.

Is there anyway for me to distort the font at certain parts? , like manipulating serifs to make them longer or anything like that out of curiosity?

ralphm · April 2, 2013, 12:54am

No, this isn’t possible at this stage of the web. Hehe, you are thinking too much like a graphic designer. Remember that content is the important thing. As long as it’s clear and usable, that’s the main thing.

wc43870n · April 2, 2013, 3:08am

well, i kind of want to be a good graphic designer. too bad i never got trained in it. and then i could fix that psd without waiting for the designer.