It seems like most 3d fonts aren’t 3d looking at all and look like drop shadow fonts. Know of any source that has fonts shaded as if the characters are white wooden house numbers?
Thanks,
Chris
Seems like there’s a ton of that sort of thing out there:
I’m a little wary of such free fonts, though. Were you looking for a web font?
That’s a common search engine find, but I didn’t see any that look real. This is what I’m looking for. See the very light shading on the white characterv on the right side and on the bottom?
That looks more like a Photoshop effect than a viable font characteristic. Fonts are normally vector-based (afaik). I’d be looking at some kind of CSS text shadow effect, but you won’t get the effect pictured above.
You could try something like this:
I see the result you’re showing me but no idea what yoiu’re doing to get that result and can it be used on text placed on an image?
The CSS tab shows
body {font-size: 8em; font-style: italic; font-family: georgia; color: white; background: #30353b;}
p {text-shadow: 2px 2px 3px #e7e7e7; line-height: 1; margin: 0;}
Maybe not “in” an image but certainly “over” an image.
I thought the codepen box is an image. I didn’t realize the dropdowns work.
Would I make use of layers to combine the two. I have PSPx7 if it matters.
Thanks
The above is more of a web design effect that a image editor effect. Ps has nice ways to emboss and all that, but I don’t know about PSP.
Does that mean: the above is accomplished with coding more than image editing? If so, how do you get coding to change text in an image? If not, what is “web design effect”?
Thanks
True, and more importantly, they are monochrome, just one colour, so no variations on colour or tone within the font, so such effects require some external processing.
Ralph’s example is not an image. It is pure code, css applied to html. This is good because crawlers and screen readers can read the text because it is text rather than an image of some text. The down side is the limitation of css text effects, css allows drop shadows via text-shadow but text can’t currently have an inset shadow like box-shadow can, to give the embossed or indented look.
You can get the effect like the image you posted using Layer Effects in Photoshop (or similar software). There the down side is the end result is an image of text, not actual text that is machine readable, this can have a negative effect on SEO and accessibility.
There is one glimmer of hope though. Google Fonts have something called “Font Effects” which as the name suggests, applies effects to fonts while keeping them as actual text. However it is still in Beta and is yet not supported by all major browsers.
You don’t you need image editing to change text that is part of an image.
1 Like
I had a go at doing something like that with css alone and came up with this.
I remember seeing people using a duplicate of the text in the “old days” to create drop-shadows, before drop-shadows were in css. Here I used it to make an inner shadow. Though I’m not sure about the rights and wrongs of using duplicate content for effect, I would think it is most probably a bad idea.
1 Like
It appears X7 does. I found this
Thanks much Sam.
One last thing: If the text is going to be in its own layer, how do you get the text into a layer? If you take an imahe of it (e.g.printscreen button), those images come out pretty fuzzy.
Nice work, @SamA74. Rather than duplicate the text in the HTML like that, a better approach might be to use the ::after or ::before pseudo element with the duplicate text in the content attribute, like so:
1 Like
I don’t know about that program, but normally you’d be able to save the work for the web as a single image. Or you could flatten the layers beforehand. Is that what you mean?
How do you “save the work for the web” as a single image. I saved a page and expectedly, I didn’t see any image files of the text result of the html/css code?
Hm, sounds like you’re on the wrong track there. You want to be saving this as an image of some kind, such as .jpg. Photoshop has a Save for the Web option, which saves a layered graphic as a flattened image, but I can’t speak for the software you’re using. Perhaps google that program’s name and “saving images for the web”.
I’m a little confused about exactly what it is you are trying to do and how you are going about it. Can you explain more fully?
If you are trying to create the text as an image in your image editor (I’m not familiar with PSP, but assuming it is similar to Photoshop):-
You would type in the text using the text tool.
Open the Layer Properties for the text layer and edit to get the effect you want.
If you want the text layer as a single entity, without any background, hide or delete any default background layer if it exists.
Save the image in a format that supports an Alpha channel, such as PNG.
Insert the image into your html using an <img> tag.
If there is a background image you want, apply that to the container element via css.
We have already discussed the shortfalls of using image for text, so if you want to use actual text, you may consider the CSS methods shown earlier if they fit your needs. Note the method I used, which Ralph improved upon, may not work well on a background image, as it relies on the background colour being the same as the “top” shadow which creates the highlight; in this case white.
Or you may consider the Google Font Effects mentioned.
1 Like
Sam - I’m trying to create the text as an image, but after working with psp’s notes on “text as image” and “create text” and some of what you wrote, creating text in an image editor is not going to work because image editors don’t use css. So I have to take a pictue, using software as the camera, of the text styling effect/result of the css coding discussed above.
I’m pretty sure the final text-in-iimage image will be jpg, since the starting image is jpg. The prntscrn function takes pctures in bmp .They’re sharp until they’re converted to jpg, creates fuzzy jpg images.
So the questions is: What software would be good for taking the picture of the css effect/result?
Chris
How can I put this? That is not something you (or rather I) would do.
If css creates the type of style you want, just use css and forget about images.
If on the other hand you specifically need the text as an image, or the css does not offer the exact effect that you need, then forget about css and use the text tool and layer style in PSP to create the text image, like I described. I found a PSP tutorial which shows the use of Layer Styles to add things like drop-shadows.
Doing screen grabs with Print Screen is not the way to create graphics.
I’m still unclear about what you are trying to achieve. Is it a title header for a web-page? A logo?
What starting image? Is there an image you have already you are basing it on?