Создание дизайна веб-сайта с нуля
Мы создадим дизайн домашней страницы. В этом уроке мы используем бесплатный шаблон и бесплатную иллюстрацию с Templates.com
Как видите, это очень симпатичный дизайн, с яркими цветами и не перегруженный элементами. Одна из главных черт дизайна – это то, что он являет собой переплетенную с одной стороны книгу. Готовы? Давайте начнем!
Приблизительное время выполнения: 20 минут
Шаг 1
Создайте в Photoshop новый документ с белым фоном. Для этого зайдите в File => New или нажмите “Ctrl+N”.
Шаг 2
Создайте прямоугольник с закругленными углами должного цвета и размера – какого захотите. Я использую зеленый прямоугольник.
Шаг 3
Создайте серый градиент с помощью Gradient tool и непрозрачностью 13% - теперь верхняя часть сайта слегка темнее.
Шаг 4
Затем мы нарисуем желтый эллипс и, наложив на него маску, мы поместим нужную секцию этого эллипса в прямоугольник.
Шаг 5
Примените подходящий стиль к слою с эллипсом: простой Stroke размером 3 пикселя и такой Outer Glow:
Шаг 6
Далее мы создадим меню. Создайте кнопки меню, нарисовав прямоугольник с закругленными углами и стерев некоторые его участки (инструмент select и затем клавиша DEL). Не забудьте для этого растеризовать слои.
Шаг 7
Продублируйте слои с кнопками столько раз, сколько вы хотите кнопок. Затем расположите вертикальную панель подобным образом - прямоугольник с закругленными углами с удаленной левой стороной. Меню почти готово.
Шаг 8
Затем добавьте к кнопкам надписи и маркеры справа (это просто прямоугольники с небольшим outer glow).
Шаг 9
Вы также можете создать перебор для клавиш, он будет отображаться, когда курсор будут наводить на кнопку, это понадобится для флеш-версии сайта. Просто преобразуйте слой и измените цвет его заливки. Не забудьте изменить текст и цвет маркеров в этом случае.
Шаг 10
Теперь нарисуйте места переплета для книги. Линия с двумя кружочками будет над кнопками меню и будет как бы зашнуровывать ваш шаблон наподобие электронной книги. Отверстия для шнуровки простые – просто кружочек (ellipse shape tool) плюс inner shadow.
Шаг 11
Теперь сам шнурок. Он рисуется при помощи эллипса и отрезания лишнего (при помощи маски), оставляя только нужный изгиб.
Затем измените цвет и разместите его на месте, между двумя отверстиями.
Шаг 12
Добавьте текст в заголовок и внизу страницы (и логотип, если хотите). Это все делается при помощи Text tool.
Шаг 13
Теперь нужно встроить иллюстрацию. Откройте скачанный файл в формате PSD и выберите группу слоев номер 7 (это группа в файле, который мы использовали в примере – группа слоев, содержащих здание).
Шаг 14
Перетащите слой на нарисованный вами дизайн и произведите слияние слоев в одну группу – так вам будет удобнее с ними работать. Выделите группу и нажмите Ctrl+E.
Шаг 15
Но подождите – работа ещё не окончена. Нам ещё понадобится добавить небольшую тень к зданию, так оно будет выглядеть более реалистично. Продублируйте слой с иллюстрацией дважды, выберите один из слоев и поставьте их Hue и Saturation на 100 (эти настройки вы найдете в опции “Adjustments of Layer”). Этот слой будет содержать тень для здания.
Шаг 16
Затем выберите верхнюю часть слоя и удалите её
Шаг 17
Примените “Gaussian Blur” (размером 1.7 пикселей) и измените layer fill на 33% - теперь действительно похоже на тень.
Шаг 18
Примените те же шаги ко второму слою, за исключением вырезания верхней части. Этот слой должен быть полностью затенен. Поставьте его непрозрачность на 22%. Это будет вторая тень. Вы также должны трансформировать и исказить вторую тень немного для того, чтобы она выглядела более реалистичной.
Шаг 19
Теперь переместите иллюстрацию на две тени – но соблюдайте порядок слоев. Тени должны быть под первоначальным слоем с иллюстрацией.
Вуаля! Вот и все – при помощи нашего урока дизайн веб-сайта готов!
Источник: Creating a Website Design From Scratch
Популярность: 22%
Похожие уроки photoshop:
- iMouse - Создаем мышь Apple
- Создаем стеклянный шар
- Учимся создавать дизайн различных продуктов в Photoshop
- Добавьте свежести вашему дизайну
- Сложное лого цветка
ВНИМАНИЕ! Столкнулись с трудностями при выполнении данного урока? Осталось что-то, что Вам непонятно? Забыли основы работы в Adobe Photoshop? Не расстраивайтесь! Решение всех Ваших проблем находится прямо здесь: "!" - Это Бесплатный Мультимедиа-Курс от Данного Сайта, пройдя который Вы сможете назвать себя мастером качественной работы в известнейшем графическом редакторе! Узнать о курсе подробнее, а также подписаться на него можно, перейдя на страницу курса: Начальный Курс Photoshop! Подпишитесь и пусть все завидуют тому, как легко и быстро Вы создаете шедевры в Adobe Photoshop! Ждем Вас!
Загрузка ...
Про тень и переплет понравилось. А остальное, знаю :).
Август 12th, 2008
хороший урок, давайте еще по дизайну сайтов уроки.
Август 13th, 2008
Познавательно! Все очень понятно и грамотно. Спасибо автору!
Август 13th, 2008
Хм, ну нарисовали дизайн. А как его потом в .htm документ перевести? Тупой нарезкой на картинки?
Август 17th, 2008
можно и флешкой, как у автора
Август 17th, 2008
Флеш сейчас не актуален и вообще, большинство пользователей любят его отключать.
Ладно, я ниче, урок нормальный, но ТОЛЬКО для фотошопа. Для веб-дизайна никуда не годится.
Август 19th, 2008
большинство пользователей не знают как его включать, не то что выключать
и такие сайты как ютуб помогают включить
Август 19th, 2008
А выключить его помгают… ну конечно, вы догадались… ЭТО Я!!!
Август 19th, 2008
Было бы интересно узнать поподробнее
Август 20th, 2008
ТС: ++
Август 22nd, 2008
В данном случае имхо происходит подмена понятий.
Август 22nd, 2008
Спасибо, интересно было прочитать.
Август 27th, 2008
Опять таки побочная проблема) Врят ли она кому то мешает, мне например как то пофиг
Август 29th, 2008
Отличная статья Спасибо огромное
Август 30th, 2008
+1. Подписался.
Сентябрь 13th, 2008
Люди помогите.. вот сделал я картинку - http://i061.radikal.ru/0812/ac/72e6225ff674.jpg
есть все слои…
как мне переделать в html??
с помощью каких програм?
я полный чайник в этом .
никак немогу найти в интернете.
очень прошу помогите!
Декабрь 21st, 2008
Nazik*
Люди помогите.. вот сделал я картинку - http://i061.radikal.ru/0812/ac/72e6225ff674.jpg
есть все слои…
как мне переделать в html??
с помощью каких програм?
я полный чайник в этом .
никак немогу найти в интернете.
очень прошу помогите!
*
Вот-вот, мало уметь рисовать в фотошопе - нужно еще освоить веб-дизайн. А программ таких (для создания html из рисунка) вроде нету. Самый дельный совет - разбей изображение на картинки (кнопки, лого, элементы дизайна) и изучай HTML (www.rusforumz.com в помощь).
Декабрь 21st, 2008
спасибо и на этом.
Декабрь 21st, 2008
Еще бы научили как резать
Апрель 3rd, 2009
Slice Tool (c) -
чтоб резать )))
Апрель 4th, 2009
Спасибо за статью. Восхищена как всегда
Апрель 7th, 2009
Неплохой урок по созданию сайта для начинающих, да и не помешало бы всё это дело нарезать на отдельные слои
Июнь 18th, 2009
Алексей, читай внимательней, и так делается отдельными слоями потом что нужно склеиваться
Июль 7th, 2009
Просто и совкусом. Большое спасибо за урок.
Декабрь 7th, 2009
Шаг 11
Теперь сам шнурок. Он рисуется при помощи эллипса и отрезания лишнего (при помощи маски), оставляя только нужный изгиб.
Может кто обьяснить зачем маска тут нужна и как это сделать через маску? Ведь можно выделить элипс через ctrl+clik стрелками вправо передвинуть немного выделение и нажать DEL. И получится тоже самое.
Декабрь 27th, 2009
Получился замечательный шаблон. Спасибо за урок.
Март 2nd, 2010