Buttons maken in PS

[sensor]

Hallo ik wil buttons (knoppen ) zelf maken voor mijn website met ps.
Maar het lukt mij niet de tekst midden in de button te plaatsen.

Ik ga zo te werk: ik open een nieuw dokument in ps en stel de afbeeldingsgrootte in
bijv. 125-30 pixels.
Nu wil ik een tekst in het midden van de button plaatsen (bijv. Home). Echter weet ik niet hoe ik die tekst precies in het midden krijg. Verder wil ik die button dan een 15x
copiëren, weet er iemand de werkwijze?

En ja er zijn ook buttons generators te vinden op het internet, maar ik maak ze liever zelf.

Bedankt alvast

[LesC]

Re: Buttons maken in PS

Ik neem aan dat text en button op dat moment in aparte lagen zitten. Dan moet je gewoon de lagen ten opzichte van elkaar uitlijnen. Zorgen dat die twee lagen geselecteerd zijn in het lagenpallet, en dan via Layer>Align en dan zowel Vertical Centers als Horizontal Centers.



Ik maak een knop aan dmv Rounded Rectangle Tool en pas dan Layer Style Emboss toe.

Eens je dat klaar hebt, dan maak je zoveel kopiën als je wil (b.v. door "dubbeltjes af te pellen" met de Alt toets ingedrukt), maar... allemaal met dezelfde tekst? (want als je bv dan eerst Flatten layers doet, kun je daarna de tekst niet meer aanpassen.

[alex606]

Re: Buttons maken in PS

Zo leert een mens weer iets bij, dit wist ik nog niet,

[sensor]

Re: Buttons maken in PS

Erg bedankt Lesc, hier heb ik wat aan

Ik wil meteen een tiental knoppen maken en later de text invullen.
Ook wil ik een dubbel van al de knoppen maar dan in een ander kleur om later een rollover van te maken.

Dus eerst een tiental witte knoppen, en een tiental rode knoppen en dan de text invoegen.
Ik ga het morgen eens proberen want ik kom nu net van mijn werk.

Groeten Sensor

[sensor]

Re: Buttons maken in PS

Beste Lesc,

de Engelse termen zijn me' toch niet helemaal duidelijk.
Het uitlijnen is gelukt maar wat bedoelt u nu met:

Ik maak een knop aan dmv Rounded Rectangle Tool en pas dan Layer Style Emboss toe.

? Waar vind ik die?
Alsook de uitdrukking :"dubbeltjes af te pellen"

Stel ik wil voorlopig 5

witte

knoppen maken (Home, Route, info, enz...).
Dan begin ik toch met nieuw document en maak de knop aan voorlopig zonder tekst en dan vijf maal . Ik begrijp niet goed de uitdrukking dubbeltjes af pellen
Dan wil ik hetezelfde procédé volgen maar dan met rode knoppen (om later een rollover image te maken)
Als die witte en rode knoppen dan klaar zijn wil ik er later de text opzetten.

bedankt alvast

[LesC]

Re: Buttons maken in PS

OK, ik zal 'ns proberen te helpen.
De rounded rectangle tool is een z.g. "Aangepaste vorm" in Photoshop.

Als je daarmee een button tekent, verschijnt die knop automatisch op een nieuwe laag.
Als je dan de "move" tool kiest (bovenste tool in het gereedschapspallet links) en je drukt de Alt-toets in en je klikt op de reeds gemaakte button en versleept met de muisknop ingedrukt, "pel" je automatisch een kopie af. Die verschijnt als nieuw laag.

In illustratie (1) zie je zo al drie kopies van de originele knop, en daarnaast zie je de lagenstructuur: onderaan de bg (wit) en daarboven die drie knoppen:

Ill.01

Wat "Layer Style Emboss" betekent?
Wel, omdat je met verschillende lagen werkt, kun je ook die lagen een bepaalde laagstijl meegeven. Om een knop te tekenen, moeten we zorgen voor een zekere 'diepte' (of hoogte):
In illustratie (2) laat ik zien waar je die laagstijl kunt vinden. Zorg ervoor dat je eerst op een welbepaalde laag staat, die een getekende knop bevat.

Ill02

De waarden die ik heb ingegeven om die illusie van hoogte/diepte te bekomen, vind je in de volgende illustratie (3):

Ill03

Als je op OK klikt, dan wordt die laagstijl toegepast op die bepaalde laag (dus voor die bepaalde knop).
Ook zo'n laagstijl kun je kopiëren door er in het lagenpallet op dezelfde manier 'een dubbeltje af te pellen', dus met de Alt-toets ingedrukt.
Dit is het eindresultaat voor de drie knoppen, nogmaals met het lagenpallet aan de rechterkant, zodat je goed het verschil ziet tussen illustratie (1) en (4)

Ill04

Hopelijk helpt deze info (misschien ook anderen? ). Anders hoor ik het graag!

(Achteraf gezien, zou ik waarschijnlijk eerst één knop helemaal afwerken, met laagstijl en al, en dan pas "dubbeltjes afpellen". In principe zou je zelfs ook tekst kunnen toevoegen, en achteraf die tekst aanpassen)

[sensor]

Re: Buttons maken in PS

Nogmaals bedankt LesC voor deze prachtige tutorial. Ik laat het weten wanneer het gelukt is.

[LesC]

Re: Buttons maken in PS

Mocht je nog bepaalde vragen hebben, stel gerust. Dan kunnen we het alleen maar duidelijker maken!

[sensor]

Re: Buttons maken in PS

Mocht je nog bepaalde vragen hebben, stel gerust. Dan kunnen we het alleen maar duidelijker maken!

Ja ik heb eigenlijk nog wel een vraagje maar durfde het aanvankelijk niet stellen

Ik snap de tutorial wel hoor maar ik weet nog altijd niet precies hoe ik moet beginnen.
Ik open dus een nieuw dokument en geef de bestandsgrootte op bijv.150 op 34 pixels.
Dan pak ik de aangepaste vorm (afgeronde hoeken). En dan?? Als ik dat opsla dan zit ik toch nog met die resterende hoekjes of achtergrond!?

[LesC]

Re: Buttons maken in PS

Niet bang zijn om vragen te stellen, hoor. Niet dat ik ze allemaal zal kunnen beantwoorden, maar als ik het niet kan, zal iemand anders heus wel aanvullen. Zo werkt nu eenmaal een forum.
Laat ons proberen om stapje voor stapje te werken, en laat ik beginnen met te zeggen dat ikzelf nog nooit knoppen heb moeten ontwerpen, om op een webpagina te gaan gebruiken. Wel werk ik met Apple, en gebruikte ik in het verleden nogal uitvoerig Hypercard, een object-georiënteerde programmeertaal die 'click&go' toepaste "avant la lettre", dus in die zin heb ik wel ooit al knoppen gebruikt.
1. Jouw eerste vraag (tekst centreren op knop) --> opgelost
2. Jouw tweede vraag (hoe zo'n knop styleren + dupliceren) --> opgelost
3. Jouw nieuwe vraag betreft eigenlijk 'het einde van zo'n knop in PS', om te kunnen overbrengen naar je webpagina, niet? Of eventueel (zoals mijn laatste illustratie onderaan) naar een ander doc in PS.

Hoe groot het document is dat je gemaakt hebt, speelt geen rol. Het enige waarvoor we nog moeten zorgen, is dat we onze knop opslaan met een transparante achtergrond, zodat je het later op eender welke achtergrond kunt plaatsen, en toch enkel maar die knop (zonder die hinderlijke, nu witte achtergrond) te zien.

Daarvoor gaan we als volgt te werk.
Onze knop is helemaal klaar:
1. Met de (witte) achtergrondlaag geselecteerd, druk op het aangeduid icoontje om een nieuwe (transparante) laag aan te maken. Die laag komt bovenop de achtergrond te liggen.

2. Sleep nu de witte achtergrondlaag naar de prullenmand van het lagenpallet. De knop ligt nu op een transparante ondergrond.
3. Kies nu de croptool en crop zoals aangegeven in mijn illustratie:

4. Sla het bestandje op als PNG.

5. Om te bewijzen dat je nu enkel je knop hebt opgeslagen, heb ik een nieuw documentje aangemaakt met een bewerkte achtergrond, en daarop, in een laag erboven, de pas aangemaakte knop.

Ziezo! Moeilijk? Nee toch?

[sensor]

Re: Buttons maken in PS

Gelukt LesC.

Het is even oefenen maar uiteindelijk gelukt!

En zoveel mogelijkheden om je knoppen te verfraaien.

Ik denk dat veel mensen en mezelf natuurlijk dankbaar zijn voor deze uitgebreide tutorial


Sensor

[LesC]

Re: Buttons maken in PS

Fantastisch, Sensor!
Nu is het aan jou om je buttons verder te verfijnen.
Blij dat ik je van dienst kon zijn, en hopelijk hebben anderen hier ook nog wat aan!