How do I set hyperlinks on words & phrases within a type layer?
SiteGrinder text buttons are Photoshop type layers where the entire contents of the text field have a hyperlink. But often you need to place one or more links within text that is otherwise unlinked. SiteGrinder gives you two ways to do this.
- Lazy: using any type layer that is recognizable as "true text" simply type the links directly into the text for people to click on
- Less lazy : using a type layer containing your text in conjunction with a matching type layer using the "-links" hint and containing the links and information to allow SiteGrinder to match the links to the text.
See instructions below for each.
Lazy: Using A Single Type Layer
You can add URLs directly into a type layer and if it is recognized by SiteGrinder as "true text". To do that, simply set the layers anti-alias text setting to "None". Or, alternately, add the "-text" hint to the layer. Then SiteGrinder will make those URLs clickable on the page, but won't apply the link to other text. If a type layer contains the text "Check out great products here: http://www.medialab.com" then SiteGrinder will make the included link "live" and clickable, as such:
Check out great products here: http://www.medialab.com
This technique does support SiteGrinder's link shorthand, so you can add web links without the "http://" prefix and email links without the "mailto:" prefix.
Less Lazy: Using Two Type Layers and the "-links" Hints
Often you will want to apply links to parts of text instead of showing the URL in the text the way we did in the previous example.
This sentence, containing this link to a discussion of text buttons, is a perfect example.
SiteGrinder allows this using two text layers. The first layer should contains the text that will appear on the web page and be recognizable by SiteGrinder as "true text". (Its anti aliasing should be "none" or it should have the "-text" hint.)
For the links, create a new type layer that will contain the URLs you will be using as well as the copies of the parts of the text you want to to apply them to. Name this layer the same as the layer containing the text, but add the "-links" hint to its name.
Thus if you have a text layer named "sightseeing-text" it will match to a text layer named "sightseeing-links".
The text in the "-links" layer consists of words and phrases from the text layer that you want to add URLs to paired with the URLs themselves.
Each word or phrase from the first text layer that you want to add a link to should appear on a line in the "-links" layer followed by the URL itself on the next line. You can have as many of these as you like, each separated from the previous URL by one or more empty lines.
It sounds tricky, but the example below will show you how easy it is.
Example:
Below is a line of text with multiple links:
I found an awesome waikiki whip recipe at this website! If you want to discuss it, email me.
The preceding sentence contains three different links on three different phrases in the text. To achieve this in Photoshop we'll create two layers, one for the text and one for the links. The type layer containing just the plain text with no styles or URLs we'll call "recipe idea".
Then we'll create a second text layer named "recipe idea-links" containing the following text :
waikiki whip recipe
http://www.medialab.com/sitegrinder/screenmovietutorials.htmlthis website
www.medialab.comemail me
recipe-help@medialab.com
SiteGrinder uses this as a key to apply links to the text in the source layer. Each pair of lines contains text to find, and a link to apply to that text. The pairs must be separated by at least one blank line.
Link appearance:
When SiteGrinder finds a linked word or phrase in text it thinks of it much like a text button.
SiteGrinder will use the style you placed on the linked text in Photoshop as the look for the "normal" (non-rolled over) state and the default Text Button rollover style you set in SiteGrinder's Text Buttons panel as the rollover state.
You can change this on a layer-by-layer basis in using SiteGrinder's Text Buttons panel. You can add custom "normal" and "rollover" styles.
Types of links supported:
Any valid full URL can be entered as a link. This means you can have ftp links (with usernames and passwords) or http links that pass arguments.
There are a few shorthand techniques for common link types. Email addresses should be entered without the "mailto:" label, as in the example above. This allows SiteGrinder to create a true email link that will open in the user's email software. Web page links can start with the simpler "www" instead of the full "http://www". This makes the "-links" field more readable.
You can link to pages you are generating with SiteGrinder by just entering the name of the page followed by the "-page" hint, as in "Home-page". This will match to a layer comp or Page Definition of the same name.
If you want to put in a placeholder empty link that you will enter later in another package you can enter "#" as the link. It will show up as a link, but won't go anywhere.
If you enter an email or http link directly into any text layer that has it's anti-alias set to "None" then they will automatically become clickable links.
Limitations:
- Linked text cannot spread across multiple lines
- If a linked word or phrase appears multiple times in the field, each occurrence will be linked, not just the first one.
Click here for a tutorial about links, buttons, and menus that demonstrates the "-haslinks" hint