How do I make a button combining text and graphical layers?
Sometimes a design will call for a button with a graphical background but a text label. We call this a "hybrid" button and it is amazingly easy to create them in SiteGrinder using layer sets.
Here is how it's done starting with a new empty document in Photoshop:
- Create a button sized graphic in a new empty graphic layer
(Put a nice effect on it for fun. We used bevel & drop shadow.) - Create a type layer with some text for the button with anti-aliasing set to "None"
- Create a new layer set
- Name the set whatever you like followed by the "-button" hint (in the example at right we called it "Cool-button")
- Put the graphic and text layers inside the new set
- Make sure the text is on top of the graphic layer so you can see both
- Save the file and open SiteGrinder from Photoshop's File->Automate menu
- Click the "Build" button. You're done!
That's it! Sitegrinder has now created a page with a hybrid button on it.
You can even create a separate graphical rollover layer so that a rollover swaps with the graphic background and applies the text rollover effect at the same time! The graphic rollover layer doesn't need to be in the "-button" set, it only needs to match the "-button" set name, so in this case you would use "Cool-rollover".
To recap: Sets can be used like layers for rollover, button, popup and other purposes. You can also mix and match layer types for hybrid buttons and you can do this in any combination. You could have one layer that is a button and a layer set that is its rollover, etc.
At this point you should be getting a good sense of exactly how flexible and powerful SiteGrinder is. You may even feel a little dizzy. Don't worry, this is normal.