Web Design Tutorials osCommerce Template Tutorials
New osCommerce Templates osCommerce Specials osCommerce Forums Search Our Site Contact Us Resources Web Design Tutorials
Web Designers Library- Tutorials and Articles
Tutorial Search
  Advanced Search
 
Tutorial Menu
 
 Video Tutorials
  · Dreamweaver
  · osCommerce
  · Installations
 
 Photoshop
  · Tutorials
  Photoshop Basics
  Special Effects
  Text Effects
  3D Effects
  Textures & Patterns
  Web Layout
  Drawing Techniques
  Color Management
  Photo Editing
  ImageReady Animation
  Miscellaneous
  · Articles
 
 Web Design Basics
  · Design Principles
  · Website Usability
  · Color Theory
  · Templates & Tuning
 
 osCommerce
  · osCommerce Knowledgebase
  Catalog Area
  Installation and Upgrades
  Administration Tool
  General Information
  Developers Section
What's New
Latest Tutorials and Articles
Video Tutorials
osCommerce Tutorials
Template installation with cPanel and Ipswitch
Photoshop
Photoshop CS3: Output Sharpening
Change Color on an Object
Sunlight Effect
Autumn Effect
Eyes in Green Pea Pod
Web Design Basics
A To Z About RSS
Elements of Great Websites
The Next Generation Website Model
Why Use a Web Design Template?
Web Site Templates and Their Benefits
osCommerce
SSL - This page contains secure and non secure items
Post-Installation
Security - .htaccess
SSL - This page contains secure and non secure items
Tax Proposal
Photoshop : Tutorials : Web Layout Last Updated: Apr 15th, 2008 - 18:38:37


CMS Buttons
Author: Webmaster
Authors Website: www.photoshoptower.com
Feb 23, 2007, 15:34

Email this article
 Printer friendly page

Step 1. Create a new document of any size, l used 300x300. and fill the background with a medium grey, l used #626262

Step 2. Using the rectangular marquee tool, make a square selection for your button. Then go to "select->modify->smooth" and apply a setting of 1 pixel


Step 3. Fill this selection with white:


Step 4. Next apply the following blending options to this layer by double clicking on the layer:




Colors used for gradient are:

#000000 on the left

and

#3E3E3E on the right



Heres what you should end up with:


Step 5. Next we'll apply the button's function icon. Here l'll use the universal icon for "italicize" with a white color:


Note: If you're not comfortable creating your own function icon's, might l suggest a great designer resource: Websiteicons.com has a massive selection of website icons at an affordable price.

Step 6. Apply these blending options to this layer



Colors used for gradient are:

#000000 on the left

and

#FFFFFF on the right


Here's what l ended up with


Step 7. And that's all there is to it, just duplicate the original button layer, and apply each of your CMS icons over top of the buttons. Here's what an actual application of the CMS button usage looks like with a little window dressing:


For great website icons at an affordable price (similar to the ones used in this very tutorial) check out: www.websiteicons.com. I highly recommend their service.



Top of Page

 
Level Ten Hosting