Рубрика: Photoshop Уроки | Урок прочитали: 1012
 (голосов: 0)

Красивый макет сайта в Фотошоп

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

Введение

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

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

Одна из главных вещей, о которых не стоит забывать, это то, что ваш макет когда-то будет переведен в код, то есть сверстан. По этой причине я покажу вам, как делать свои текстуры вместо копирования «тяжелых» текстур из других источников. Иметь базовые знания об html и css обязательно для хорошего веб-дизайнера.

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

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

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

Итак, мы можем начать!

Шаг 1. Работа с фоном

Фоном макета будет текстура величиной 500 на 500 пикселей, зацикленная по горизонтали и вертикали. Создадим документ со следующими параметрами.

Заливаем документ темно-бежевым цветом #d9cfc0.

Добавим текстуру бумаги. Я выбрал текстуру paper15 из этого набора. Немного уменьшите текстуру и увеличьте резкость с помощью фильтра. Зажмите Ctrl+Shift+U, чтобы обесцветить текстуру, поменяйте режим наложения слоя с текстурой на Multiply (Затемнение) и установите значение непрозрачности на 20%. Получится что-то такое:

Теперь жмем EditDefine Pattern (Редактирование – Определить узор), чтобы сделать этот документ текстурой.

Теперь сразу разберемся с разметкой. Я для этого скачал специальный шаблон 960 Grid System site

Основная задача разметки помочь дизайнеру визуально представлять, как лучше организовать контент, по ходу дела, чтобы ему не приходилось постоянно держать это в голове. Откройте шаблон с 16-ю колонками и удалите из списка слоев группу “layer1”. Группа с вертикальными линиями должна быть всегда сверху. Иногда вы можете делать её невидимой, но вы должны включать её всякий раз, работая над структурой и организацией контента. Также я увеличил высоту шаблона до 1470 пикселей. Вот скриншот итогового результата с разметкой:

Жмем EditFill (Редактирование - Заливка) и заливаем нашей текстурой фон макета.

На новом слое с помощью большой мягкой белой кисти рисуем блик, как показано ниже. Устанавливаем значение непрозрачности на 30%. Этим мы выделим область для шапки и логотипа. Создадим ещё один слой и порисуем на нем кистями WG Grunge Brushes. Это ещё больше украсит верхнюю часть макета. Выделим все слои, относящиеся к фону, и сгруппируем их в отдельную группу background”.

Шаг 2. Работа над шапкой

Когда работа над фоном закончена, мы можем поработать над шапкой. Нам нужна красивая текстура, и мы снова сделаем её сами. Создадим документ 20 на 60 и зальем его белым. Добавим горизонтальную линию разметки с отступом от нижнего края в 10 пикселей.

Выделим область, как показано ниже:

Удерживая Alt, жмем кнопку добавления маски для слоя.
 

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

Помещаем окружность в самый низ документа. Теперь жмем EditDefine Pattern (Редактирование – Определить узор), чтобы сделать этот документ текстурой.

В верхней части основного документа создаем прямоугольное выделение высотой в 60 пикселей.

Заливаем выделенную область новоиспеченной текстурой, устанавливаем непрозрачность на 50%.

Добавим прямоугольник высотой 5 пикселей цветом #506271 и поместим его в самый верх шаблона.

Шаг 3. Добавляем логотип и меню

Поработаем над меню. Я буду использовать шрифт Arial в 13 пикселей. Цвет - #506271.

В качестве лого я создал эллипс со следующими стилями:

 

Создаем новый слой; удерживая Ctrl, кликаем по эллипсу, чтобы создать выделение вокруг него. Жмем SelectModifyContrast (Выделение – Модификация - Сжать) и вводим значение 4 пикселя. Заливаем выделение градиентом от белого к прозрачному сверху вниз. Непрозрачность – 40%.

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

Шаг 4. Добавляем слоган

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

Я использовал комбинацию из трех шрифтов: Chunk для верхнего текста, Aniverse для нижнего, Gabrielle для запятой и амперсанда. Не забывайте использовать разметку, это значительно вам поможет.

Для запятой и амперсанда я использовал всё тот же синий #506271. Для стилей используем настройки, указанные ниже:

 


 

Дублируем все слои с текстами. Размещаем дубликаты под оригиналами, обнуляем все стили для них, меняем цвет на белый. Перетаскиваем на пиксель вправо и на пиксель вниз. Растеризуем дубликаты. Удерживая Ctrl, кликаем по оригинальному тексту, чтобы создать выделение вокруг него, жмем Delete (должен быть выделен слой с дубликатами). 

Шаг 5. Блок «Последние работы»

Первое, что нам нужно сделать, это разделить слоган и блок с примерами работ. Для этого мы добавим текст и две горизонтальные полоски. В качестве шрифта используем 18pt Arial. Чтобы полоски становились бледнее к краям, я воспользовался маской. Создайте маску для слоя с линиями и воспользуйтесь градиентом от черного к белому.
 

Еще раз воспользуемся техникой «гравировки». Дублируем слои с текстом и полосками, располагаем дубликаты за оригиналами, меняем цвет на белый, уровень непрозрачности на 70%, и перемещаем дубликаты на пиксель вниз и на пиксель вправо.

Создадим контейнеры для картинок. Создаем прямоугольник 220 на 194. Сделайте видимой разметку и ориентируйтесь на неё, когда будете располагать прямоугольник.

Применим следующие стили для прямоугольника:

Дублируем прямоугольник и располагаем дубликат под оригиналом. Сбросьте все стили для дубликата и сделайте его полностью черным. Как вы поняли, мы будем делать тень. Итак, растеризуем дубликат. Далее жмем EditTransformDistort (Редактирование – Трансформирование – Искажение). Поведите левый верхний угол немного влево и вниз, как показано на картинке ниже.

Применяем FilterBlurGaussian Blur (Фильтры – Размытие – Размытие по Гауссу) с радиусом в 4 пикселя.

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

Создадим новый слой поверх слоя с контейнером. Удерживая Ctrl, нажмем на слой с контейнером, чтобы создать выделение соответствующей формы. Заливаем выделение цветом #64594d. Пока выделение еще активно, жмем SelectModifyContract (Выделение – Модификация – Сжать) и вводим значение 1 пиксель. Жмем Delete. Мы создали эффект однопиксельной внутренней обводки.

Теперь размножьте необходимое количество контейнеров и заполните их изображениями. Сгруппируйте все слои с контейнерами и картинками, назовите группу «gallery».

Вот мы и подходим к концу. Все, что осталось, это футер или «подвал». Для того, чтобы сделать фон для футера, мы просто скопируем фон с шапки и отразим его по вертикали, переместив в самый низ шаблона. Поменяем цвет на синий #506271 и установим значение непрозрачности на 100%. Также я создал прямоугольник того же цвета и поместил его поверх.

Чтобы футер лучше вписывался в общую концепцию, мы добавим гранжовую текстуру. Я использовал grunge-кисть с низкой непрозрачностью.

Я поделил футер на три раздела: обратная связь, мои контакты и блок для твиттера. Шрифт – 18pt Arial.

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

Используем следующие стили для слоя:

Теперь используем ту же технику, что мы использовали при создании текста девиза, чтобы создать белую обводку слева и снизу. Размножьте поля и озаглавьте каждое поле, а также не забудьте про кнопку (попробуйте использовать для неё гранжевые кисти, как это сделал я).

В центральную колонку я просто добавлю ссылки на несколько социальных сетей. Я использовал вот эти иконки.

В правой части создадим форму с помощью стандартных инструментов, как показано ниже. Используем для слоя с формой те же стили, что мы использовали для полей в блоке обратной связи. Также добавим иконку Twitter’а – я использовал иконку отсюда.

Почти готово. Теперь самое главное – добавим копирайты. А также не забудьте сгруппировать все слои, относящиеся к подвалу, в группу «footer».

Вот мы и закончили этот длиннющий урок. Я надеюсь, вы узнали что-нибудь интересное для себя. Пожелания и предложения – в комментарии.

Всего наилучшего!

           

Похожие файлы и публикации:

Красивый макет сайта в Фотошоп
В этом уроке мы создадим текстурированный макет сайта, используя относительно небольшое количество изображений. Это проще, чем вы думаете. Вы быстро освоите эту «науку». Для пользователей среднего уровня владения Photoshop работа займет меньше часа, а по ходу дела вы узнаете несколько профессиональных секретов. Давайте приступим.
Красивый макет сайта в Фотошоп
Как всегда, вот то, что мы получим в итоге:
Красивый макет сайта в Фотошоп
В этом уроке, шаг за шагом, мы будем делать макет сайта-саттелита и сноубординге. Мы будем вдохновляться культурой сноубординга, используя гранжевые текстуры и кисти. Начнем с разработки основного макета нашей будущей странички и разметки основных элементов дизайна, и, используя Photoshop, воссоздадим в шаблоне то, что мы уже разработали в голове и на бумаге.
Красивый макет сайта в Фотошоп
Всем привет, господа!
Красивый макет сайта в Фотошоп
В этом уроке я покажу, как сделать красивый макет. Урок очень подробный и вряд ли покажется интересным продвинутым пользователям. В этом уроке я не упустил ни одну деталь, я объясню каждое свое действие. Удачи!
Красивый макет сайта в Фотошоп
В этом уроке я использую только самый минимум цветов для создания темного дизайна для делового сайта. Немного изменив шаблон, вы также сможете использовать его и для блога на WordPress.
Красивый макет сайта в Фотошоп
Привет, это мой первый урок. Надеюсь, он вам понравится. Сегодня мы будем создавать микрофон.
Красивый макет сайта в Фотошоп
В этом уроке мы будем создавать минималистичный макет блога.
Красивый макет сайта в Фотошоп
Вы можете сделать использовать этот урок, чтобы сделать обои (как я) или аватар. Приступим! Я взяла фотографию моего любимого актера.
Красивый макет сайта в Фотошоп
Слейте изображения.  Layer – Merge Layers (Слой – слить слои). Примените автоматическую тоновую коррекцию (уровни). Image – Adjustments – Auto levels (Изображение – Коррекция – Автоматическая тоновая коррекция) (Shift + Ctrl + L). Перейдем к меню Channels (Каналы), которое  находится во вкладке рядом с панелью слоев,  Duplicate (дублируем) Blue(Синий) канал.
Красивый макет сайта в Фотошоп
В этом уроке я собираюсь рассказать вам, как сделать элегантный текст. Итог урока:
Красивый макет сайта в Фотошоп
В этом уроке мы будем создавать стильную черную навигацию для сайта. Вот так она будет выглядеть в конце урока:
Красивый макет сайта в Фотошоп
В этом уроке я покажу вам, как создать интересный гранжевый текст.
Красивый макет сайта в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.
Красивый макет сайта в Фотошоп
В данном уроке мы будем учиться «с нуля» создавать 3D коробку.
Красивый макет сайта в Фотошоп
Давайте начнем с нового документа: Размер должен быть 400 х 400 пикселей. Мы будем использовать зеленый фон. Я выбрал зеленый, потому что вы сможете лучше видеть то, что я делаю, Теперь, пожалуйста, скачайте себе следующее изображение:
Красивый макет сайта в Фотошоп
Всем привет! В этом уроке я покажу вам, как использовать инструмент Puppet Warp (Марионеточная деформация) в Photoshop CS5. Сначала скачайте материал, который нам понадобится:
Красивый макет сайта в Фотошоп
В этом уроке я покажу, как создать макет сайта на футбольную тематику.