How to generate type with inner shading?

Questions and postings pertaining to the usage of ImageMagick regardless of the interface. This includes the command-line utilities, as well as the C and C++ APIs. Usage questions are like "How do I use ImageMagick to create drop shadows?".
Post Reply
rocketboom

How to generate type with inner shading?

Post by rocketboom »

Hey,

can I use ImageMagick somehow to generate type with this sort of inner shading?

Image

Thanks!
User avatar
fmw42
Posts: 25562
Joined: 2007-07-02T17:14:51-07:00
Authentication code: 1152
Location: Sunnyvale, California, USA

Re: How to generate type with inner shading?

Post by fmw42 »

make a blue gradient image for the background and then put white text on it

convert -size 60x20 gradient:royalblue-blue -gravity center -pointsize 12 -fill white -annotate +0+0 HOME tmp.png

or for bolder, use a bold font or try

convert -size 60x20 gradient:royalblue-blue -gravity center -pointsize 12 -stroke white -strokewidth 2 -fill white -annotate +0+0 HOME tmp.png


see http://www.imagemagick.org/Usage/canvas/#gradient
and
http://www.imagemagick.org/Usage/text/
rocketboom

Re: How to generate type with inner shading?

Post by rocketboom »

Thank you sir!

I should have mentioned that I don't need the gradient, but rather that outer edge shading inside my white text. Do you know if this is possible?

Thanks very much!
User avatar
fmw42
Posts: 25562
Joined: 2007-07-02T17:14:51-07:00
Authentication code: 1152
Location: Sunnyvale, California, USA

Re: How to generate type with inner shading?

Post by fmw42 »

Sorry, I could not see the outer edge issue. Can you provide a larger example? Is it just a constant border around the text or is it shading from a light source? Those are each possible. If something else, please explain and if possible provide a larger example to demonstrate.
rocketboom

Re: How to generate type with inner shading?

Post by rocketboom »

Unfortunately no, that's all I got. I'd be very interested in trying out both the constant border around the text (looks like it could be blurred?) and the shading from light source though, if possible. Thank you!
rocketboom

Re: How to generate type with inner shading?

Post by rocketboom »

I'm trying to build this navbar and I'd like my main links to be like that example.

I'm going to use this:
Letterpress
===========

Rails plugin, uses Imagemagick to generate images for displaying text in non-web fonts.


Prerequisites
=============

ImageMagick (NOT RMagick. It isn't used)


Configuration
=============

Absolute path to the directory to look for fonts:
Letterpress::Config.fonts_dir
Default:
RAILS_ROOT/lib/fonts

Directory to output images, relative to RAILS_ROOT/public/images ():
Letterpress::Config.images_dir
Default:
letterpress

File format used to render the image (can be anything ImageMagick supports):
Letterpress::Config.image_format
Default:
'png'

A hash of default, site-wide parameters. The options passed into individual calls to the
letterpress() method are merged into this, overwriting these defaults:
Letterpress::Config.singleton_options
Default:
{:density => "72", :units => "PixelsPerInch"}
Examples:
Letterpress::Config.singleton_options[:font] = "Verdana-Regular"
Letterpress::Config.singleton_options[:density] = "300"
Letterpress::Config.singleton_options.merge!(:density => "100", :size => 20)

Usage
=====

letterpress(text, options = {})

The letterpress method takes two parameters: the text to be rendered as an
image and a hash of options. Supported options are:

:background_color => The background color, specified in the supported ImageMagick
formats enumerated at http://www.imagemagick.org/RMagick/doc/ ... olor_names.

:font => The file name of a font found in the letterpress fonts directory. Any font
supported by ImageMagick will work. If no extension is provided, .ttf is assumed.

:color => The color of the text, specified in the supported ImageMagick formats
enumerated at http://www.imagemagick.org/RMagick/doc/ ... olor_names.

:size => The size of the text, IN POINTS

:format => The format of the image that the text will be rendered out to. This
can be set as a plugin-wide setting with Letterpress::Config.image_format, or
this can be specified in each call to letterpress. The default is 'png'.

:transparent => The color to make transparent within the image. Pass the same
color here as in background_color option to make a transparent image for web use.

:density => The horizontal and vertical resolution in pixels of the image. Specified
as the width ("DD") or width and height ("DDxDD").

:units => the units of image resolution. Choose from: Undefined, PixelsPerInch, or
PixelsPerCentimeter.

See http://www.imagemagick.org/script/comma ... ptions.php for more information.

All unsupported options will be passed on to image_tag as is. This can be
used, for example, to provide the css class of the image:

<%= letterpress "Le géant américain des logiciels",
:format => 'jpeg',
:class => 'some_css_class' %>

The generated image will be written out to the directory configured in
Letterpress::Config.images_dir (with a filename equal to the md5 hash of the text
and all the options passed in). If an image with this filename already exists,
it will not be generated again (unless you are in development mode). Add some
fragment caching and this will perform just as well as pre-generated images and
image_tag.


Examples
========

In RAILS_ROOT/lib/fonts:

AppleGothic.ttf

In a view:

<%= letterpress "Assertively revolutionize worldwide materials via 2.0 content.", :format => 'gif' %>

Or...

<%= letterpress "Compellingly harness client-based ideas whereas business schemas.",
:font => 'AppleGothic',
:size => 55,
:color => '#f7f7f7',
:background_color => 'red',
:format => 'png' %>

Etc.


Rake Task
=========

To clear all previously generated images, run the task provided:

letterpress:images:clear


Copyright (c) 2008 Norbauer Inc, released under the MIT license
Bonzo
Posts: 2971
Joined: 2006-05-20T08:08:19-07:00
Location: Cambridge, England

Re: How to generate type with inner shading?

Post by Bonzo »

User avatar
fmw42
Posts: 25562
Joined: 2007-07-02T17:14:51-07:00
Authentication code: 1152
Location: Sunnyvale, California, USA

Re: How to generate type with inner shading?

Post by fmw42 »

see http://www.imagemagick.org/Usage/fonts/#fonts

that page has many types of examples of borders, shading and such. But for small buttons, these may not be very distinguishable from a plain text.
Post Reply