Welkom bij WeetHet!


Managed Web Hosting by Liquid Web

Jouw IP adres:
54.224.164.166
     
 
Pagina printen
- kies Landscape
Zoeken in de
WeetHet pagina's
WeetHet is being updated! - Current articles will slowly move to www.tweaking4all.com
Voor uitstekende webhosting welke zowel betrouwbaar als betaalbaar is adviseren wij: LiquidWeb

Op deze pagina ...

Basis 3D Buttons met Photoshop

Op deze pagina vind je de kleine handleiding van Glenn A. Fraller die dit stuurde om aan WeetHet toe te voegen. Het onderwerp is het maken van een 3D button voor webpagina gebruik, m.b.v. Photoshop. Een beetje voorkennis van Photoshop is voor deze handleiding wel handig.

Merk op: Dit is een van de vele manieren om een 3D knop te maken! Photoshop is zo veelzijdig dat er meerdere wegen naar Rome leiden.

Met dan aan Glenn voor zijn werk! Een voorbeeld bestand kan hier gedownload worden.

Misschien leuk om Glenn's webpagina of zijn Woodstock History eens te bezoeken.

Als je zelf ook iets wilt bijdragen aan WeetHet, mail me dan de tekst en afbeeldingen ... Jouw naam, website etc. wordt natuurlijk met ere vermeld!

Tekenen met Photoshop ...

HANDLEIDING

1. Start een nieuwe afbeelding (Menu: "File" - "New").

Zorg ervoor dat deze nieuwe afbeelding een beetje werk ruimte biedt. Normaal gebruik ik een lekker ruim formaat, bijvoorbeeld 640x480, maar voor een kleine knop hoeft de afbeelding niet zo groot te zijn.

De kleur van de background layer (achtergrond) dient de kleur te zijn die we als basis gaan gebruiken voor de knop. In dit voorbeeld kiezen we blauw.

Merk op: We willen twee afbeeldingen maken. Een voor de UP status en een voor de DOWN status. Dit hoeft niet perse. Als je echter overweg weet met zogenaamde roll-over images in een webpagina, kan dit leuk zijn.

2. De eerste layer maken.

Maak nu de eerste layer (menu: "Layer" - "New" - "Layer..." , of gebruik de toestcombinatie Shift + CTRL + N). Tip: geef deze layer een naam zodat je 'm straks terug weet te vinden.

3. Teken de basis vorm van de knop.

Gebruik de shape tool om de basis vorm van dez knop te maken. Kies een prettige grootte - je kunt de knop straks altijd nog kleine maken.

Photoshop: hier vindt je de shape tool

Merk op: Als je op de shape tool klikt zul je zien dat er in de bovenste balk van Photoshop een x-aantal extra opties te voorschijn komt. Hier kun je de vorm kiezen. Er is bijvoorbeeld de mogelijkheid een rechthoek, een circle, een ster of een rechthoek met ronde hoeken te kiezen.

Je zou zoiets kunnen maken:

Photoshop - de basis vorm voor onze knop

4. Layer effect toevoegen.

Dubbel klik de Layer (Merk op: vanaf Photosop 7, moet je de Photoshop - The layer effect button-knop klikken). Het Effect venster voor deze layer verschijnt.

Klik op Bevel/Emboss en speel daar een beetje met de instellingen totdat de button er een beetje uitziet zoals jij dat zou willen. Bewaar deze wijzigingen als een nieuwe style ("New Style..."). Merk op dat de standaard instelling voor "Bevel and Emboss", voor de "Direction", standaard op "UP" staat. Deze layer wordt dus de basis voor de UP layer. Ik heb hier "Chisel Hard" gebruikt.

Photoshop - Layer Effects: Bevel and Emboss

We gaan proberen zoiets als hieronder afgebeeld staat, te maken:

Photoshop - eerste tekenen van leven voor onze web-button

5. Kopieer de layer.

Kopieer de layer nu en geef het de naam "UP" (als voorbeeld). Je doet dit door met de rechtermuisknop op de layer te klikken en voor de optie "Duplicate" te kiezen.

Klik het oogje in het layer venster zodat de eerder gemaakte layer niet meer zichtbaar is.

Nu zien we alleen maar de net gekopieeerde nieuwe Layer. Dubbel klik de Layer (Merk op: vanaf Photosop 7, moet je de Photoshop - The layer effect button-knop klikken). Het Effect venster voor deze layer verschijnt.

Klik op het "down" in het "Bevel and Emboss" venster, geef daarna de style een naam. Dit is de DOWN style voor ALLE knoppen. Hier heb ik Opacity gereduceerd naar 50% voor wat extra effect.

6. Tekst toevoegen.

Natuurlij moeten we een afbeelding en/of tekst op de knop plaatsen anders weten we natuurlijk niet wat deze knop straks gaat doen. Hier gebruiken we alleen tekst als voorbeeld.

Klik op de texttool knop in toolbar (zoals rechts aangegeven staat).

Klik nu op een positie in onze nieuwe knop en type de tekst. Voer bijvoorbeeld het woord "HOME" in. Kies eventueel een lettertype en kleur in de bovenste balk van Photoshop.

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

Vergeet niet dat als je effecten toevoegd, je deze het beste kunt opslaan met "New Style ..." zodat we deze later gemakkelijk terug kunnen vinden voor andere buttons.

Photoshop - een eerste indruk van onze button-style

Het layer venster ziet er ongeveer zo uit:

Photoshop - Layers van de button

Photoshop - selecteer de texttool

Dit bestand kan nu dienen als basi voor alle buttons die je wenst te maken. Je kunt hierbij kiezen voor de optie alle buttons in 1 bestand te maken (export met Ulead SmartSaver heeft hier absoluut geen moeite mee) of voor iedere button een nieuw bestand maken, gebaseerd op dit bestand.

Je kunt de button nu als GIF of JPG opslaan zodat het gebruikt kan worden in jouw webpagina.

Met vriendelijke groet,
Glenn A. Fraller, MCSE (AllExperts.com)
Graphic Applications Specialist

Tip: Het voorbeeld bestand, voor Photoshop, kun je hier downloaden.

 

 


Je bent nu al op de nederlandstalige pagina's Click here to switch to the English pages
Hulp & OverWelkom ... !!GastenboekHulp voor WeetHetWoordenlijst ...Zoeken op het InternetZoeken in WeetHetBeschikbare downloadsNieuws & UpdatesStatistiekenAansprakelijkheidAdverterenDoe mee !!!Vermeldingen/AwardsOver WeetHet ...Hansie goes USAWaar is Hansie?Eerste maandenNieuw thuisUitgaanPuck goes USAMijn nieuwe autoSnapshots PuckRandom snapshotsEindelijk LENTE!Lekkere warme zomerEerste familie bezoekCD's en DVD'sMuziekAudio-DVD naar MP3Muziek CD naar MP3Muziek CD naar WAVKopieer Muziek CDEigen Muziek CDMuziek uit het InternetMP3 Volume aanpassenNero Burning RomBIN/CUE brandenBIN naar ISOComputer CDRomISO brandenFoto VCDFoto SVCDNero vs Nero ExpressNRG naar ISOSVCD brandenSVCD met menuVCD brandenVCD met menuDVD FilmsWat zijn Regiocodes?Wat is MacroVision?Video formatenDIKO: 3 films - 1 DVDHoe werkt een CD?Zelf CDs brandenZelf een DVD makenBIN naar ISONRG naar ISODisk catalogus makenComputer UitlegHoe werkt een CD?Netiquette: E-MailWat is DivX?Wat is MP3?Wat is RAID?Wat is USB?Wat zijn PAR files?Wireless LAN introPC naar TV kabelsXP sneller startenOpstart van USB penFireWire verbind 2 PC'sFoto FormatenGrafisch / Foto'sPhotoshopFoto FormatenSnelle auto3D knoppenBliksem tekenenFotos op CDPictureToTVVideoCD met NeroSVCD met NeroMagix Fotos op CDDVD PictureShowFoto FormatenFoto FormatenGSM / PDAsCompaq iPAQAccu vervangenSeriele craddle op USBGarmin eTrex kabelGarmin eTrex stekkerRonde Garmin stekkerPalmPilotAan Ericsson GSMGarmin eTrex GPSMobiele telefonieEricsson MelodietjesMusicBoxRingtonesMasterA edit SIMSMSC nummersConnector pinoutsHardware & HacksCPU OverklokkenAlgemeenAMD CPU codesAMD Slot-AAMD Socket-ASmartcards Progr.MillenniumAlactel HackLCD display aan PCNetwerk kabelsOpstart van USB penPC naar TV kabelsPromise Ultra -> RAIDSoundblaster MIDIWeerstand kleurenFireWire NetwerkInternetNetwerk algemeenDHCP instellenWin95/98/ME ClientWin2000/XP ClientMac OS 7/8 ClientMac OS X ClientBekende IP-poortenDNS adressenNetwerk kabelsWireless LAN IntroFireWire NetwerkInbel verbindingTCP/IP optimaal Win9xPubliek IP adres?ADSL / MxStreamADSL AlgemeenHoe werkt ADSL?DNS adressenMXStreamInstallerenAnaloog EthernetISDN EthernetRouters en MXStreamSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerProblemen oplossenAlcatel HackHack het modemPassword CalculatorDoel v.d. lampjesProblemen oplossenFirmware upgradeDNS adressenBekende IP-poortenPoorten mappenAutoPortMappingInternet delenMogelijkhedenWinRoute (software)Netwerk Win95/98/MENetwerk Win2000/XPNetwerk Mac OS 7/8Netwerk Mac OS XBekende IP-poortenWireless LAN IntroNetwerk kabelsRoutersSMC 7404 WBRA/BeTech ModemRoutereTech RouterSitecom 4S routerVigor 2200E routerInternet via SatellietHoe werkt het?Korte intro ...Overzicht variantenStandaardBySky methode2-Weg InternetKaart installerenWelke Satellietkaart?PC eisenHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemenNieuwe driversSchotel plaatsen (Astra)Schotel formaat?EON ChecklistTransponders EOLRamdisk voor FazztEigen webpaginaNavigatie oplossingenInzicht en oplossingenApyCom apPopupMenuD.Binard PopupMenuPopupMenu generatorPopupMenu platTips en TruuksE-Mail linkE-Mail FORMFavorieten ToevoegenWebpagina ikoon'Pagina Terug' linkSpringen binnen paginaOntsnap aan framesGebruik frametitelStuur framesAutomatisch doorsturenHet 100% probleemAndere link kleurTekst in de statusbalkAchtergrond vastzettenTekst over plaatjesBrowser veilige kleurenHet .htaccess bestandBijzondere tekensWaar downloadenIRC met mIRCInstalleren mIRCDownload films enzoVragen (FAQ)Films uit het InternetFilm kwaliteitWat zijn PAR files?LeechGuyLeechGuy editoreMuleWinMXE-MailNetiquetteCitaat van de dagOverigenHack Arescom NetDSLWireless LAN IntroFireWire NetwerkBekende IP-poortenWat is mijn IP adres?Zoeken (WeetHet)Zoeken (Internet)WeetHet DownloadsEen paar goede websitesDNS adressenMicroControllersBasic Stamp IIStarten met de BS2Assembleren v.d. kitVolledig schemaAansluiten aan de PCBS2 aan 44780 LCD44780 LCD foto'sBS2 aan M50530 LCDM50530 LCD Foto'sZelfbouw BS2Smartcards/SIMProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumKaart soortenGSM SIM bewerkenWeerstand kleurenMuziek / AudioMuziek van InternetIntroductieLeechGuyLeechGuy editorWinMXeMuleM.b.v. mIRCBIN/CUE brandenBIN naar ISOAudio-DVD naar MP3Hoe werkt een CD?Kopieer muziek CDEigen muziek CDWat is MP3?Muziek CD naar MP3MP3 CD v. Yamakawa?MP3 Volume aanpassenMuziek CD naar WAVSB MIDI interfaceAC3 naar WAV/MP3ProgrammerenBorland DelphiHansie zijn Delphi ToolsAYeah!CatalogCitaat van de dagPopupMenu generatorOverzicht ASCII tekensSatelliet (TV & GPS)Satelliet TelevisieSatelliet TV op de PCTV ontvangst op de PCPC eisenNieuwe driversPentam. Pent@VisionHauppauge DVBs NexusTechnoTrend PCLinePVA file naar MPEG2DirecTV TiVoAfstandsbedieningDirecTiVo naar O6.21: Intro & Images2: TiVo disk in PC3: Installeer OS6.24: Eerste start van OS6.25: SuperPatch & Meer6: Films naar PCTyTools - Films naar PCOud: DirecTiVo naar OS4Oud: Sleeper HackSmartcardsProgrammer Softw.CardMasterInfinityUSBMasterBurnerMilleniumKaart soortenWat is DiSEqC?Schotel plaatsen (Astra)Schotel formaatSRT8000 firmwareGPS NavigatieGarmin eTrexDiagnose modeSeriele aansluitingAan de iPAQ 36/38xxAan een PalmPilotDe eTrex stekkerDe ronde stekkerHoe werkt GPS?Wat is GeoCaching?Internet via SatellietHoe werkt het?Korte intro ...Overzicht variantenStandaardBySky methode2-Weg InternetKaart installerenWelke Satellietkaart?PC eisenHarmonic CyberstreamPentam. Pent@VisionHauppauge DVBs NexusTechnotrend PCLineEOL problemenNieuwe driversSchotel plaatsen (Astra)Schotel formaat?EON ChecklistTransponders EOLRamdisk voor FazztVideoVideo gids - begin hierIntroductieGSpot: AVI InfoDIKO: 3 films - 1 DVDDownload kwaliteitVideo AlgemeenWat is DivX?Video formatenOpname TypesWelke AVI codecs?Intro K(S)VCD/KDVDDVD+RW ProblemenOver bitratesVideoServer pluginWat zijn Regiocodes?Wat is MacroVision?RippenAudio-DVD naar MP3Foto FormatenAVI naar MPEGGSpot: AVI InfoDIKO: 3 films - 1 DVDAVI naar DVD/(S)VCDZonder ondertitelsD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc met AC3Met OndertitelsD.I.K.O.MainConcept (S)VCDNero Vision Express 2TMPGEnc (S)VCDTMPGEnc K(S)VCDTMPGEnc met AC3CD Branden NeroVCD brandenVCD met menuSVCD brandenSVCD met menuBIN/CUE brandenDVD SpelersCompatibiliteitDVD toevoegenDVD+RW ProblemenIntro K(S)VCD/KDVDVideo ToolsBitrate CalculatorDVD RippenGSpot: AVI InfoFlaskMPEG en CCEVideoServer pluginDVD naar DivXIntroductieBitrates berekenenRippenDVDx en SmartRipperDVDx instellingenFlaskMPEG methode 1FlaskMPEG methode 2FlaskMPEG methode 3DVD naar (S)VCDIntroductieBitrates berekenenRippenDVDx en SmartRipperDVDx instellingenFlaskMPEG 0.6 en CCEDVDx en Video ServerDivX naar (S)VCDDVD naar DVDDVD2OneDVDShrinkDVD+RW ProblemenTMPGEnc & CoDIKO: 3 films - 1 DVDFilm Knip & PlakGSpot: AVI InfoSamenvoegenMPEG1 en MPEG2Met TMPGEncWomble MPEG2VCRAVI met VirtualDubKnippenMPEG1 en MPEG2Met TMPGEncWomble MPEG2VCREasy Video SplitterAVI en DIVXAVI met VirtualDubEasy Video SplitterFilms van InternetIntroductieLeechGuyLeechGuy editoreMuleWinMXM.b.v. mIRCWat zijn PAR files?BIN/CUE brandenBIN naar ISOFoto's op CDPictureToTVVideoCD met NeroSVCD met NeroMagix Fotos op CDDVD PictureShowOndertitels RippenVobsub: snel en simpel!SubRip (OCR)SynchroniserenOndertitels weergaveWeergave met VobsubSynchroniserenMaak een MicroDVDPC aan de TVPC naar TV kabelsATI softwarenVidia softwareTiVo - Harddisk VCRTiVo Serie 1Wat is een TiVo?TiVo openmakenSeriele toegangDebug Mode toegangLinux Bash shellInstellen van de klokInbellen uitzettenDirecTV TiVoAfstandsbedieningDirecTiVo naar O6.21: Intro & Images2: TiVo disk in PC3: Installeer OS6.24: Eerste start van OS6.25: SuperPatch & Meer6: Films naar PCTyTools - Films naar PCOud: DirecTiVo naar OS4Oud: Sleeper HackYamakawa 713/715IntroductieVeel gestelde vragenDe AfstandsbedieningGeheime codesRegiocode instellenRegiovrij zettenMacroVision uitStandaard-InstellingenWelke DVDRom driveFirmware versieVerander firmwareDownload firmwareAnder achtergrondMP3 CD makenM.U.F.Y. MP3 CD'sHulpForumZoeken (WeetHet)Zoeken (Internet)NieuwsWoordenlijst ...DownloadsLinksStatistiekenAdverterenDoe mee !!!Gastenboek

Liquid Web Fully Managed Web Hosting