В этом уроке фотошоп мы с Вами будем учиться делать кнопки для сайта. Для начала попробуем сделать такую простую кнопку для сайта в фотошоп CS5:

[378x55]

1. Создаем в фотошопе новый документ (Ctrl+N). Определяем, для удобства работы, размеры больше, чем наша будущая кнопка для сайта. Задаем прозрачный фон и присваиваем имя документу (к примеру - кнопка).

   [700x469]

2. Выбираем цвет нашей будущей кнопки для сайта. Для этого кликаем левой клавишей мышки по квадрату выбора основного цвета. Откроется палитра цветов (основной цвет). По линейке цветов определяем приблизительный цвет кнопки. Затем в квадрате кликаем на место того цветового оттенка, который будет у нас цветом кнопки. Нажимаем "OK". Можно и просто задать буквенно-цифровой цвет кнопки для сайта.

   [700x625]

3. Определяемся с формой кнопки и выбираем соответствующий инструмент. Я взял инструмент "прямоугольник со скругленными углами" (U). Задаем радиус закругления углов (как это делается,  я писал в уроке "Закругление углов в фотошопе"). Рисуем прямоугольник соответствующий размерам нашей кнопки для сайта. Если Вы даже не угадаете с размерами кнопки для сайта, не переживайте. Вы всегда сможете изменить размер рисунка (Alt+Ctrl+I) когда он будет готов.

   [513x510]

4. Переходим в стили и из того, какие у нас есть стили фотошоп, выбираем самый подходящий. В моем случае эффекты стиля фотошоп изменили задуманный мной цвет кнопки сайта. Не беда, сейчас все поправим.

   [700x342]

5. Дважды кликаем по области справа от превью слоя. Откроется окно "стиль слоя". Галочками будут помечены уже заложенные в стиле фотошопа эффекты. Помечаем галочкой "наложение цвета" и кликаем справа от названия эффекта левой кнопкой мыши. Появится выделение голубым цветом и откроется окно "наложение цвета". Устанавливаем непрозрачность 67%. Кликаем левой клавишей мыши на квадрат справа от режима наложения. Откроется окно выбора цвета перекрытия. В визуальном режиме подбираем желаемый цвет кнопки сайта. Везде нажимаем "OK". В принципе кнопка для сайта готова.

   [700x339]

6. Но давайте добавим кнопке что-нибудь этакое. Ну например маленькую желтенькую кнопочку на одном из краев. Хотя это может быть все, что Вам угодно. Создаем новый слой (Shift+Ctrl+N). Выбираем цвет, как я писал выше. Берем кисть (В), подбираем нужный размер и кликаем там, куда хотим.

   [510x658]

7. Дважды кликаем мышью справа от названия слоя 2. Откроется теперь хорошо нам известное окно "стиль слоя". Вот теперь мы можем поэкспериментировать с эффектами слоя фотошопа. Не забывайте только ставить галочки и активировать эффект. Кстати имея даже стандартный набор стилей фотошопа, Вы сможете таким образом справиться и с задачей создания стиля кнопки для сайта (пункт 4 настоящей статьи).

   [700x373]

8. Теперь нам надо добавить смысловую нагрузку кнопке для сайта. Или попросту текст (T). Из того наличия шрифтов фотошоп, который у нас есть, выбираем что нам нравится и прописываем текст кнопки для сайта. При этом слой текста будет создан автоматически.

   [700x351]

9. Добавляем различных эффектов фотошоп как в пункте 7.

   [698x385]

10. Убираем лишнее пространство холста. Для этого выбираем "изображение" - "тримминг". Откроется окно тримминга. Ставим галочки как у меня и нажимаем "ОК".  Если не все прозрачные пиксели удалились, то это естественно.

    [700x479]

11.  Сохраните кнопку для сайта в формате GIF через "файл - сохранить для веб и устройств".

    [697x535]

12. Можно ставить кнопку на сайт. Проверьте как она работает.

    [378x55]

13. И не только работает, но и играет. Для этого Вам даже не надо проходить урок "сделать кнопку для сайта" по-новому. Просто надо поработать со слоями уже готовой кнопки для сайта, изменить эффекты и сохранить кнопку под новым именем. А вот как разместить кнопку на сайте, тема другого урока в разделе создание сайтов.