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

Создаём простой макет для сайта в Фотошоп

В этом уроке мы создадим текстурированный макет сайта, используя относительно небольшое количество изображений. Это проще, чем вы думаете. Вы быстро освоите эту «науку». Для пользователей среднего уровня владения Photoshop работа займет меньше часа, а по ходу дела вы узнаете несколько профессиональных секретов. Давайте приступим.

Вот, что должно у нас получиться:

Для работы нам понадобятся изображения цветка и листьев, а также эти текстуры:

Текстура 1

Текстура 2

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

Теперь нам понадобится текстура дерева, ссылку на которую я давал выше. Открываем «texture-small.jpg» и жмём Edit – Define Pattern (Редактирование – Определить узор). Даём текстуре название, после чего текстуру можно закрыть.

Дублируем фоновый слой. Выделяем его и жмём Layer – Layer Style – Pattern Overlay (Слой – Стиль слоя – Наложение узора). Используем текстуру, которую мы только что создали.

Используя Rectangle Tool (Прямоугольник), создаем вот такие разноцветные прямоугольники вдоль досок текстуры.

Удерживая Ctrl, по очереди кликаем на всех слоях с квадратными формами. Таким образом, мы их выделяем.

Когда все слои будут выделены, жмём Ctrl+E, чтобы объединить их в один. Меняем режим наложения на Color Dodge (Осветление основы), а значение Opacity (Непрозрачность) где-то на 40–50%.

Теперь нам понадобится вторая текстура, ссылку на которую я давал в самом начале – гранжовая текстура, помещаем слой с ней поверх остальных, жмём File – Place (Файл - Поместить) и выделяем текстуру.

Убедитесь, что слой выделен, и добавьте немного тени со следующими настройками:

 


Используйте Rectangular Marquee Tool (Прямоугольная область), чтобы создать выделение, как на иллюстрации:

 

Теперь выделяем слой с текстурой и жмём Ctrl+J, чтобы скопировать выделение на новый слой. Выделяем новый слой и поворачиваем его на 180 градусов, после чего помещаем на верхнюю часть макета. Добавим необходимый текст.

Меняем режим наложения слоя с текстом на Color Burn (Затемнение основы).

Используя ту же технику, нарежьте футер и кнопки меню. Вот так получилось у меня:
 

Если вы хотите выделить какую-либо кнопку (например, для hover state), выделите слой с этой кнопкой и зажмите Ctrl+U. Играя с настройками, вы сможете добиться желаемого результата.

Создаем справа белу форму с помощью инструмента Rectangle Tool (Прямоугольник).

Используя инструмент Line Tool (Линия), разлинуем нашу форму. Я использовал цвет #d3d1d2 для линий.

Выделим слой с линиями и слой с формой, после чего зажмем Ctrl+E, чтобы объединить их. С помощью круглой маленькой резинки немного «продырявим» нашу форму, пока она не примет вид настоящего, вырванного из блокнота листочка.

Добавим следующие стили для слоя:

Добавим текст. Я использовал шрифт Myriad Pro (вы найдете этот шрифт и на Windows 7 и на Vist’e).

Теперь добавим необходимое изображение в середину макета, а также две стрелочки справа от него. Стрелочки вы можете нарисовать с помощью инструмента Custom Shape Tool (Произвольная фигура).

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

Поместим наш листочек в правый нижний угол нашего макета, как показано на рисунке:

Сделаем несколько дублей листочка и расположим их как-нибудь так:

И последний шаг – помещаем сверху наш цветочек.

А вот и финальный результат!

Автор: Razvan

Перевод: Руслан Гильзидинов

           

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

Создаём простой макет для сайта в Фотошоп
В этом интересном и полезном уроке мы будем с «нуля» создавать макет для делового сайта.
Создаём простой макет для сайта в Фотошоп
В этом уроке я использую только самый минимум цветов для создания темного дизайна для делового сайта. Немного изменив шаблон, вы также сможете использовать его и для блога на WordPress.
Создаём простой макет для сайта в Фотошоп
В этом уроке Вы научитесь некоторым основам создания фотоманипуляций в стиле хоррор.
Создаём простой макет для сайта в Фотошоп
А вот то, чего вы можете добиться с помощью этого урока.
Создаём простой макет для сайта в Фотошоп
Программа Photoshop – фантастическая программа, с помощью которой можно обрабатывать не только фотографии, но и создать реальные объекты. В сегодняшнем уроке, мы продемонстрируем, как создать изображение реалистичного ножа похожего на фотографию в программе Photoshop, используя векторные инструменты для рисования, стили слоя, текстуры, и эффекты.
Создаём простой макет для сайта в Фотошоп
Ожидаемый результат:
Создаём простой макет для сайта в Фотошоп
Шаг 1. Создайте новый документ размером 1920x1200. Затем используйте стиль слоя Gradient Overlay (Наложение градиента): цвета #07090b и #27160a. Тип заливки – Radial (Радиальный). Увеличьте масштаб изображения до 115%.
Создаём простой макет для сайта в Фотошоп
Вот такой домик получится после данного урока
Создаём простой макет для сайта в Фотошоп
Облака_1 Облака_2
Создаём простой макет для сайта в Фотошоп
В этом уроке я покажу, как сделать красивый макет. Урок очень подробный и вряд ли покажется интересным продвинутым пользователям. В этом уроке я не упустил ни одну деталь, я объясню каждое свое действие. Удачи!
Создаём простой макет для сайта в Фотошоп
Этот урок о том, как сделать акцент на определённой детали фотографии.  Надеюсь, он будет Вам полезен.
Создаём простой макет для сайта в Фотошоп
Вам понадобится Adobe Photoshop 7.0 или выше и примерно полтора часа времени.
Создаём простой макет для сайта в Фотошоп
Вот что должно получиться, если вы все сделаете правильно:
Создаём простой макет для сайта в Фотошоп
В этом уроке я покажу вам, как создать интересный гранжевый текст.
Создаём простой макет для сайта в Фотошоп
В этом уроке мы с Вами будем рисовать зонт, используя различные инструменты, режимы наложения, стили слоя. Итак, приступим!
Создаём простой макет для сайта в Фотошоп
В этом уроке я собираюсь рассказать вам, как сделать элегантный текст. Итог урока:
Создаём простой макет для сайта в Фотошоп
Из этого  урока Вы узнаете, как создать стильный макет для корпоративного сайта.
Создаём простой макет для сайта в Фотошоп
В этом уроке я расскажу, как создать красивый пейзаж с закатом. Я использовал несколько изображений, которые Вы можете скачать по ссылкам ниже. Ссылка на изображение с закатом. Ссылка на изображение с холмами. Ссылка на изображение с вигвамом.
Создаём простой макет для сайта в Фотошоп
В этом уроке мы создадим обои в стиле гранж на фильм «Бэтмен: тёмный рыцарь».
Создаём простой макет для сайта в Фотошоп
В этом уроке вы узнаете, как создать фантастический текст с эффектом огня в Фотошоп.