06.12.07
Метки: photoshop, веб-дизайн, уроки фотошоп
Предлагаю вашему вниманию урок фотошоп по теме «создание дизайна сайта», в котором будем учиться делать симпатичные кнопки для сайта, интернет-магазина, блога и т.д.
Создаем новый документ. Фон и размер значения не имеют.
Делаем заготовку.
С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle) рисуем такую фигуру. У меня радиус закругления 5 пикселей.
Теперь, используя «Эллипс» и удерживая Shift, рисуем круг, который налаживается поверх прямоугольника. Приблизительно так:
Удерживая CTRL, кликаем на слой с кругом, чтобы выделить его.
Далее идем:
Выделение — Модификация — Сжать(5 пикселей)
Select — modify — contract
Создаем новый слой и заливаем его любым цветом.
Ту же операцию проделываем с прямоугольником. После того, как залили и это выделение, снова кликайте на слой с кругом (который больше) и нажмите Delete. Должно получиться так:
Соединяем слои круга и прямоугольника (большие). Применяем к ним эффект:
К меньшему кругу и обрезанному прямоугольнику применяем такие настройки:
Процесс создания кнопки похож какую-то детскую игрушку, вроде пазла или конструктора лего. Получилось вот такое:
Добавление деталей.
Выделяем обрезанный прямоугольник.
Опять сжимаем выделение, на этот раз на 2 пикселя.
С помощью инструмента «Выделение», с такими настройками
, удаляем нижнюю часть выделения.
Прошу прощения за многочисленную тавтологию...
Создаем новый слой и заливаем выделенную область белым цветом. Уменьшаем «Непрозрачность» (Opacity) до 20%
Подобные манипуляции проделываем и на круглой части кнопки, чтобы и там добавить бликов.
Добавляем картинку и текст. В настройках для нижнего слоя можно добавить тень, по вкусу.
Кнопка готова
Вот и другие варианты, выполненные по данному методу.
Надеюсь, пригодится.
Спасибо за внимание, встретимся после перерыва... И не дай бог кто-то решит прогулять следующий урок photoshop!
Автор: Найкрис Кроули.
При использовании материала ссылка на сайт обязательна
крепеж
космические хроники
Popularity: 98%
Здорово. Спасибо за уроки. Блин — была куча вопросов по работе с фотошопом, щас и не вспомнить, что конкретно хотелось бы узнать. Единственное, что хочется узнать, да и наверное не мне одному — раскажите, как делать в фотошопе, анимированные баннеры? желательно красивые, и желательно также с наглядными примерами. ?
Заранее спасибо.
Андроид, вспоминай все, что хотел, обязательно отвечу!
А насчет анимации в фотошопе — будет! Давно хотел, но небыл уверен, что нужно. А коль такие дела, то не буду медлить. В ближайшие день-два опубликую
Я это все таки сделал_!!
правда, из за того что Вы некоторые вещи не объяснили, было трудно пока сам найду_!!
Спасибо за урок, убил пару лишних часов_!!
А что я упустил, о чем не рассказл, где возникли затруднения?
вот вопрос как с помощью Html сделать чтобы при наведение на кнопку скажем напдпись меня свой цвет а при нажатие казалось бутто реально кнопка нажата ???
При наведении как сделать, я описывал тут
naykris.com/menyu-dlya-sajta-svoimi-rukami/
чтобы при нажатии менялось изображение, я делал когда-то с помощью яваскриптов, но как мне кажется, это лишний эффект. Хотя, если сильно нужно, могу поискать.
У меня почему то не получается:((
Мне частенько приходилось рисовать кнопки, стали надоедать однообразные операции, поэтому написал простенькую программку: vmaya.ru/button/ , это конечно не идеал, но здорово помогает если по быстрому требуется незатейливая кнопка.
очень интересно получилось, думаю будет полезно людям, которые не пользуются фотошопом
снова кликайте на слой с кругом (который больше) и нажмите Delete. Должно получиться так:
помоему сдесь неточность
Уточните пожалуйста
Ту же операцию проделываем с прямоугольником.
что за операция то? вот я выделил всё, новый слой сделал, дальше не понимаю что нужно делать
У меня не получактся
Select — modify — contract
modify — невозможно нажать
почему?
не важно...все понятно)
Огромное спасибо за подробное описание. Очень пригодились ваши советы.
Давно хотел научиться градиент делать. На выходных попробую, иконки буду рисовать для своего сайта. Хотя инструкция устарела за несколько лет — идея понятна, должен разобраться