Fetstil Fetstil Kursiv Understrykning linje färgläggning tabellverk Punktlista Nummerlista Vänster Centrerat högerställt Utfyllt Länk Bild htmlmode
  • Forum & Blog
    • Forum - översikt
      • .Net
        • asp.net generellt
        • c#
        • vb.net
        • f#
        • silverlight
        • microsoft surface
        • visual studio .net
      • databaser
        • sql-server
        • databaser
        • access
        • mysql
      • mjukvara klient
        • datorer och komponenter
        • nätverk, lan/wan
        • operativsystem
        • programvaror
        • säkerhet, inställningar
        • windows server
        • allmänt
        • crystal reports
        • exchange/outlook
        • microsoft office
      • mjukvara server
        • active directory
        • biztalk
        • exchange
        • linux
        • sharepoint
        • webbservers
        • sql server
      • appar (win/mobil)
      • programspråk
        • c++
        • delphi
        • java
        • quick basic
        • visual basic
      • scripting
        • asp 3.0
        • flash actionscript
        • html css
        • javascript
        • php
        • regular expresssion
        • xml
      • spel och grafik
        • DirectX
        • Spel och grafik
      • ledning
        • Arkitektur
        • Systemutveckling
        • krav och test
        • projektledning
        • ledningsfrågor
      • vb-sektioner
        • activeX
        • windows api
        • elektronik
        • internet
        • komponenter
        • nätverk
        • operativsystem
      • övriga forum
        • arbete karriär
        • erbjuda uppdrag och tjänster
        • juridiska frågor
        • köp och sälj
        • matematik och fysik
        • intern information
        • skrivklåda
        • webb-operatörer
    • Posta inlägg i forumet
    • Chatta med andra
  • Konto
    • Medlemssida
    • Byta lösenord
    • Bli bonsumedlem
    • iMail
  • Material
    • Tips & tricks
    • Artiklar
    • Programarkiv
  • JOBB
  • Student
    • Studentlicenser
  • KONTAKT
    • Om pellesoft
    • Grundare
    • Kontakta oss
    • Annonsering
    • Partners
    • Felanmälan
  • Logga in

Hem / Artiklar / Titel på artikeln

Hur du skapar en Aqua-knapp med photoshop

Postad 2002-11-23 av Stefan Persson i sektionen ASP.NET, C#, Okategoriserat med 0 Kommentarer | Läst av: 10929, Betyg: 71%

Förord

Här kommer jag guida dig steg för steg genom hela processen för att skapa en såkallad Aqua-knapp i Photoshop. Jag har dessväre bara en engelsk version så alla verktygens namn kommer att stå på engelska, men jag tror bilderna kommer hjälpa er hitta rätt.
Innehåll
  » Introduktion
  » Steg #1
  » Steg #2
  » Steg #3
  » Steg #4
  » Steg #5
  » Steg #6
  » Om skribenten
Relaterade artiklar
  » Hur man ritar rör med photoshop


Introduktion

Jag skall här snabbt visa er vilka verktyg jag har använt mig av och var ni hittar dem.


Notis:
Vissa värktyg ligger på samma plats som andra och genom att hålla ner vänster musknapp kommer en meny fram där man kan välja mellan de olika.


  • Elliptical Marquee Tool
  • Gradiant Tool





Notis:
I tidigare versioner av photoshop kan verktygen befinna sig på andra platser (tror inte dom gjorde det dock.) men namnen är desamma



Steg #1

Skapa en nytt bild object som är 200px*200px och med vit bakgrund.




Notis:
Klicka på "File" -> "New". Sätt sedan Width och Height till 200 Pixels och markera alternativet "Contents" = white



Steg #2

Här skall vi använda oss utav "Elliptical Marqee Tool" och makera det område vi skall använda till vårat rör. Jag väljer att göra markeringen ca 100px bred men detta kan man naturligtvis ändra på för att det skall passa ens behov.




Steg #3

Nu är det då dax att använda "Gradiant Tool". Välj de två färger du vill ha på Aqua-knappen. Jag använde mig utav en blå och en ganska mörk bål. Detta får ni exprementera lite med för att få önskat resultat men tänk bara på att det skall vara samma färg (Blå till mörk blå). När du markerat "Gradiant Tool" kommer du att se en meny för detta värktyg längst upp under photoshops egna menyer (File | Edit...). Markera det alernativ som bilden under visar. (Linear Gradiant)

Sedan så klickar du överst på ditt markerade fält och drar tills du kommer till slutet av det markerade fältets motsatta sida. (Se förklarande bild nedan)






Steg #4

Nu skapar du ett nytt "layer". Layers hittar du oftast längst ner till höger i photoshop. (Se nedanstånde bild)

Klicka nu på "New Layer" för att skapa ett ny och markera sedan det nya genom att klicka på det.


Notis:
Om inte "layers" fönstrett är frame klicka på "Window" -> "Layers"



Steg #5

Nu skall vi skapa det vita fältet som ger en 3d liknande efeckt på knappen. (Detta skall göras i det nya lagres vi skapade)
Nu använder vi oss av "Gradiant Tool" igen men först väljer vi vit som fram färg. Sedan ändrar du så det blir vit till transparent genom att klicka på den lilla pilen bravid färgerna på "Greadiant Tool" (Se nedanstånde bild)

Nu skall vi ändra lite på våran markerade ring. Välj "Select" i menyn och sedan "Modify" -> "Contract". Sätt värdet till ca 10 (Detta varierar något beronde på hur stor ring man har). Sedan väljer du "Select" igen och "Feather" detta värdet skall vara ungefär hälften av "Contract" altså ca 5. När du gjort dessa ändringar väljer du "Greadiant Tool" och gör som i steg 3. Resultatet skall bli som nedanstånde.




Steg #6

Nu har du en aqua-knapp. Om du vill kan du tona ner det vita fältet genom att välja det lagret och sätta "Opacity" till något mindre än 100%


Notis:
För att lättare få en rak linje kan du testa att hålla ner "Shift".


Nu har du skapat din förmodligen första aqua-knapp i photoshop. Här kommer ett exempel på vad man kan göra med tekniken.








Om skribenten

Stefan P. är med och utvecklar swedish-mushroom.com där han har hand om bakomligande asp och javascript programering samt enstaka grafiska delar.

Han nås på zwork@home.se för vidare frågor.
eller kanske ett besök på hans "VaPPa MEDIA" sida.
Upp

0 Kommentarer

Skriv en kommentar på artikeln

Ditt betyg på artikeln



Kommentar:





Nyligen

  • 18:42 Hvor finder man håndlavede lamper
  • 18:41 Hvor finder man håndlavede lamper
  • 16:36 Allt du behöver veta om keramiskt
  • 16:14 Vem anlitar man egentligen när tak
  • 16:14 Vem anlitar man egentligen när tak
  • 16:13 Vem anlitar man egentligen när tak
  • 11:52 Noen erfaring med uttak hos Mostbe
  • 11:51 Noen erfaring med uttak hos Mostbe

Sidor

  • Hem
  • Bli bonusmedlem
  • Läs artiklar
  • Chatta med andra
  • Sök och erbjud jobb
  • Kontakta oss
  • Studentlicenser
  • Skriv en artikel

Statistik

Antal besökare:
Antal medlemmar:
Antal inlägg:
Online:
På chatten:
4 570 581
27 958
271 741
6 063
0

Kontakta oss

Frågor runt konsultation, rådgivning, uppdrag, rekrytering, annonsering och övriga ärenden. Ring: 0730-88 22 24 | pelle@pellesoft.se

© 1986-2013 PelleSoft AB. Last Build 4.1.7169.18070 (2019-08-18 10:02:21) 4.0.30319.42000
  • Om
  • Kontakta
  • Regler
  • Cookies