Дизайн » Уроки Photoshop » Кнопка для сайта в мечтательном стиле

7
10.01.08
Метки: , ,



Кнопка для сайта в мечтательном стилеОчередной урок в программе Adobe Photoshop, который поможет вам сделать красивый сайт, добавив необычные элементы.

Я решил, что это «мечтательная» кнопка. С этим суждением вы можете и не согласиться, но надеюсь, тот факт, что это очень красивая кнопочка, оспаривать не будете.

Быстренько открываем наш любимый Фотошоп и приступаем к уроку.

1. Создаем новый документ. Задаем ему фон нужного цвета, в моем примере это #0c425d

2. Выбираем инструмент Rounded Rectangle Tool [U]

Кнопка для сайта в мечтательном стиле

c радиусом округления 7px

Кнопка для сайта в мечтательном стиле

И удерживая Shift, чтобы фигура получилась равносторонней, создаем такую вот форму

Кнопка для сайта в мечтательном стиле

3. А теперь к этой форме применяем стили:

Кнопка для сайта в мечтательном стиле

Кнопка для сайта в мечтательном стиле

Кнопка для сайта в мечтательном стиле

Кнопка для сайта в мечтательном стиле

Кнопка для сайта в мечтательном стиле

Манипуляции со стилями очень просты. Это гораздо проще, чем продажа квартир в Евпатории. В итоге получаем форму вот такого вида

Кнопка для сайта в мечтательном стиле

4. Внутри формы рисуем необходимое изображение и применяем к нему эффект тени

Кнопка для сайта в мечтательном стиле

5. Создаем новый слой. Мягкой кистью цвета #7acce0 зарисовываем на нем нижние «углы»

Кнопка для сайта в мечтательном стиле

Вот как выглядит этот слой сам по себе

Кнопка для сайта в мечтательном стиле

6. Удерживая Ctrl кликаем на слой с фигурой, которую создали первой, чтобы выделить ее контуры. Создаем новый слой поверх всех остальных и заливаем выделенную область белым цветом.

Кнопка для сайта в мечтательном стиле

7. С помощью инструмента Elliptical Marquee Tool [M]

Кнопка для сайта в мечтательном стиле

выделяем зону, как показано на рисунке ниже

Кнопка для сайта в мечтательном стиле

жмем клавишу Delete, дабы удалить ненужную часть, которая находится внутри выделенной зоны. Непрозрачность (Opacity) уменьшаем до 30%. Результат:

Кнопка для сайта в мечтательном стиле

8. Как и в шаге № 6, выделяем первую фигуру, создаем новый слой, заливаем выделенную зону градиентом Кнопка для сайта в мечтательном стиле[G] от белого к прозрачному. Непрозрачность (Opacity) уменьшаем до 80%. На рисунке показано, как выглядит эта заливка сама по себе и в целом на кнопке.

Кнопка для сайта в мечтательном стиле

9. В довершение я поставил пару бликов мягкой кистью небольшого диаметра и все, наша кнопка в мечтательном стиле готова

Кнопка для сайта в мечтательном стиле

Автор: Найкрис Кроули.
При использовании материала ссылка на сайт обязательна

Popularity: 1%

Похожие материалы:

Подпишись на rss-обновления, если тебя интересует тема создания дизайна сайтов, верстка и креатив в целом.

7 Комментариев к теме
«Кнопка для сайта в мечтательном стиле»


  1. Shoko_Bender:

    Невероятно простой урок_!!

    Thank you very much_!!

  2. Всегда пожалуйста :)

    Рад, если понравилось

  3. Во блин все так просто

    спосибо

  4. irina:

    Ха... просто , говорите?

    Я вспомнила высказывание небезизвестного Шерлока Холмса , как раз по такому вот поводу :

    «И заметьте, Ватсон — просто стало только после того, как я Вам это подробно объяснил...»

    Спасибо за Ваши уроки!

  5. Сергей:

    Вы знаете,очень рад,что набрел в бескрайних просторах интеренета на ваш сайт.Я сам,правда не так давно,но уже взахлеб начал интересоваться веб-дизайном.Единственное вам пожелание,поменять немного шапку вашего сайта,потому что девушка в платье из воды — небезизвестная порно звезда.Дальше на ваше усмотрение... =)

    • Найкрис:

      известная порно звезда в шапке сайта не спроста, так что всё в порядке ;)

  6. sdaww:

    Точно подмечено, Ирин!

Оставьте комментарий


© 2007—2012 дизайнер Найкрис Кроули
Занятия по раннему музыкальному развитию