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

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

  • Articolul scris
  • pe 29.01.2010
  • de la 11:39
  • de admin

Cum se creează Simplu & Slick Blue Button - Photoshop Tutorial

In acest tutorial vom crea butonul albastru simplu & Slick. Acest lucru este foarte simplu şi destul de eficiente tutorial, asa ca tot ce ai nevoie este Adobe Photoshop pentru a crea acest sens. Sper că vă veţi bucura de acest tutorial.



slik-red-button-heading

Pasul # 1

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

slik-red-button-step1a

Pasul # 2

Completaţi în stratul de culoare de fundal, culoarea mea este # 3B3F46.
slik-red-button-step2a

Pasul # 3

Selectaţi rotunjite dreptunghi de Instrumentul şi de a crea buton, a mea este Radius 15px, width: 128px si height: 36px. Schimbaţi culoarea ta prim-plan la un frumos # 13AAB7 (Albastru).
slik-red-button-step2

Pasul # 4

Acum, avem nevoie pentru a adăuga anumite efecte frumos să butonul.

Gradient Overlay

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

În primul rând schimba opţiunea de amestecare la Overlay. Păstraţi unghiul la 90 °, decât modificarea valorilor de opacitate. Eu aleg pentru a seta opacitatea la 50%.

slik-red-button-step4a

Faceţi dublu-clic pe partea stanga-culoare-stop şi introduceţi valoarea de culoare # 000000, apoi dublu-clic pe dreapta-culoare-stop şi introduceţi valoarea de culoare FFFFFF #.

slik-red-button-step4b

Inner Glow

Următoare se aplică stilul strălucirea interioară strat. În primul rând schimba opţiunea de amestecare a Overlay, decât schimbarea valorile opacităţii şi a Dimensiune. Eu aleg pentru a seta opacitatea la 55% şi de mărime la 6px.

Schimbarea de culoare de la strălucirea implicit la # FFFFFF

slik-red-button-step4c

Drop Shadow

Următoare se aplică picătură umbra stil strat. În primul rând schimba opţiunea de amestecare pe Normal. Păstraţi unghiul la 120o, decât schimbarea valorilor de opacitate şi Mărime. Eu aleg pentru a seta opacitatea la 55% şi de mărime la 3px.

slik-red-button-step4d

Ar trebui să arate acest lucru.

slik-red-button-step4

Pasul # 5

Creaţi un alt layer nou, faceţi o selecţie în jurul buton ul original, puteţi face acest lucru prin deţinerea Ctrl apoi făcând clic pe miniatura stratul lui.).

slik-red-button-step5

Se umple de culoare prim-plan la White.

Selectaţi Rounded Rectangle Tool, selectaţi şi ştergeţi jumătatea de jos a stratului de culoare albă pe care tocmai aţi făcut, poate fi necesară pentru a măsura înălţimea butonul dvs. înainte de a şterge o jumătate de jos.

slik-red-button-step5a

Mai întâi trebuie să schimbaţi opţiunea de stratul de modul de a Softlight, decât modificarea valorilor de opacitate. Eu aleg pentru a seta opacitatea la 20%

Pasul # 6

Selectaţi orizontale Tip Tool şi de tip text de pe front.

Finale

slik-red-button-final

Să ne cum că acest tutorial poate fi mai bine? Dacă aţi găsit nici Photoshop alt tutorial pe care doriţi să le împărtăşiţi cu noi, nu ezitaţi să ne înştiinţaţi prin cădere într-un comentariu.

Dacă doriţi să primiţi mai multe tutoriale de la noi, vă rugăm să ia în considerare aderarea la feed noastre prin RSS sau prin e-mail.

Filed under: Photoshop, Tutoriale de admin

Promoveaza-ne

  • Add to Mixx!
Ace Hosting India

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ă Nisa Inset Text Button in Photoshop
    • Cum se creează web buton pe Photoshop + download gratuit PSD Dosar
    • Cum de a crea un simplu buton verde în Photoshop
    • Cum se creează folder icon în Photoshop
    • Cum se creează un Nisa elegant Dark Button in Photoshop
Untitled Document

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>


CommentLuv Enabled arătaţi mai multe
«15 locuri Pentru a download gratuit Twitter Icon Sets
Untitled Document

    Aboneaza-te

  • Aboneaza-te la feed nostru
  • Abonare prin e-mail
  • Urmaţi-ne pe Twitter
  • WooThemes - În cazul în care există un Woo, există o cale!
  • DreamTemplate - template-uri web

    • Căuta

      Untitled Document
  • Calendarul

    Ianuarie 2010
    O T V T ° ELE ELE
    «Dec
    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 31
    • Pages

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

    • CSS (24)
    • Design / Inspiraţie (63)
    • Freebies (52)
    • Graphic Design (12)
    • Photoshop (30)
    • Resurse (45)
    • SEO (1)
    • Instrument (11)
    • Tutoriale (42)
    • Tipografie (6)
    • Web development (6)
    • Wordpress (6)
    • Arhivele

    • Ianuarie 2010
    • Decembrie 2009
    • Noiembrie 2009
    • Octombrie 2009
    • Septembrie 2009
    • August 2009
    • Iulie 2009
    • Iunie 2009
    • Mai 2009
    • Recent Posts

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

    • 5 paşi pentru a scrie o mai bună CSS Partea a II -
    • 21 Big, Bold Tipografii Website Design
    • Cât de a crea good looking forma fara masa
    • Cum se creează Nisa scalabile CSS Bazat Breadcrumbs
    • 20 Exemplu de asomare, Infographics pentru inspiraţie dvs.
    • 33 "Hello" Pagini exemplu, pentru inspiratia
    • 30 Site-uri cu maxim Orange
    • 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
    • Community News

        • Rainbow colorat strălucitoare Text Effect Folosind P Adobe ...

          Unul din nou membru al echipei noastre care arată efortul său în acest tutorial frumos unde poţi învăţa despre "Curcubeul colorat strălucitoare Text Effect", folosind Adobe Photoshop CS3, în acest tutorial am ...

          29 ianuarie 2010
        • 55 + Casă Mac motivat Wallpapers

          Astăzi suntem cu asomarea MAC motivaţi Hi-res imagini de fundal pentru că ne dependent de Apple şi, de asemenea, dragostea de a folosi imagini de fundal, de asemenea, aşa cum am partajarea cu vizitatorii nostri respectate şi de cititori, care sunt într-adevăr b ...

          26 ianuarie 2010
        • Creaţi Lady Birds insectelor Tutorial folosind Adobe Illu ...

          Păsări Lady, este o orice altă insectă care simbolizeaza prosperitatea şi prospetimea naturii mai mult? Puteţi găsi aceste cute fiind aproape oriunde şi ei nu va mai produce nimic, dar noroc. ...

          25 ianuarie 2010
        • 45 Cele mai multe gratuit Wanted iPhone Jocuri

          Eu sunt unul dintre hobby-ul de partajare meu mai vechi, care este de jocuri, dar astăzi în această lume modernă suntem izbitoare cu unele uimitoare şi cele mai căutate jocuri gratuite pentru iPhone, iPhone este ca multimedia, online, telefon inteligent ...

          23 ianuarie 2010
        • 27 lucruri pe care doriţi hilar, au fost Photoshopped

          În acest articol, ne vom uita la astfel de manipulări de fotografie "", care cu siguranta se va lovi că osoase amuzant a ta.

          18 ianuarie 2010
        • Google despre pentru a obţine o Makeover

          "Oricine doreste succesul constantă trebuie să se schimbe în mod constant", şi este ce în ce mai mult şi mai evident că Google subscrie la această şcoală de gândire. Online Marketing Blog este o raportare ...

          11 decembrie 2009
        • Cum de a crea un simplu buton verde în Photoshop

          lui este foarte simplă şi destul de eficiente tutorial. Sper că vă veţi bucura de acest tutorial.

          9 decembrie 2009
    • Add News

      Puteţi trimite link-urile dvs. folosind formularul de mai jos şi ele vor fi aprobate de obicei, în câteva ore.






      Se incarca ...

    • 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.