Extreme Templates

Pixel Bevel Temolate

Templates for Web-sites can become quite elaborate.  I’m going to show you how you can make a template for not only an attractive design, but a highly functional area of your site.

Don’t be nervous OK?  You will just love what you can do with these designs; both using what I’ve given you so far, and to build upon, with what I’m giving you now…

Unfortunately, I can’t give you the layered files with all their working components.  Those are reserved for packages I will sell on my Web-site, when I’m ready.

Meanwhile, I still go by the adage that it’s better to teach someone how to fish than to just give them a fish.  You, I expect to use and develop these skills, so you won’t have to pay someone mega-bucks to do it for you.

All that’s really happening here is a cut out, made by overlapping a small square, on top of a larger one, you can literally carve out your design with the “magnetic selection” tool.  Just keep both squares on the same layer.  It’s easier to do than you might suppose… 

Then select all the blue with your “magic wand” and add effects to bevel it above the black.  You may want to further embellish it with inner shadow, inner glow etc..  Experiment until you find a convincing look you’re pleased with.  I know for a fact that Photoshop has plenty of beveling effects.  The black areas can be adjusted as well, if selected with your magic wand…  I will even give you a finished background template to work with below…

Pixel Button Template

Well!  Things are beginning to pick up aren’t they?  Any harsh corners you wish to smooth out can be done with a simple eraser tool…

Pixel Button 4b copy

Here is the template with all its gizmos lit up.  Two of the buttons haven’t been named so that you might choose your own; sort of a ‘fill in the blanks’ kind of template, you might wisely ask your client about before proceeding.  The communication line between you and your client must be on speaking terms at all times if he/she expects to get what they’re paying for; and as a web-site designer, you would have to take down real notes!  LOL!  Or better still, ask for an e-mail describing these things.

Pixel Button 4d copy

Notice in this version, the “Templates” light is off.  If you set it up right, a light should go on when you roll over the word with your mouse.  Then you need to make one with a “click state” to take you to your desired Template page.  You would set up a URL…

Interface Pipe 4 extract Here are a few connecting rods I made to get you started.  You’ll understand the whole thing once I’ve completed this tutorial.  I promise you, learning about this stuff will bring you a lot closer to designing your own web-site, and eventually, if you’re ambitious enough, you can design Web-Sites for people! The job pays an extravagant amount of money as well.  It does help however, if you love what you do.  I enjoy making this stuff, but not everyone is like me.

Interface Pipe 1

This is just the same connecter rod I used in the feature template above.

Interface Pipe 3 extractPixel Button Extract 1

Above is just one example of how you might use these gizmos.  And all of them are perfectly extractable, so you can build your own.

Interface Page

Here is another strong example of the amazing functionality of templates!  This is the work in progress…

Interface Page Extract

And here is it’s completed form with a button lit up for selection.  Of corpse the big “e” would take you to Internet Explorer.  Yes, you can trigger apps. as well.   Below, I will include some raw templates for you to work with.

Pixel Button 1Pixel Button 2

Pixel Button 3

Here’s what you do.  I think in Photoshop, unless they’ve changed it, ctrl+j sends an object to it’s own layer.  Be sure and get all of the orange with your magic wand, and the orange only, and then assign it to it’s own layer.  Double click the layer and name it: Orange Foreground.  Always name all of your layers so you know what’s what; sometimes the layer-box thumb-nails just don’t cut it.  Do this with each colored part and bevel to taste.

Pixel Button 6a

Whatever you like.  Just let your imagination run wild!  And what’s the point of all this?


That!  You can nestle one of those templates into a corner of your web-page, or as part of a side column.  Put one in the top left corner, if you want to feature it.  I think todays instruction went well.  I would be happy to answer any questions you may have.  Notice how a web-page should leave plenty of room for words and objects.


6 thoughts on “Extreme Templates

  1. Amazing stuff! I wondered how to make images like this for my website. I’m bookmarking this page for that time when I am ready to create my own! Thanks heaps for sharing, and I wish you well for your own business.

  2. You’re absolutely right. I did make them in Photoshop. And again you are right that just about any generic, graphics program carries these same fundamental tools to make these things. If it turns out by some dumb, rule of fate (There are plenty of them out there!), that you don’t have an embossing ability in a freaking graphics program, try searching the Internet for plugins that do just that, and are compatible with your program. Sometimes your program has a home page of it’s own, where it provides these things. Check your help menu for that.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s