Создание дизайна веб-сайта с нуля
Мы создадим дизайн домашней страницы. В этом уроке мы используем бесплатный шаблон и бесплатную иллюстрацию с 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
Смотрите также:
Про тень и переплет понравилось. А остальное, знаю
.
Август 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
А как HTML написать а !!!!
Апрель 6th, 2010
Кароче…Не проще ли скачать любой дизайн сайта и переделать скрипты тех картинок например шапки (можно все),на свои.И все бует
)
Май 15th, 2010
Очень креатвно! Начинающим верстальшиками
Май 24th, 2010
Шикарный урок! Жаль, три недели у меня не будет времени на это! Очень хочу попробывать!!!!
Май 25th, 2010
Я создавал блок в системе укоза там у них появилися новые шаблоны для красивых блогов, в обще система эта уникальна, и хороша по своему, вот один из примеров созданный на этой системе сайт http://www.web-ms.ru/ дешево и сердито, а самое главное бесплатно не считая домена и оплаченой рекламы.
Всем рекомендую для начала потренироваться там, и создать собственный сайт или блог.
Август 25th, 2010
дериал мне па этот матригодится но вот еще бесплатные уроки по созданию сайта http://sozdaniestranic.ru/om/go/serega/p/webpagecourse
Ноябрь 4th, 2010
да материа мне тоже подайдёт но вот еще бесплатные уроки по созданию сайта http://sozdaniestranic.ru/om/go/serega/p/webpagecourse
Ноябрь 4th, 2010
Здравствуйте.Очень даже симпатичный дизайн.А что нарзать его для кого то проблема? И уж темболее не проблема сделать его на хтмл.Кто возразит?
Январь 13th, 2011
хорошая идея всегда реализуется быстро и достаточно просто. Эта статья ещё одно тому подтверждение.
Ноябрь 2nd, 2011
ребята тупо не понятно для меня первый раз севшего за фотошоп, я понимаю что для вас можно и половины не рассказывать, но как обрезать элипс? какая маска? вы для кого написали это?
Ноябрь 6th, 2011