-Рубрики

 -Цитатник

Кисти "Пузырьки" - (1)

Пузырьки "Пузырьки" Архив объемом 1,07 Мб можно скачать http://www.unibytes.com/OnYyAJt8y...

Клипарт на прозрачном фоне «1 сентября» (школьный) - (2)

http://img-fotki.yandex.ru/get/9474/20573769.5d/0_94d41_d73a12f3_L.png http://img-fotki.yandex....

Кейп - (2)

Кейп Вот еще вещица, которой я очень горда))). жаккардовый кейп Герда)). Э...

Векторные кошки - (1)

Трафареты кошек Как хорошо, что есть на свете кошки, Которые мечтают на окошке. Проснувши...

Как скачать весь альбом из Яндекс.Фото - (2)

Как скачать весь альбом из Яндекс.Фоток     ...

 -Кнопки рейтинга «Яндекс.блоги»

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 25.01.2009
Записей: 4198
Комментариев: 33416
Написано: 66111

Создание дизайна сайта с нуля - урок фотошоп

Воскресенье, 25 Октября 2009 г. 19:19 + в цитатник

Мы создадим дизайн домашней страницы. В этом уроке мы используем бесплатный шаблон и бесплатную иллюстрацию с Templates.com


Создание дизайна веб-сайта с нуля


Как видите, это очень симпатичный дизайн, с яркими цветами и не перегруженный элементами. Одна из главных черт дизайна – это то, что он являет собой переплетенную с одной стороны книгу. Готовы?


Приблизительное время выполнения: 20 минут



Шаг 1


Создайте в Photoshop новый документ с белым фоном. Для этого зайдите в File => New или нажмите “Ctrl+N”.


Шаг 2


Создайте прямоугольник с закругленными углами должного цвета и размера – какого захотите. Я использую зеленый прямоугольник.


creating-website-subpages-in-photoshop2.jpg


Шаг 3


Создайте серый градиент с помощью Gradient tool и непрозрачностью 13% - теперь верхняя часть сайта слегка темнее.


creating-website-subpages-in-photoshop3.jpg


Шаг 4


Затем мы нарисуем желтый эллипс и, наложив на него маску, мы поместим нужную секцию этого эллипса в прямоугольник.


creating-website-subpages-in-photoshop4_1.jpg


creating-website-subpages-in-photoshop4_2.jpg


Шаг 5


Примените подходящий стиль к слою с эллипсом: простой Stroke размером 3 пикселя и такой Outer Glow:


creating-website-subpages-in-photoshop5_1.jpg


creating-website-subpages-in-photoshop5_2.jpg


Шаг 6


Далее мы создадим меню. Создайте кнопки меню, нарисовав прямоугольник с закругленными углами и стерев некоторые его участки  (инструмент select и затем клавиша DEL). Не забудьте для этого растеризовать слои.


creating-website-subpages-in-photoshop6.jpg


Шаг 7


Продублируйте слои с кнопками столько раз, сколько вы хотите кнопок. Затем расположите вертикальную панель подобным образом - прямоугольник с закругленными углами с удаленной левой стороной. Меню почти готово.


creating-website-subpages-in-photoshop7.jpg


Шаг 8


Затем добавьте к кнопкам надписи и маркеры справа (это просто прямоугольники с небольшим outer glow).


creating-website-subpages-in-photoshop8.jpg


Шаг 9


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


creating-website-subpages-in-photoshop9.jpg


Шаг 10


Теперь нарисуйте места переплета для книги. Линия с двумя кружочками будет над кнопками меню и будет как бы зашнуровывать ваш шаблон наподобие электронной книги. Отверстия для шнуровки простые – просто кружочек (ellipse shape tool) плюс inner shadow.


creating-website-subpages-in-photoshop10.jpg


Шаг 11


Теперь сам шнурок. Он рисуется при помощи эллипса и отрезания лишнего (при помощи маски), оставляя только нужный изгиб.


creating-website-subpages-in-photoshop11_1.jpg


Затем измените цвет и разместите его на месте, между двумя отверстиями.


creating-website-subpages-in-photoshop11_2.jpg


Шаг 12


Добавьте текст в заголовок и внизу страницы (и логотип, если хотите). Это все делается при помощи Text tool.


creating-website-subpages-in-photoshop12.jpg


Шаг 13


Теперь нужно встроить иллюстрацию. Откройте скачанный файл в формате PSD и выберите группу слоев номер 7 (это группа в файле, который мы использовали в примере – группа слоев, содержащих здание).


creating-website-subpages-in-photoshop13.jpg


Шаг 14


Перетащите слой на нарисованный вами дизайн и произведите слияние слоев в одну группу – так вам будет удобнее с ними работать. Выделите группу и нажмите Ctrl+E.


creating-website-subpages-in-photoshop14.jpg


Шаг 15


Но подождите – работа ещё не окончена. Нам ещё понадобится добавить небольшую тень к зданию, так оно будет выглядеть более реалистично. Продублируйте слой с иллюстрацией дважды, выберите один из слоев и поставьте их Hue и Saturation на 100 (эти настройки вы найдете в опции “Adjustments of Layer”). Этот слой будет содержать тень для здания.


creating-website-subpages-in-photoshop15.jpg


Шаг 16


Затем выберите верхнюю часть слоя и удалите её


creating-website-subpages-in-photoshop16.jpg


Шаг 17


Примените “Gaussian Blur” (размером 1.7 пикселей) и измените layer fill на 33% - теперь действительно похоже на тень.


creating-website-subpages-in-photoshop17.jpg


Шаг 18


Примените те же шаги ко второму слою, за исключением вырезания верхней части. Этот слой должен быть полностью затенен. Поставьте его непрозрачность на 22%. Это будет вторая тень. Вы также должны трансформировать и исказить вторую тень немного для того, чтобы она выглядела более реалистичной.


creating-website-subpages-in-photoshop18.jpg


Шаг 19


Теперь переместите иллюстрацию на две тени –  но соблюдайте порядок слоев. Тени должны быть под первоначальным слоем с иллюстрацией.


Создание дизайна веб-сайта с нуля


Вуаля! Вот и все – при помощи нашего урока дизайн веб-сайта готов!


Источник: Creating a Website Design From Scratch

Рубрики:  Уроки photoshop, corel draw, gimp
Метки:  

Процитировано 13 раз



pappesa   обратиться по имени Воскресенье, 25 Октября 2009 г. 19:22 (ссылка)
Добрый вечер! Спасибо за урок!
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 19:29ссылка
pappesa, не за что!
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 19:32ссылка
Pechalnaya_ya, а вот и двоечник подоспел,красота*
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 19:36ссылка
FIERWIND, привет! Нет, ты не двоечник, никогда не поверю)))
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 19:41ссылка
Pechalnaya_ya, точно двоечник,это я прикидываюсь отличником,меня даже в школе из 3го кл,сразу в 5 й перевели,что бы поскорее избавиться*
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 19:46ссылка
FIERWIND, ну опять за рыбу деньги.
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 19:52ссылка
Pechalnaya_ya, я ни чего не понял,но твой ответ беру в цитатник,не в свой,в чужой*
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 20:18ссылка
FIERWIND, это поговорка такая.
опять двадцать пять за рыбу деньги:выражение неодобрения возврату к давно известному решённому вопросу. Например:- Деда, а на этой твоей заимке интернет есть? - Опять двадцать пять за рыбу деньги! Там и электричества нету, внучек! И сотовый ловить не будет! И туалет на улице!
Я про то что ты не двоичник, а ты опять за свое - двоичник и все тут.
Перейти к дневнику

Воскресенье, 25 Октября 2009 г. 20:22ссылка
Pechalnaya_ya, вот теперь ты убедилась какой я недалекий,поговорку и то не понял с первого раза*
Савинка   обратиться по имени Понедельник, 26 Октября 2009 г. 21:15 (ссылка)
Возьму на вооружение! Муж как раз собрался сайт сделать!
Ответить С цитатой В цитатник
Перейти к дневнику

Понедельник, 26 Октября 2009 г. 21:18ссылка
Савинка, рада, что сгодиться. А я вот сайты все по старинке ваяюю, табличным способом))))
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку