• Acasă
  • Despre
  • Articolele
  • Contactati-ne

: 91 11 9810018780 Mail la: info@aceinfowayindia.com / Call: 91 11 9810018780

  • Articolul scris
  • pe 23.09.2009
  • de la 07:57
  • de admin

Cum se creează i-Phone Ca buton în Photoshop

Hey guys back-to-back Tutoriale Photoshop. In acest tutorial voi învăţa cum să creaţi i-Phone Ca buton in Photoshop. Acest lucru este foarte simplu şi destul de eficiente tutorial. Sper că vă veţi bucura de acest tutorial.

Final Preview

Aceasta este ceea ce am plecat face azi

final-preview-iphone-buttons-big

Pasul # 1

Photoshop Deschideţi şi a crea un nou document, a mea este de 550 × 398px cu un fundal alb.

iphone-like-buttons-step1

Pasul # 2

Completaţi în stratul de culoare de fundal, culoarea mea este # 333333.

iphone-like-buttons-step2

Pasul # 3

Creaţi un nume nou strat stratul de gradientul dunga. Alegeţi Rectangular Marquee Tool si a crea dungă albă.

iphone-like-buttons-step3

Styling Stripe strat dublu-clic pe miniatura Layer dunga scris în Panoul de straturi pentru a deschide caseta de dialog Layer Stiluri, vom aplica un efect vertical gradiant fundal pentru dumneavoastră. Apoi faceţi clic pe gradientul olor c privire la dreptul de opţiune Gradient de a deschide Color Gradient Editor.

iphone-like-buttons-step3-b

Faceţi dublu-clic pe partea stanga-culoare-stop şi introduceţi valoarea de culoare AAAAAA #, dublu-clic pe stanga-centru-culoare-stop şi introduceţi valoarea de culoare # CCCCCC, dublu-clic pe dreapta-centru-culoare-stop şi introduceţi valoarea de culoare # dddddd, apoi dublu-clic pe dreapta-culoare-stop şi introduceţi valoarea de culoare # ffffff.

iphone-like-buttons-step3-a

Ar trebui să arate acest lucru.

iphone-like-buttons-step3-c

Pasul # 4

Selectaţi rotunjite dreptunghi de Instrumentul şi de a crea buton, raza mea este 90X40px.

iphone-like-buttons-step4

Acum, se aplică un anumit efect

Gradient Overlay

Styling buton dublu-clic pe miniatura Layer butonului din Panoul de straturi pentru a deschide caseta de dialog Layer Stiluri, vom aplica un efect vertical gradiant pentru butonul. Apoi faceţi clic pe gradientul de culoare privind dreptul de opţiune Gradient de a deschide Color Gradient Editor.

iphone-like-buttons-step3-b

Faceţi dublu-clic pe stanga-culoare-stop şi introduceţi valoarea de culoare # 000000, dublu-clic pe stanga-centru-culoare-stop şi introduceţi valoarea de culoare # 222222, dublu-clic pe dreapta-centru-culoare-stop şi introduceţi valoarea de culoare # 444444, apoi dublu-clic pe dreapta-culoare-stop şi introduceţi valoarea de culoare # 666666.

iphone-like-buttons-step4-a

Conice şi Emboss

Următoare se aplică şi Bevel Emboss stil strat. Schimbarea stilului de a Outer Bevel, decât schimbarea valorilor de adâncime, dimensiune şi înmuia. Eu aleg pentru a seta adâncimea la 100%, de mărime la 1px şi moleşi la 10px

Parte importantă a acestui Tutorial: Păstraţi unghiul la -90 o, altitudinea de la 40 °

Mod de Highlight: aleg pentru a seta opacitatea la 100%.

Shadow mode: aleg pentru a seta opacitatea la 100%.

iphone-like-buttons-step4-b

Lovitură

În cele din urmă, vom aplica Accident vascular cerebral. În primul rând schimbarea valorilor de mărimea acestora. Să aleg pentru a seta dimensiunea la 1px. Schimbarea poziţia la Inside

Eu aleg pentru a seta opacitatea la 80%.

Modificarea culorii Cursă de la implicit la # 222222

iphone-like-buttons-step4-c

Ar trebui să arate acest lucru.

iphone-like-buttons-step4-d

Pasul # 5

Selectaţi instrument de text şi de tip text pe fata.

iphone-like-buttons-step5

Vom aplica un anumit efect pentru text.

Bevel Emboss

Faceţi dublu-clic pe miniatura stratul de text scris în Panoul de straturi pentru a deschide caseta de dialog Layer Stiluri. Vom aplica Bevel Emboss, Prima schimbarea stilului de a Outer Bevel si Tehnica de foraj la Soft, decât modificarea valorilor de adâncime, Direcţia, dimensiune şi înmuia. Eu aleg pentru a seta adâncimea la 130%, de la Directia Dimensiune în jos la 1px şi moleşi la 0px

Parte importantă a acestui Tutorial: Păstraţi unghiul la 90 o, Altitudine la 30 o

Mod de Highlight: aleg pentru a seta opacitatea la 0%.

Shadow mode: aleg pentru a seta opacitatea la 50%.

iphone-like-buttons-step5a

Final Preview

În cele din urmă am făcut acest tutorial.

Aceasta este ceea ce am plecat face azi

final-preview-iphone-buttons-big

Descărcaţi fişierul sursă

Dacă doriţi să verifice activitatea dumneavoastră, puteţi descărca fişierul PSD pentru acest tutorial.

iPhone-like-buttons.rar (21,3 kb)

Filed under: Photoshop, Tutoriale de admin

Promoveaza-ne

Tag-uri: Photoshop, Tutoriale

Articole înrudite:

în cazul în care aţi bucurat de citirea acestui articol, vă rugăm să verificaţi articole conexe, altele de mai jos:

    • Cum se creează Letterpress Tipografii în Photoshop
    • Cum se creează Smooth Efectul glossy, Text în Photoshop
    • Creaţi un Beautiful Box icon in Photoshop
    • Retro Up Imagine în 2 minute: Photoshop
    • Pop Art Comic Tutorial: Photoshop
Untitled Document

O Comments

  1. aioon spune pe: 23 septembrie 2009, la 5:58 a spus:

    nice one! i like it :)

Trimiteţi un comentariu

XHTML: Puteţi folosi aceste tag-uri: <a href="" titlu=""> <abbr titlu=""> <b> <blockquote cite=""> <cite> <code> < del datetime = ""> <em> <i> <q cite=""> <strike> <strong>


«11 Fonturi Awesome Caligrafie
Developer's Paradise Site-uri de la Săptămâna de 24 septembrie 2009 »
Untitled Document

    Aboneaza-te

  • Aboneaza-te la feed nostru
  • Abonare prin e-mail
  • Urmaţi-ne pe Twitter
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor
  • Sponsor

    • Căuta

      Untitled Document
  • Calendarul

    Septembrie 2009
    O T V T ° ELE ELE
    «Aug
    1 2 3 4 5 6
    7 8 9 10 11 12 13
    14 15 16 17 18 19 20
    21 22 23 24 25 26 27
    28 29 30
    • Pages

      • Acasă
      • Despre
      • Articolele
      • Contactati-ne
    • Categorie

    • CSS (17)
    • Design / Inspiraţie (41)
    • Freebies (21)
    • Graphic Design (9)
    • Photoshop (12)
    • Resurse (19)
    • SEO (1)
    • Instrumente (5)
    • Tutoriale (26)
    • Tipografie (3)
    • Dezvoltare Web (4)
    • Wordpress (5)
    • Arhivele

    • Septembrie 2009
    • August 2009
    • Iulie 2009
    • Iunie 2009
    • Mai 2009
    • Recent Posts

    • Css
    • Design / Inspiraţie
    • Freebies
    • Graphic Design
    • Photoshop
    • Posturi populare

    • Cât de a crea good looking forma fara masa
    • Creaţi un Beautiful Box icon in Photoshop
    • 5 paşi pentru a scrie o mai bună Css
    • Cum se creează Letterpress Tipografii în Photoshop
    • Paradise Developer's Site-uri de la Săptămâna de 10 septembrie 2009
    • Pure Css Dropdown meniu fără folosindu-se JavaScript
    • 6 Drum liber şi de înaltă calitate, Brick Wall texturi
    • Tag cloud

    CSS Design Fonturi Freebies Design Grafic Design de grafica Icoane Inspiraţie Inspitation Photoshop Resurse Instrumente Tutoriale tipografie Web dezvoltare Wordpress

    • Prieteni

      • Abduzeedo
      • Alist Apart
      • Bittbox
      • CrazyLeaf Design
      • Css Tricks
      • David Walsh
      • Fudgegraphics
      • Combustibil creativitatea
      • Ajutor pentru dezvoltatori
      • Instant Shift
      • Line25
      • Mirificampress
      • My Blog de cerneală
      • Noupe
      • PSDFan
      • PSDtuts
      • Share Brain
      • Şase Revizuiri
      • Spoon Graphics
      • Toxel
      • Vandelay Design
      • Suntem Funcţia
      • Web Designer Depot
      • Web Designer Ledger
      • Web designer de perete
      • Tu Designer
    • Traducător

      English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroat flagDanish flagFinnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flagEstonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flag
  • SPONSORII

    Check out UPrinting pe YouTheDesigner.


    Business Cards Online

    Web Design Blog Directory

.
Untitled Document
Back to top

Generale

Aceste Poate de oarecare interes
  • Compania noastra Despre
  • Testimoniale
  • Detalii Contact
  • Blog
  • Social - Twitter, Flickr

Lucrări

Exemple de proiecte din trecut
  • Compania noastra Despre
  • Testimoniale
  • Detalii Contact
  • Blog
  • Social - Twitter, Flickr

Services

Aceasta este ceea ce în cazul în care vinde de azi
  • Compania noastra Despre
  • Testimoniale
  • Detalii Contact
  • Blog
  • Social - Twitter, Flickr

Detalii Contact

Vrei să angajeze noi? a începe aici ...
  • Drum liber Project Assesment
  • E-mail - info@aceinfowayindia.com
  • Tel: 91 11 9810018780

Copyright © 2009, All Right Reserved, Ace Infoway India Închiriez Ace Infoway India, pentru proiectul dumneavoastra de proiectare următoare. Portofoliul nostru de View.