• Дом
  • За
  • Членове
  • Реклама
  • Свържете се с нас

: 91 11 9810018780 Поща на адрес: info@aceinfowayindia.com / Покана: 91 11 9810018780

  • Статията е написана
  • на 29.01.2010
  • в 11:39 ч.
  • от администратор

Как да се създаде проста & отворко синия бутон - Photoshop Инструкция

В този урок ние ще се създаде проста & гладък син бутон. Това е много проста и доста ефективен начинаещи, така че всичко, което се нуждаете е Adobe Photoshop за създаване на този ефект. Надявам се, че ще се насладите на този урок.



slik-red-button-heading

Стъпка # 1

Отворете Photoshop и създайте нов документ, моята е 550px × 125px с бял фон.

slik-red-button-step1a

Стъпка # 2

Напълнете цвят във фонов слой, моя цвят е # 3B3F46.
slik-red-button-step2a

Стъпка # 3

Изберете Rounded Rectangle Tool и да създадете бутон, мина радиус е 15px, ширина: 128px и височина: 36px. Промяна на цвят на преден план хубав # 13AAB7 (Blue).
slik-red-button-step2

Стъпка # 4

Сега ние трябва да добавите някой хубав ефекти върху бутона.

Gradient Overlay

Стайлинг на бутон двойно кликване върху картинката с бутони слой в Layers панел за отваряне на Layer стилове диалоговия прозорец ще се прилага Вертикален градиент ефект за вашия бутон. След това кликнете на цветния градиент на правото на градиента опция за отваряне на Color Gradient Editor.

Първа смяна на възможност за смесване на Overlay. Съхранявайте ъгъл на 90o, отколкото промяна на стойностите на коефициента на непрозрачност. Аз избирам да настроите Opacity на 50%.

slik-red-button-step4a

Двоен-щракване на ляво-цвят-спрете и въведете стойност цвят # 000000, щракнете двукратно щракване на десния цвят-спрете и въведете стойност цвят # FFFFFF.

slik-red-button-step4b

Inner Glow

Следваща прилагат стил вътрешен слой блясък. Първа смяна на възможност за смесване на Overlay, отколкото промяна на стойностите на коефициента на непрозрачност и размер. Аз избирам да настроите непрозрачност на 55% и размер на 6px.

Промяна на цвета светлина от по подразбиране на # FFFFFF

slik-red-button-step4c

Drop Shadow

Следваща прилагат капка стил слой сянка. Първа смяна на смесване възможност за Нормално. Съхранявайте на 120o ъгъл, отколкото промяна на стойностите на коефициента на непрозрачност и размер. Аз избирам да настроите Opacity на 55% и в размер 3px.

slik-red-button-step4d

Трябва да изглежда така.

slik-red-button-step4

Стъпка # 5

Създайте друг нов слой, направете селекция около оригиналния бутон, можете да направите това, като държите Ctrl после щракнете върху картинка на слой.).

slik-red-button-step5

Напълнете цвят преден план на бяло.

Изберете Rounded Rectangle Tool, изберете и изтриете долната половина на белия слой просто прави, може би трябва да се измери височината на вашия бутон, преди заличаване на долната половина.

slik-red-button-step5a

Първо трябва да промените опцията режим слой Softlight, отколкото промяна на стойностите на коефициента на непрозрачност. Аз избирам да настроите непрозрачност на 20%

Стъпка # 6

Изберете Horizontal Type Tool и въвеждате текст на предната част.

Окончателна

slik-red-button-final

Нека се знае, че този урок как може да бъде по-добре? Ако сте намерили друг Photoshop настойнически, които искате да споделите с нас, не се колебайте да ни уведомите от отпадане в коментар.

Ако бихте искали да получите повече уроци от нас, моля, помисли абонирате за нашия емисия от RSS или чрез имейл.

Пила под: Photoshop, уроци от администратор

Насърчаване нас

  • Добави към Mixx!
Асо Хостинг Индия

Tags: Photoshop, Помагала

Свързани членове:

Ако ви хареса прочетете тази статия, моля, проверете други предмети, свързани по-долу:

    • Как да създадете Ница добавям текст бутон на Photoshop
    • Как да създадете уеб бутон на Photoshop + Download Свободен PSD File
    • Как да се създаде проста зеления бутон в Photoshop
    • Как да създадете папка икона в Photoshop
    • Как да създадете Ница Изящен Dark бутон на Photoshop
Untitled Document

2 Коментари

  1. favSHARE казва на: 30 януари 2010 година в 9:10 ч., заяви:

    Тази статия е била споделена по favSHARE.net. Иди и го гласува!
    Последна favSHARE блог .. Правете пари онлайн с домейн пазаруване Моят ComLuv Профил

  2. 50 + Пресни Полезни мнения за дизайнери и програмисти | Afif Фатух - Уеб Специалист казва на: 2-ри Февруари, 2010 в 7:50 ч., заяви:

    [...] Как да се създаде проста & отворко синия бутон - Photoshop Инструкция [...]

Изпращане на коментар

XHTML: Можете да използвате тези тагове: <a href="" title=""> заглавие=""> title=""> буквата title=""> <b> <blockquote викам <cite> <code> < дел DateTime = ""> <em> <i> <q cite=""> <strike> <strong>


CommentLuv Enabled > повече
«15 места да изтеглите свободно Twitter Икона Комплекти
Developer's Paradise Сайтове на седмицата за 30 януари 2010 »
Untitled Document

    Абонамент

  • Абонирайте се за нашия емисия
  • Абонамент по имейл
  • Следвайте ни на нервна възбуда
  • WooThemes - Когато е Woo, има начин!
  • DreamTemplate - Уеб шаблони

    • Търся

      Untitled Document
  • Календар

    Януари 2010
    М Т З Т F S S
    «Декември Февруари »
    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
    • Страници

      • Дом
      • За
      • Членове
      • Реклама
      • Свържете се с нас
    • Категории

    • Css (27)
    • Дизайн / Вдъхновение (69)
    • Freebies (62)
    • Графичен дизайн (12)
    • Photoshop (33)
    • Ресурси (53)
    • Seo (1)
    • Инструменти (15)
    • Уроци (44)
    • Книгопечатане (6)
    • Уеб развитие (6)
    • Wordpress (6)
    • Архив

    • Март 2010
    • Февруари 2010
    • Януари 2010
    • Декември 2009
    • Ноември 2009
    • Октомври 2009
    • Септември 2009
    • Август 2009
    • Юли 2009
    • Юни 2009
    • Май 2009
    • Нова Постове

    • Css
    • Дизайн / Вдъхновение
    • Freebies
    • Графичен дизайн
    • Photoshop
    • Популярни Постове

    • Как създавате добре изглеждащи форма без маса
    • 21 Голям, Bold Типография Уебсайт дизайн
    • 5 стъпки към по-добро Напиши CSS част II
    • Как да създадете Ница Scalable CSS базата сте тук
    • 20 Пример за нова Infographics За вдъхновение
    • 33 "Здравей" Страници пример за вдъхновение
    • 10 Яки Изображение Оптимизация Инструменти
    • Етикет облак

    Css Дизайн Шрифтове Freebies Графичен дизайн Графичен дизайн икони Вдъхновение Inspitation Photoshop ресурси Инструменти Помагала Типография Уеб развитие Wordpress

    • Приятели

      • Abduzeedo
      • Освен Alist
      • Bittbox
      • CrazyLeaf Дизайн
      • Css трикове
      • Дейвид Уолш
      • Fudgegraphics
      • Гориво креативността си
      • Помощ за разработчици
      • Незабавно Shift
      • Line25
      • Mirificampress
      • Мастило Моят блог
      • Noupe
      • PSDFan
      • PSDtuts
      • Сподели Мозъчен
      • Шест Ревизии
      • Лъжица Graphics
      • Toxel
      • Vandelay Дизайн
      • Ние функция
      • Уеб дизайнер Депо
      • Уеб дизайнер Леджър
      • Уеб дизайнер стена
      • Можете проектант
    • Новини

        • 35 Уеб сайтове, които използват iPhone като част от техните г ...

          Така че след часове на търсенето в интернет и да мисля за това, което ми следващия пост ще бъде, аз започнах да виждам много сайтове, които използват iPhone като част от тяхното проектиране. Това не е изненада за мен knowin ...

          5-ти март, 2010
        • LogoBee Намалява лого дизайн време за доставка

          За да успокои нарастващото търсене, LogoBee стартира нов обрат пъти по-бързо за първоначални проби, лого дизайн. Председателят на LogoBee Павел Rokhmanko, че те са получавали много искания за Годен до ...

          4-ти март 2010 година
        • 40 Красива MAC OS X и iPhone Вдъхновен Icon Set ...

          Ние винаги присъстват качествени неща за нашите читатели и посетители, ние също така създаване на красива панорама "40 Красива MAC OS X и iPhone Вдъхновен Икона Комплекти", те са по-добри, защото всички изброени stuf ...

          2-ри март, 2010
        • 7 'Отидете в началото "Jquery решения

          В този пост ще откриете седем Jquery решения, които позволяват на посетителите да си гладко превъртете надясно до горната част на страницата, което прави вашия уебсайт по-удобни за ползване.

          28-ми февруари 2010 година
        • 35 Последен Полезно андроид приложения

          Andriod (Google Mobile операционна система) пазарът се разраства с всеки изминал ден, тъй като това ОС дава много потребител приятелски приложения, някои от тези листинг днес като нашите посетители и читатели на търсенето. Android на ...

          26-ти февруари 2010 година
        • 40 Наистина професионално изглеждащи лого дизайн Tutoria ...

          Компании, винаги се основава на корпоративна идентичност, лого винаги играе най-важна роля за успеха всяка марка или фирма, особено когато говорим за една известна марка първото нещо, което идва ...

          25-ти февруари 2010 година
        • 30 якото Минималистични печатни реклами

          Минималистични реклами са някои от най-готините дизайн печат наоколо. С приемането на умишлено прост подход, дизайнерът дестилира съобщение на рекламата и трябва да намерим най-сложни знаци и думи за сътрудничество ...

          25-ти февруари 2010 година
    • Добави новина

      Можете да подадете своята връзките по-долу като се използва формата и те обикновено ще бъдат одобрени в рамките на няколко часа.






      Loading ...

    • Преводач

      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
  • СПОНСОРИ

    Проверете UPrinting на YouTheDesigner.


    Визитни картички онлайн

    Web Design Blog Directory

.
Untitled Document
Върнете се в началото

Обща

Това може би на някакъв интерес
  • ЗА НАС
  • Препоръки
  • Лице за контакти &
  • Блог
  • Социални - Twitter, Flickr

Работнически

Примери от последните проекти
  • ЗА НАС
  • Препоръки
  • Лице за контакти &
  • Блог
  • Социални - Twitter, Flickr

Услуги

Това е, което продава, където днес
  • ЗА НАС
  • Препоръки
  • Лице за контакти &
  • Блог
  • Социални - Twitter, Flickr

Лице за контакти &

Искате ли да ни наемат? за да започнете тук ...
  • Безплатен проект Оценка
  • Имейл - info@aceinfowayindia.com
  • Тел: 91 11 9810018780

© 2009, Всички права запазени, Асо Infoway Индия под наем Асо Infoway Индия за следващия си архитектурен проект. Преглед на нашия портфейл.