Все уроки Фотошоп

Есть вопрос? Задайте здесь и сейчас!

Форум Регистрация Выслать активацию Восстановить пароль Дополнительно Файлы Видео Галереи Справка  
Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Создание гранжевого сайта для фотографа, Create a grunge photographer layout

Перезагрузить страницу Страна Фотошопия Adobe Photoshop. Фотошоп и все, с ним связанное >> Обучение Adobe Photoshop >> Необработанные уроки Photoshop >>

Создание гранжевого сайта для фотографа, Create a grunge photographer layout


 
Опции учебника
Создание гранжевого сайта для фотографа, Create a grunge photographer layout

Предыдущий учебник Создание гранжевого сайта для фотографа, Create a grunge photographer layout Следующий учебник
Опубликовал(а) Gostemilov
20.06.2015
Создание гранжевого сайта для фотографа, Create a grunge photographer layout


Create a grunge photographer layout



В этом уроке мы попытаемся создать дизайн сайта для фотографа. Для его создания нам потребуются некоторые векторные формы, которые вы сможете скачать ниже. В результате при помощи данных форм мы попробуем создать милый сайт-портфолио для фотографа. И так начинаем.
Для начала как всегда создаем новый проект, я обычно использую размер 960 x900 пикселей, но вы можете использовать свой любой. Для создания дизайна нам как я уже говорил понадобятся векторные растительные формы, а также гранжевая текстура. Также пригодятся готовые листочки бумаги с загнутыми краями
Для начала берем инструмент градиента (Gradient Tool ) и заливаем слой градиентом от цвета #еее4се к цвету #e0cfa5


Теперь используем текстуру которую скачали ранее. добавляем текстуру к проекту, помещаем ее в отдельный слой. Меняем режим смешивания слоев (the blending mode) на Luminosity, также при желании уменьшаем непрозрачность слоя (opacity) до 20%


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


Рисуем верхнюю панель нашего сайта при помощи Rounded Rectangle Tool ()


Добавляем тень, для этого автор предлагает создать еще одну такую же форму, но уже черного цвета и сдвинуть ее немного вниз, можно также добавить тень при помощи стилей слоя


Теперь если вы использовали первый вариант добавления тени, то уменьшаем ее непрозрачность до 20%, если второй вариант то также уменьшаем во время добавления. После этого при помощи Horizontal Type Tool создаем надпись (автор использовал шрифт: Bradley Hand ITC)


Открываем скачанные ранее векторные формы в фотошоп и выбираем крайние формы, которые указаны на картинке ниже


При помощи Rectangular Marquee Tool () создаем выделение вокруг цветка и жмем CTRL+J для дублирования выделения на новый слой, после чего размещаем цветочки подобно картинке ниже


Выбираем слой с векторами в нашей палитре слоев и жмем CTRL+ E для их слияния, после чего идем последующему пути:


Теперь мы можем видеть как наши векторные формы выделились по контуру


Берем кисть и при помощи различных цветов раскрашиваем наше выделение, автор использовал мягкую кисть


Жмем CTRL + D для снятия выделения, и вставляем поверх наших векторных завитушек фото фотоаппарата, взятое со стока


Слева создаем строку заголовка и пишем в ней некоторый текст, ниже при помощи квадратного выделения создаем белые прямоугольники, которые позже станут фотоснимками


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


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


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


В итоге наше финальное изображение сайта выглядит следующим образом:

Автор: admin
Перевод: RoMaS'ka

Опубликовал(а)
Аватар для Gostemilov
Администратор
Он малахольный
Регистрация: 07.09.2007
Адрес: Россия, Москва. 100 метров до МКАД
Возраст: 55
Сообщений: 92,012
Вес репутации: 10
Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима Gostemilov репутация неоспорима


Рекомендовать другим

Копирайт
Оригинал урока
demiart.ru/forum/index.php?showtopic=90212
  #1  
By Gostemilov on 20.06.2015, 12:20
Создание гранжевого сайта для фотографа, Create a grunge photographer layout

Со стороны верстки полный край..я не специалист в веб дизайне..но блин..всегда начинаю с таблицы.. а за заднем фоне я так понял большая картинка? То есть он еще и весить будет пол гига)) кароче мне не нравится..
  #2  
By Gostemilov on 20.06.2015, 12:20
Создание гранжевого сайта для фотографа, Create a grunge photographer layout

MC KAMA, но попробовать, то можно я думаю что получиться
Bluff, картинка на фоне есть, но посмотрите на многих сайтах фоном стоит картинка, даже натом на котором мы сейчас с вами так что это не решающее, картинки которые бумага и фото, разбить можно на квадраты и загнать в таблицу, тоже самое сделать и с формами, так что весить он будет не так уж и много, если конечно вы не будете туда фотки в полном разрешении, вообщем вес будет зависеть от наполнения, а дизайн не будет сильно весить
 



Опции учебника

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Выкл.
Pingbacks are Выкл.
Refbacks are Выкл.


Похожие темы
Название учебника Автор учебника Раздел Числу комментариев Последнее сообщение
Дизайн сайта в DJ стиле, DJ Layout #2, дизайн, макет Веб-Сайта Gostemilov Необработанные уроки Photoshop 0 22.06.2015 08:05
Тёмный дизайн для шаблона авто-сайта, Car Layout Gostemilov Необработанные уроки Photoshop 2 20.06.2015 19:50
Дизайн сайта Программного Обеспечения, Software Layout #5 Gostemilov Необработанные уроки Photoshop 0 20.06.2015 00:30
Фотореалистичный дизайн сайта, Create a photorealistic web layout Gostemilov Необработанные уроки Photoshop 0 19.06.2015 23:50
Создание профессионального макета сайта, HOW TO CREATE A PROFESSIONAL WEB LAYOUT Gostemilov Необработанные уроки Photoshop 0 17.06.2015 11:35

###
Социальные сети
Группы
Основные разделы
Скачать и поделиться

Новости Фотошопии
Подписаться письмом
Дополнительно

Текущее время: 21:05. Часовой пояс GMT +2.


удаленная проверка сервера uptime российских хостеров
Rambler's Top100


.
Locations of visitors to this page

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc. Перевод: zCarot
vBulletin Optimisation by vB Optimise (Reduced on this page: MySQL 15.00%).