We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
D-ZN Blurb:Theme graphics inspiration; July 7, 2011
Topic Started: Jul 7 2011, 03:23 PM (894 Views)
Helena-ZNR
Member Avatar
No PMs on this account please
[ *  *  *  *  *  *  * ]

Posted Image
Posted Image


Getting Inspiration for Theme Graphics


I thought it might be helpful (or at least interesting!) to discuss some ways to get ideas for adding graphics to your newly completed theme design. You've just spent a lot of effort making a theme that is hopefully unique and has a certain personality: be it corporate, whimsical, dramatic, artsy, brooding, light and clean, or whatever direction you chose for it. In this article, I'll be providing some examples from buttons I've designed to help illustrate the different directions you can take your own graphic button designs.

You've finished your theme. Now it's time to build some graphics. Where do you get inspiration? Hopefully by this time, you have some well-developed shapes and idioms that you have used in the headers and borders of the theme. That's a good place to go for inspiration. A section of the header image can be cropped and bordered to make a forum marker on a basic, or straight-lined theme. To achieve a good flow, the shape of the buttons should relate with the feel or shapes elsewhere in the theme, as well as complimentary colors.
Posted Image

Let's look at some different style directions that could be taken:


Geometric, pill or rectangular shapes with inset or embossed text and icons tend to have a sleek, serious look.
Posted Image Posted Image Posted Image
Posted Image


Glossy buttons and text gives a Web 2.0 feel to your theme.
Posted Image Posted Image


Lighted buttons or ones with metallic influences can give a techie feel.
Posted Image Posted Image


Hand-drawn images or photo-crops can give an casual, fun, or personal feel.
Posted Image Posted Image Posted Image

Dispensing with any kind of structured base as an outline gives a more artistic feel.
Posted Image Posted Image


Textured and natural effects like wood and stone can promote a quaint, grundge or rustic feel.
Posted Image Posted Image Posted Image Posted Image

Bold shapes and bright colors that pop can give a fun and youthful feel.
Posted Image Posted Image

You can even be creative with animation in certain situations. In a Harry-Potter based theme, this topic button has a static image, but when hovered, an animation is activated:
Posted Image
Click to view animation


If your theme has a definite direction such as a video game, celebrity, anime, or particular interest focus, your job is a bit easier. You can draw inspiration from characters, items, or shapes connected with your focus. Often there are reams of related images that can be cropped, manipulated or rendered to be used in your theme graphics. There are also many free clip-art and icon sites from which you can find appropriate sets, or at least shapes from which you can make your sets. Line art can be assembled and colored to coordinate with your theme pallette. Searching words like "icons grunge, business, web, techie, embossed, line, pen and ink, hand-drawn, glossy", etc. and then clicking the image link will give you all kinds of ideas in the direction you wish to go. Also be thoughtful about the font style you use for the text on your buttons. The feel of the font should reflect the direction you are taking the rest of theme, and can be just as important a decision as the other elements of the button.

There are countless button tutorials available as near as a google search. Often times, you can start with the design in the tutorial and then add other elements to it to connect it to your own design. If you are not keen on creating designs from scratch, then you can look for and use the variety of layer styles presets that are available. Layer styles give you instant group of effects and a completed background look. All you have to do is create a shape for them to fill. Gimp has numerous button script plug-ins that will quickly create a button base for you with your color and size perameters.

Photoshop's Shapes tool can be invaluable in creating icons. If you can't find shapes collections with the icons you like for your buttons, you can create your own vectored shapes with the pen tool. You can also save them for reuse. WebDings fonts also provide many useable shapes for icons, and are scalable via the font size settings.

I hope this has inspired you to expand your design ideas as you complete your themes. If you have any tricks or techniques that you find helpful as well, we would love for you to add them to this topic. Happy button designing!

:helena:
Offline Profile Quote Post Goto Top
 
OverTheBelow
Member Avatar
Member
[ *  *  *  *  *  * ]
Nice article. :P


Normally I just use a part of the maintitle as inspiration to create the buttons off; sometimes even an actual slice of it provided it doesn't look too repetitive. :)
Offline Profile Quote Post Goto Top
 
JJEmpire-ZNR
Member Avatar
Do I desire to learn the motives behind this insanity?
[ *  *  * ]
I often love to experiment on Photoshop and whip up random stuff, even if it's crap. It's usually how I get the feel for the tools and the brushes I have access to, and what they're able to do. Most of the time, the stuff I think up for theme ideas is found through experimentation on PS and other art programs, though ideas do come from other sources for me often, too.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Creative Discussion · Next Topic »
Add Reply