Приветствую Вас Гость

  • Страница 1 из 1
  • 1
Модератор форума: Waden  
Кнопка для сайта в мечтательном стиле.
Waden Дата: Пятница, 30-Май-2008, 19:02 | Сообщение # 1
загрузка наград ...
Сообщений: 4376
Репутация: off
Возраст: загрузка...
OFFline
Очередной урок в программе 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. В довершение я поставил пару бликов мягкой кистью небольшого диаметра и все, наша кнопка в мечтательном стиле готова
Изображение

Автор: Найкрис Кроули.
с сайта: http://planetaphotoshop.ru/


[Как вставить картинку на форум.]
Правила сайта
  Ставрополь
Автор - Waden
Дата добавления - 30-Май-2008 в 19:02

Сообщение Очередной урок в программе 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. В довершение я поставил пару бликов мягкой кистью небольшого диаметра и все, наша кнопка в мечтательном стиле готова
Изображение

Автор: Найкрис Кроули.
с сайта: http://planetaphotoshop.ru/
  • Страница 1 из 1
  • 1
Поиск: