Welcome to WeetHet!

Managed Web Hosting by Liquid Web

Your IP address:
Print this page
- use Landscape
Search the
WeetHet Pages
WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
For excellent webhosting that is reliable and affordable, we highly recommend: LiquidWeb

On this page ...

Basic 3D Buttons with Photoshop

On this page you will find a guide submitted by Glenn A. Fraller on the subject of creating 3D-buttons using Photoshop. This tutorial assumes your not completely unknown with Photoshop.

Note: Keep in mind that this is only one of the many ways you can make a 3D-button usign Photoshop. Photoshop is an extremely versatile application, allowing you to walk many ways to get to the same result.

Thanks Glenn for your impressive speedy responses and work! A sample Photoshop file can be downloaded here too.

Maybe some of you'de like to visit his webpage or Woodstock History.

If you have a similar idea or article which you wouyld like to see on WeetHet, then please mail me the text and the images by e-mail ... Your name and/or website will be mentioned on this site!

Drawing with Photoshop ...


1. Start a new image (Menu: "File" - "New").

Use a working space that gives you a little room to play around.

I usually take a larger window, for example 640x480, but for a small button the window does not need to be that big.

The background color of this newly opened window should match the future color of your button. In our example we use blue.

Note: in this example we asume that you're about to create two images for each button. This is usefull if you are about to create a button with a rool-over effect. If you're not familiar with this technique, you will need only one image for your button. However there will be no rollover effect possible on your website.

2. Create the first layer.

First create a new layer (menu: "Layer" - "New" - "Layer..." , or press Shift + CTRL + N). Tip: It is a good idea to label this layer.

3. Draw you basic button shape.

Use the shape tool to create the basic shape of your button. Make it a size that is comfortable working with to be reduced later.

Photoshop: Here you can find the shape tool.

Note: When selecting the shape tool, you will notice that in the top part of the Photoshop window, an additional number of options appear. Here you can select the type of shape. For example: a square, circle, star of a square with rounded edge (usually a bit nicer to look at).

You should get something like this:

Photoshop - Our basic webbutton shape

4. Add a layer effect.

Double-click the Layer (Note: as of Photosop 7, you will need to click the Photoshop - The layer effect button-button instead). The Effect Style Dialog opens.

Click Bevel/Emboss and play until it looks cool! Save this as a new style giving it a unique obvious name. Notice the default is UP position of the Bevel. This will be the base of all your buttons in the UP position. I used the Chisel Hard for this example.

Photoshop - Layer Effects: Bevel and Emboss

We're trying to get something as shown below:

Photoshop - The first signs of our Web-Button

5. Duplicate the layer.

DUPLICATE the layer naming it "UP" (for example). This is done by right clicking the layer and selecting the option "Duplicate".

Click the eye in the Layers Palette turning off the previous layer.

Now the New Layer is the only one showing. Double click this layer to open the Effects Dialgue (Note: as of Photosop 7, you will need to click the Photoshop - The layer effect buttonbutton instead).

Click the "down" effect in the "Bevel and Emboss" screen, after doing that name that style. This will be the DOWN style part for all ALL Buttons. I reduced the Opacity to 50% for additional effect.

6. Adding text.

Naturally, a button should either have an icon and/or text on it, in order to identify it's purpose. We will work with text for this example.

Click the texttool button in the toolbar (as shown on the right).

Click on a position in the shape we just made and type your text. Turn off the DOWN layer and turn on the UP layer. Enter the word "HOME" (as an example). Chose the typeface and color.

Play a bit with the layer effects to add additional effects - you can create pretty cool effects with it!

Don’t forget the give this style a unique name to use throughout the site as we just did with the other style as well, using the effect window.

Photoshop - a first glimps of our button style

Your layer window may look something like this:

Photoshop - Layers on your button

Photoshop - Select the TEXT tool

This file can be used for all the buttons for consistency in size. You can either choose to use this file for all buttons (ie. adding more text layers, turning them ON and OFF. When suing ULead Smartsaver you do not need to flatten the image. If you decide to use Photosop's buildin GIF saving routine, then you will need to create duplicates of the UP and DOWN layers and flatten that layer - it's advisable to work with a copy of the file, as you may accidentally destroy some of your work. Keep in mind though that there is an undo option in Photoshop using CTRL+Z and/or ALT_CTRL+Z.

After all the buttons are done the routine of turning ON/OFF the appropriate layers Save As each Button State. Reopen each file and Flatten the Layers and Resave as a .gif or .jpg. A GIF is a good format for animation in ImageReady. This program comes with Photoshop 6.0. It extends the abilities of artists into animation. Sounds invoved? It is. That is why either we are all nuts or mad or on the other hand love what we do.

Best Regards,
Glenn A. Fraller, MCSE (AllExperts.com)
Graphic Applications Specialist

Tip: the sample button file for Photoshop can be downloaded here.



Klik hier om te wisselen naar nederlandstalige pagina's You are currently on the English pages.
Help & AboutWelcome ... !!GuestbookWeetHet HelpGlossary ...Searching the InternetSearching WeetHetAvailable downloadsNews & UpdatesStatisticsDisclaimer!AdvertisingJoin us !!!AwardsAbout WeetHet ...Hansie goes USAWhere is Hansie?First monthsMy new homeGoing outPuck goes USAMy new carSnapshots PuckRandom snapshotsFinally: Spring!Nice warm summerFirst Family visit!CD's and DVD'sMusicAudio-DVD to MP3Music CD to MP3Music CD to WAVCopy Music CDYour own Music CDMusic from the InternetChanging MP3 VolumeNero Burning RomBurn BIN/CUE filesConvert BIN to ISOComputer CDRomBurn ISO filesPhoto VCDPhoto SVCDNero vs Nero ExpressNRG to ISOBurn SVCDSVCD with menuBurn VCDVCD with menuDVD VideoWhat are RegionCodes?What is MacroVision?Video formatsDIKO: 3 AVIs - 1 DVDHow does a CD work?How to burn a CDCreating a DVDConvert BIN to ISONRG to ISOCreating a disk catalogComputer InfoHow does a CD work?Netiquette: E-MailWhat is DivX?What is MP3?What is RAID?What is USB?What are PAR files?Wireless LAN introPC to TV cablesStart XP fasterBoot from USB driveFireWire connect 2 PC'sPhoto SizingGraphics / PhotosPhotoshopPhoto SizingFast car3D buttonsDraw lightningPhotos on CDPictureToTVVideoCD with NeroSVCD with NeroMagix Pictures on CDDVD PictureShowPhoto SizingPhoto SizingGSM / PDAsCompaq iPAQReplace batterySerial craddle to USBGarmin eTrex cableGarmin eTrex plugRound Garmin plugPalmPilotConnect Ericsson GSMGarmin eTrex GPSMobile phonesEricsson RingtonesMusicBoxRingtonesMasterA edit SIMSMSC numbersConnector pinoutsHardware & HacksOverclocking CPU'sGenericAMD CPU codesAMD Slot-AAMD Socket-AProgr. SmartcardsMillenniumAlcatel HackLCD display to PCNetwork cablesBoot from USB drivePC to TV cablesPromise Ultra -> RAIDSoundblaster MIDIResistor colorcodeFireWire NetworkInternetNetwork genericEnabling DHCPWin95/98/ME ClientWin2000/XP ClientMac OS 7/8 ClientMac OS X ClientWell known IP-portsDNS addressesNetwork cablesWireless LAN IntroFireWire NetworkDialup connectionTCP/IP optimized for Win9xPublic IP Address?ADSL / MxStreamADSL in generalHow ADSL worksDNS addressesMXStreamInstallingPSTN EthernetISDN EthernetRouter for MXStreamSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerSolving problemsAlcatel HackHack the modemPassword CalculatorPurpose of the LEDsSolving problemsFirmware upgradeDNS addressesWell known IP-portsMapping PortsAutoPortMappingConnection sharingPossibilitiesWinRoute (software)Network Win95/98/MENetwork Win2000/XPNetwork Mac OS 7/8Network Mac OS XWell known IP-portsWireless LAN IntroNetwork cablesRoutersSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerInternet by SatelliteHow does it work?Brief intro ...Overview variantsStandardBySky methodTwo-Way InternetInstalling cardsWhich satellite-card?PC requirementsHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemsNew driversMounting a dish (Astra)Dish size?EON ChecklistTransponders EOLRamdisk for FazztYour own webpageNavigation solutionsInsight and solutionsApyCom apPopupMenuD.Binard PopupMenuPopupMenu generatorPopupMenu flatTips and TricksE-Mail linkE-Mail FORMBookmark this pageIcon for my webpage'Page back' link?Jumping within a pageEscape from framesUse frametitleControlling framesAuto redirectFixing 100% problemChange link colorText in the statusbarFixed backgroundText over imagesBrowser safe colorsUsing the .htaccess fileSpecial charactersWhere to downloadIRC using mIRCInstalling mIRCDownload Movies etcFAQMovies from InternetMovie QualityWhat are PAR files?LeechGuyLeechGuy editoreMuleWinMXE-MailNetiquetteQuote of the dayMiscellaniousHack Arescom NetDSLWireless LAN IntroFireWire NetworkWell known IP-portsWhat is my IP Address?Search (WeetHet)Searching (Internet)WeetHet DownloadsA few great websitesDNS addressesMicroControllersBasic Stamp IIStarting with the BS2Assembling the kitFullsize scematicsConnection to your PCBS2 to 44780 LCD44780 LCD SnapshotsBS2 to M50530 LCDM50530 SnapshotsHomebrew BS2Smartcards/SIMProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumCard TypesEdit GSM SIMResistor colorcodeMusic / AudioMusic from InternetIntroductionLeechGuyLeechGuy editorWinMXeMuleUsing mIRCBurn BIN/CUE filesConvert BIN to ISOAudio-DVD to MP3How does a CD work?Copy music CDYour own music CDWhat is MP3?Music CD to MP3MP3 CD for Yamakawa?Changing MP3 VolumeMusic CD to WAVSB MIDI interfaceAC3 to WAV/MP3ProgrammingBorland DelphiHansies Delphi ToolsAYeah!CatalogQuote of the dayPopupMenu generatorOverview ASCII chars.Satellite (TV & GPS)Satellite TelevionSatellite TV on the PCTV reception on your PCPC requirementsNew driversPentam. Pent@VisionHauppauge DVBs NexusTechnoTrend PCLinePVA file to MPEG2DirecTV TiVoRemote ControlDirecTiVo to OS6.21: Intro & Images2: TiVo disk in PC3: Install OS 6.24: OS6.2 first start5: SuperPatch & More6: Recordings to PCTyTools - Movies to PCOld: DirecTiVo to OS4Old: Sleeper HackSmartcardsProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumCard TypesWhat is DiSEqC?Mounting a dish (Astra)Dish sizeSRT8000 firmwareGPS NavigationGarmin eTrexDiagnostic modeSerial connectionConnect to iPAQ 36/38xxConnect to PalmPilotThe eTrex connectorThe round connectorHow GPS worksGeoCaching explained ...Internet by SatelliteHow does it work?Brief intro ...Overview variantsStandardBySky methodTwo-Way InternetInstalling cardsWhich satellite-card?PC requirementsHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemsNew driversMounting a dish (Astra)Dish size?EON ChecklistTransponders EOLRamdisk for FazztVideoVideo guide - start hereIntroductionGSpot: AVI InfoDIKO: 3 AVIs - 1 DVDDownload QualityVideo in generalWhat is DivX?Video formatsRecording TypesWhich AVI codecs?Intro K(S)VCD/KDVDDVD+RW IssuesAbout bitratesVideoServer pluginWhat are RegionCodes?What is MacroVision?RippingAudio-DVD to MP3Photo SizingAVI to MPEGGSpot: AVI InfoDIKO: 3 AVIs - 1 DVDAVI to DVD/(S)VCDWithout SubsD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc with AC3With SubTitlesD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc with AC3Burning CD NeroBurn VCDVCD with menuBurn SVCDSVCD with menuBurn BIN/CUE filesDVD PlayersCompatibilityAdd DVD playerDVD+RW IssuesIntro K(S)VCD/KDVDVideo ToolsBitrate CalulatorDVD RippingGSpot: AVI InfoFlaskMPEG and CCEVideoServer pluginDVD to DivXIntroductionCalculating bitratesRippingDVDx and SmartRipperDVDx settingsFlaskMPEG method 1FlaskMPEG method 2FlaskMPEG method 3DVD to (S)VCDIntroductionCalculating bitratesRippingDVDx and SmartRipperDVDx settingsFlaskMPEG 0.6 and CCEDVDx and Video ServerDivX to (S)VCDDVD to DVDDVD2OneDVDShrinkDVD+RW IssuesTMPGEnc & CoDIKO: 3 AVIs - 1 DVDMovie Cut & PasteGSpot: AVI InfoMergingMPEG1 and MPEG2Using TMPGEncWomble MPEG2VCRAVI with VirtualDubCuttingNewWith TMPGEncWomble MPEG2VCREasy Video SplitterAVI en DIVXAVI with VirtualDubEasy Video SplitterMovies from InternetIntroductionLeechGuyLeechGuy editoreMuleWinMXUsing mIRCWhat are PAR files?Burn BIN/CUE filesConvert BIN to ISOPictures on CDPictureToTVVideoCD with NeroSVCD with NeroMagix Pictures on CDDVD PictureShowRipping SubtitlesVobsub: fast and easy!SubRip (OCR)Sync subtitlesDisplaying subtitlesDisplaying with VobSubSync subtitlesCreate a MicroDVDPC connected to TVPC to TV cablesATI softwarenVidia softwareTiVo - Harddisk VCRTiVo Series 1What is a TiVo?Opening a TiVoSerial accessDebug Mode accessLinux Bash shellSet the clockDisable dialupDirecTV TiVoRemote ControlDirecTiVo to OS6.21: Intro & Images2: TiVo disk in PC3: Install OS 6.24: OS6.2 first start5: SuperPatch & More6: Recordings to PCTyTools - Movies to PCOld: DirecTiVo to OS4Old: Sleeper HackYamakawa 713/715IntroductionFAQThe Remote ControlSecret codesSet regioncodeSet regionfreeDisable MacroVisionFactory-settingsWhich DVDRom driveFirmware versionChange firmwareDownload firmwareChange backgroundCreate MP3 CDM.U.F.Y. MP3 CD'sHelpForumSearch (WeetHet)Search (Internet)News & UpdatesGlossary ...DownloadsLinksStatisticsAdvertisingJoin us !!!Guestbook

Liquid Web Fully Managed Web Hosting