Как нарисовать макет сайта в фотошопе: Пошаговая инструкция, как создать макет сайта самостоятельно. Онлайн или в Photoshop — Независимое театральное объединение "Зрительские симпатии"

Содержание

Как быстро создать макет сайта

Любой сайт начинается с макета: нужно же как-то визуально представить себе его будущую структуру. На первоначальном этапе специальные инструменты не нужны. Достаточно положить перед собой лист бумаги или воспользоваться модными интеллектуальными картами, чтобы визуализировать, что и куда будет вести. В этой статье мы расскажем вам про сервисы для создания макетов сайтов, которые здорово облегчают жизнь.

Сайт начинается с прототипа

Итак, нам нужно создать макет сайта. Бумага и ручка — это, конечно, здорово, но хотелось бы как-то побыстрее получить готовый результат. К тому же, на бумаге нельзя прочувствовать пользовательский опыт, так называемый UI/UX. Это когда понятно, понравится ли пользователям сайт, удобно ли им пользоваться, все ли элементы под рукой и все в таком духе. Чем еще хорош прототип сайта:

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

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

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

Бесплатные инструменты для создания прототипов

Мы внимательно изучили сеть и вот к какому выводу пришли: бесплатные инструменты есть, что не может не радовать, но большая их часть — на английском языке. Если вы с ним не дружите, будет довольно трудно погрузиться в предмет. Если инструменты на нашем родном языке есть в сети, будьте любезны, дайте нам знать в комментариях. Любопытно же.

Создать макет сайта бесплатно поможет, например, wireframe.cc. Он минималистичен и прост в использовании: кликаете мышкой, тянете прямоугольник — и создаете нужный элемент. На бесплатном тарифе шаблонов мало, можно на семь дней воспользоваться преимуществами платного тарифа.

Сервис Wires еще проще — правда, сначала придется зарегистрироваться. В бесплатном режиме можно создать три проекта — это очень много по сравнению со всеми другими инструментами. Бесплатная библиотека, вполне ожидаемо, минимальна.

Сервис InVision App, судя по отзывам, довольно мощный — пишут, что готовый прототип получается настолько хорошим, что готов к верстке. Облачный сервис в основном ориентирован на создание мобильных приложений, что, в общем-то, тоже актуально.

Сервис Moqups предлагает пользователям бесплатный тариф, по которому можно работать только с одним проектом и использовать до 300 элементов. Если вы не планируете обойти по популярности Apple, этого количества вполне может хватить.

Резюме: к плюсам сервисов можно отнести простоту их использования — не нужно обладать навыками дизайнера, чтобы во всем разобраться. Минусы — нужен язык на более-менее приличном уровне или интуитивное понимание вопроса (такое тоже возможно). Бесплатные тарифы предлагают усеченный функционал, но на первых порах, в качестве «пробы пера» этого вполне хватит. Дерзайте, пробуйте свои силы!

Шаблон сайта в Photoshop

Шаблон сайта можно нарисовать и в популярной дизайнерской программе. Правда, любимый всеми дизайнерами продукт в России не распространяется for free — придется купить пакет. И, честно говоря, трудно сказать, что легче — разобраться в «фотошопе» или выучить английский, чтобы работать с заграничными сервисами. Все эти «вырезать», «вставить», «наложить слой» и прочее — для кого-то могут оказаться слишком сложными.

Шаблон на сайте-конструкторе

Если вышеописанные варианты использования сервисов и редакторов кажутся вам слишком сложным, всегда можно пойти по простому пути и создать шаблон сайта с помощью конструктора. Например, у 1C-UMI не просто много, а очень много готовых шаблонов сайтов. Все уже придумано за вас нашими дизайнерами, специалистами по пользовательскому опыту и прочим умным народом. Вам остается придумать контент и наполнить им сайт. Шаблоны можно посмотреть без регистрации: сначала изучаете наши шаблоны, потом принимаете решение, с нами вы или нет.

Только вам решать, на чем остановить выбор и как сделать макет сайта: быстро с помощью готовых шаблонов конструктора или долго и с перспективой глубокого погружения в английский и нюансы прототипирования. В любом случае желаем вам успехов на этом поприще, и помните, вы всегда можете обратиться к профессионалам и получить быструю помощь.

Как сделать дизайн сайта в фотошопе с нуля – Блог opengs.ru

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

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

В статье используются названия инструментов и термины описание, которых не реально включить в данный материал из за объема. Поэтому если ты впервые открыл(а) эту программу, то нужно сначала изучить азы работы с ней. Еще рекомендую ознакомится с материалами раздела “Photoshop“.

Создание и подготовка файла проекта

Для начала нужно открыть фотошоп, кликнуть в левом верхнем меню программы “Файл > Создать”. И настроить новый файл следующим образом:

Дать имя своему макету, у меня на примере “mysite“
Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
Единицы измерения установи в “Пикселях“. Разрешение “72” Пиксели/дюйм.
Жми “OK”. И сохраняй его как psd “Файл > Сохранить как…” в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент “Прямоугольник“, установи в параметрах инструмента значение “Пиксели” и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным).

Теперь слой с прямоугольником нужно разместить по центру холста. и установить направляющие по краям. Направляющие имеют полезное свойство прилипать к границам активного слоя.

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения “Прямоугольная область“. А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

Получится вот так:

Все первоначальная настройка макета окончена.

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

Сохрани, то что получилось “Файл -> Сохранить для Web -> PNG-24”

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

Правый клик на файле
В контекстном меню “Открыть с помощью”
Выбери браузер которым пользуетесь (у меня hrome).
После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
Кликни один раз для отображения изображения в полный размер.

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

Создание шапки сайта

Теперь залей слой, который мы использовали для установки направляющих, белым цветом. И приступим к созданию шапки сайта. Для этого создай новую группу слоев и назови ее “Шапка сайта”

Разместим логотип компании. Я его поставлю традиционно с левой стороны. Это является не обязательным местоположением, но принято размещать логотип именно слева или по центру макета.

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

Что бы добавить свой логотип (если его нет, то читай Как сделать логотип онлайн) нужно:

Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
Выбрать инструмент “Перемещение” (это стрелочка напоминающая курсор)
Открой вкладку с логотипом
Наведи курсор на изображение логотипа
Нажми и не отпускай левую кнопку мыши
Тащи изображение на вкладку с макетом
Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

Если все правильно логотип скопируется новым слоем на холст с макетом.

Теперь нужно подогнать размер логотипа (комбинация клавиш ctrl+t) таким образом, что бы он был не сильно большим, но и не был мелким и выровняй его левый край по направляющей. Что бы проверить правильно ли подобран размер сохрани свой макет в формате png-24 и открой в браузере.

Теперь я создаю новую группу слоев и называю ее телефоны. При помощи инструмента “Текст” пишу “Горячая линия” и номер телефона организации “+7 (3435) 25-60-60”. Я разместил телефон в шапке по двум причинам. Первая это наличие телефона с правой стороны в шапке уже привычно пользователям, так сделано на большинстве сайтов компаний. Вторая, если это сайт компании, то многие посетители почитав, то что их интересуют наверняка захотят позвонить и им не придется открывать страницу контакты. Я так же подобрал подходящий на мой взгляд шрифт, размер и выровнял телефон по правой внутренней направляющей.

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

Создание дизайна главного меню сайта

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

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

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

И на последнем шаге я добавил hover эффект (эффект при наведении курсора мыши) для одного из пунктов меню.

Создание дизайна левого меню сайта

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

Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне “Символ”

Я использовал 14 размер и стандартный для Windows шрифт “Verdana”

Старайся использовать стандартные шрифты по максимуму. Так как при просмотре сайта пользователь используется шрифты своей системы.

Получилось вот такое меню:

Дизайн содержимого сайта

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

У любой страницы должен быть заголовок и собственно сам контент. Для начала я установлю две направляющие. Первую горизонтальную по верхнему краю меню. Вторую вертикальную на расстоянии 20px от левого края левого меню.

Далее создаю слой с заголовком, слой с текстом и перетаскиваю заранее подготовленные изображения кофе. Что бы текстом было управлять легче возьми инструмент “Текст” и нажми левую кнопку мыши и потяни по диагонали. Получится прямоугольник определенного размера. Теперь можно скопировать туда текст, форматировать его и менять размер блока теста при необходимости.

Получилось вот что:

Дизайн подвала сайта

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

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

Результат:

Мы рассмотрели как сделать дизайн сайта в фотошопе (photoshop) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

Как создавать дизайн с помощью фотошопа. Обращайте внимание на детали. Простое внесение изменений

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

В Фотошопе нарисовать несложный дизайн сайта под силу даже новичку

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

Расшифровка некоторых терминов.

CSS (Cascading Style Sheets) и HTML (HyperText Markup Language) — компьютерные языки, которые используются при создании веб-ресурсов. Если открыть исходный код любой страницы в интернете, там будут HTML-тэги.

Вёрстка — компоновка и монтаж материалов из макета, превращение его в html-шаблон. От этого зависит, как располагаются объекты, красиво ли они выглядят в общей композиции, удобно ли читать текст и тому подобное.
Слои — части макета. Они вместе составляют общую картину. Но их можно редактировать и перемещать отдельно друг от друга.
Тело — место, где находится контент. Вокруг него может быть фон.
Фрейм (Frame) — элемент страницы. Блок с какой-то информацией, картинкой, формой.

Сделать потрясающий сайт с нуля может только профессионал. Для этого нужно разбираться в веб-дизайне и знать HTML. Так как готовый макет надо ещё грамотно сверстать.

Но есть и более простые способы. Существуют онлайн-сервисы и программы, которые автоматически преобразуют.psd (формат файлов Photoshop) в HTML и CSS. Вам останется лишь правильно собрать шаблон.

Для использования Photoshop необязательно быть художником и разбираться во всех опциях программы. Но если вы впервые запустили её и не знаете, как вставить текст, нарисовать геометрическую фигуру, продублировать слой, поменять цвет или выделить произвольную область, стоит начать с чего-нибудь попроще. Чтобы сделать макет в Фотошопе , нужны хотя бы начальные навыки работы с утилитой и понимание базовых функций (как начертить линию, поставить направляющую, выбрать шрифт и тому подобное).

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

Одностраничный. Все элементы, контент, всё наполнение ресурса находится в одном месте. На одной странице. Чтобы просмотреть содержимое сервиса, не надо переходить по ссылкам или открывать новые вкладки. При этом сам сайт может быть сколь угодно большим. В нём поместится и маленькая рекламная брошюра, и огромный роман на 600 листов.
Многостраничный. Соответственно, включает много страниц. Это могут быть, например, «Главная», «Форум», «Гостевая книга», «Ответы на часто задаваемые вопросы», «Контакты». Для каждой из них нужно делать макет. Ещё потребуются навигация и карта сайта: отдельный раздел со ссылками на все части сервиса. Чтобы пользователь мог быстро найти нужную ему закладку.

«Резиновый». Меняет размер в зависимости от разрешения экрана. Растягивается вместе с окном обозревателя. Надо заранее рассчитывать, как будет выглядеть сайт. Если при ширине 1300 всё отображается нормально, то в 900 пикселях часть статьи может «уехать» за границы фрейма, изображения встанут не так, как надо, а flash-анимация закроет форму для ввода.
Фиксированный. Тело сайта не меняет размер. Самый лёгкий и практичный вариант. Чтобы страница выглядела цельной, и при расширении окна не было «пустого» места по краям, можно сделать резиновым фон.

Макет

Для начала решите, какой дизайн вам нужен. Недостаточно его просто «вообразить», а потом оформить в Фотошопе. Должно быть чёткое представление. Начертите шаблон на обычной бумаге. Не нужно перерисовывать каждую картинку. Достаточно схемы: несколько прямоугольников и кружков, которые условно обозначают элементы веб-страницы . Прикиньте, как будут располагаться фреймы, где лучше поставить логотип, куда поместить информацию для посетителей.

Посмотрите примеры страниц в интернете. Подумайте, какие из них вам нравятся и почему. Удобное ли это расположение фреймов, приятные цвета или интересный подход к оформлению. Копировать чужой дизайн не стоит. Достаточно подчерпнуть из него «вдохновение». После этого можно разобраться, как нарисовать сайт в Фотошопе.

Создайте новый документ (Файл — Создать). Размеры подбираются с расчётом на маленькие мониторы или низкое разрешение: 1024×720 пикселей. Это ширина «информационной» части, а не всего рисунка. Если вы хотите страницу в 1100 пикселей, то надо делать документ шириной от 1300 пикселей. Длина, по сути, не фиксирована — она зависит от того, сколько контента вы хотите разместить на ресурсе. Это рекомендации, а не правила. Можете собрать большой макет, если хотите.
Включите линейки. Нажмите Ctrl+R или перейдите в меню Просмотр — Линейки. Это измерительная шкала. Она появляется снаружи рисунка. Без неё придётся прикидывать размеры и расстояния «на глаз», что не очень хорошо скажется на конечном результате. Настроить эту функцию можно в меню Редактирование — Установки — Единицы измерения и линейки. Там лучше поменять сантиметры на пиксели, чтобы работать с одним параметром, а не высчитывать, сколько точек в одном дюйме.

Также следует активировать сетку. Просмотр — Показать — Сетка или Ctrl+Э (отключить её можно также). Это некий аналог тетради в клетку. В Фотошопе будут отображаться вертикальные и горизонтальные линии. На самом рисунке они не появятся. Их можно увидеть только при редактировании. Эта функция нужна, чтобы ровно расставлять элементы шаблона. Кому-то удобнее работать с сеткой, кому-то без неё. Лучшее её включить, если вы впервые делаете сайт.
Чтобы её настроить, перейдите в Редактирование — Установки — Направляющие, сетка и фрагменты. Там можно выбрать размер клеток, а также цвет и тип линий (сплошная, пунктирная, из точек).

Установите направляющие. Между ними будет находиться основной контент-ресурса — фиксированное тело сайта. А за ними — резиновый фон. Чтобы это сделать, нажмите Просмотр — Новая направляющая. В блоке «Ориентация» отметьте пункт «Вертикальный». В поле «Положение» напишите, на каком расстояние от левого края будет находиться объект. Ориентируйтесь по шкале линейки.
Нужны две направляющие — справа и слева от тела страницы. Расстояние между ними должно составлять максимум 1003 пикселей для дисплеев с разрешением 1024×720. Можете указать другую ширину. Но большие ресурсы неудобно просматривать на маленьких мониторах.
Почему 1003, а не 1024? Если сайт надо пролистывать («скроллить») вниз, в браузере будет вертикальный ползунок для прокрутки. Размер этого ползунка — примерно 21 пиксель. Если его не учитывать, появится горизонтальный скролл. И посетителю ресурса придётся двигать страницу вправо-влево, чтобы увидеть всю информацию.
Тело должно быть в центре холста.

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

Для начала вашему макету нужен фон. Его можно сделать самостоятельно или скачать из сети. Существует много ресурсов с бесплатными текстурами. Не ставьте на сайт изображения, на которые распространяются авторские права. Не стоит брать яркий или контрастный фон. Лучше не использовать текстуры с большим количеством мелких выделяющихся деталей. Они будут отвлекать посетителя от тела страницы.
Если просто открыть рисунок в Фотошопе , он окажется на новой вкладке, а не добавится в макет. Выделите весь фон. Для этого нужно сочетание клавиш Ctrl+A или инструмент «Выделение» (он находится на панели слева). Скопируйте его и вставьте в шаблон.
Также эта опция доступна, если нажать Редактирование — Вставка.

В списке справа внизу появится новый слой. Кликните по нему правой кнопкой мыши, чтобы посмотреть возможные действия. В меню «Параметры слоя» можно изменить его имя. В «Параметры наложения» находятся основные настройки изображения. Можно сделать ему свечение, тиснение, глянец, обводку, градиент. Если выберите какую-то опцию, изменения сразу отобразятся в Фотошопе. Есть набор готовых стилей. Так из стандартной текстуры создаются оригинальные дизайнерские решения. И ничего дополнительно рисовать не надо.
Кнопка «Фильтры» есть в строке меню. Там вы найдёте разнообразные имитации (пастель, акварель, карандаши), стилизации, текстуры, эскизы, блики, размытие.
Можно выбрать однотонный фон. Цвет зависит от ваших личных предпочтений. Но лучше не делать его чёрным или ядовитым. Подойдут постельные и мягкие тона или прозрачные холодные (например, светло-серый, нежно-голубой).
После текстур можно собирать сам сайт. Вот тут вам предоставлена свобода для творчества.
Чтобы добавить какую-то фигуру (отрезок, квадрат, овал), нажмите на соответствующую кнопку справа. Она будет иметь вид и название того объекта, который в данный момент выбран для рисования. Например, «Инструмент Эллипс», «Инструмент Многоугольник». В Фотошопе количество фигур ограничено. Но их можно найти в интернете, скачать и установить через меню Редактирование — Управление наборами. В поле «Тип» укажите, коллекцию каких объектов вы загружаете.
В разных версиях программы эти фигуры вызываются по-разному. Либо кнопкой в виде маленького чёрного треугольника (она справа), либо пиктограммой в виде шестерёнки, либо пунктом «Форма растровой точки» (она под строкой меню). Объекты можно комбинировать, группировать, делать из них композиции.
Чтобы создать текстовый фрейм, нажмите на кнопку в виде заглавной буквы «T». Потом выберите место, где должны располагаться символы, кликните туда и напечатайте то, что вам нужно.
Каждый элемент лучше ставить на отдельный слой. Так будет удобнее перемещать и редактировать, не «задевая» весь сайт. Чтобы добавить этот объект, перейдите в Слои — Новый.

Чтобы спроецировать изображение в заранее выбранную область, вначале выделите её, а потом откройте Редактирование — Специальная вставка. Там будут опции «Вставить вместо» и «Вставить за пределами».
Можно часть одного рисунка перенести на новый слой. Для этого надо выделить её, щёлкнуть по ней правой кнопкой мыши и выбрать «Вырезать на новый слой».
С фигурами, надписями и изображениями доступны те же опции, что и с фоном: эффекты, фильтры и так далее.
В Фотошопе существует ещё много инструментов для рисования: кисти, перья, карандаши.

Можно сделать качественный ресурс даже из простых геометрических объектов.

Существуют ресурсы с бесплатными макетами. Загрузите их в Photoshop и отредактируйте, если надо. Это проще и быстрее, чем рисовать с нуля.

Как превратить макет в html-файл?

Вы разобрались, как создать сайт в Фотошопе, и оформили свой первый макет. Что с ним делать дальше? Ведь его нельзя просто загрузить на хостинг.

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

Psd2Html Converter. Платный онлайн-сервис. Быстро конвертирует формат Photoshop в шаблон интернет-страницы. С этим ресурсом даже из некачественного макета можно создать приличный сайт.
PSDCenter
40 Dollar Markup.

Конструкторы

Макеты можно собирать и на специальных сайтах. Обычно там понятный и наглядный интерфейс. Вы просто собираете шаблон из различных деталей. Некоторые элементы лучше рисовать в Photoshop. Так у вас получится оригинальный дизайн. Несмотря на то что он создан на конструкторе.

Создание привлекательных и функциональных веб-макетов — неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.

Ресурсы урока:

Набор иконок (wefunction.com)
Альтернативный набор иконок
Иконка Twitter (iconeden.com)
Шрифт Bebas (dafont.com)

Шаг 1. Mockup

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

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение — Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение — Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

Залейте выделение серым цветом, а в дальнейшем используйте стили слоя, чтобы применять цвета и градиенты.

К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete , чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T) .

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование — Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N) , выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).

Выделите нижнюю половину тени и удалите (Delete) .

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T) , а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool) . Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

Оставьте между тенью и заголовком пропуск в 1 пиксел.

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J) .

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

Добавьте к слою с линией маску и при помощи градиента сделайте плавный переход на краях.

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

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

Что такое макет (мокап) сайта?

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

Чтобы прояснить термины макет, Wireframe и прототип, представьте, что они являются шагами к конечному продукту.

Макет в процессе разработки продукта

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

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

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

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

Макет сайта, для чего он нужен?

Конечно, когда вы разрабатываете продукт, у вас в любом случае будет Wireframe . Прототип — это по желанию, однако макет веб-дизайна должен создаваться в обязательном порядке. Для чего? Давайте зададимся следующим вопросом — как создать макет сайта и получить преимущества, которые он дает дизайнерам и владельцам продукта.

Преимущества разработки макета сайта

С помощью макета дизайна сайта дизайнеры могут:

Обнаружить возможные проблемы на раннем этапе

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

Предложить варианты на выбор

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

Легко донести свое видение до клиента

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

Макет (мокап) визуального оформления сайта — отличная возможность и для владельца продукта, и вот почему:

Привлечение инвесторов

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

Макет в качестве руководства

Когда клиент видит страницу сайта «Макет будущего продукта », и, если она ему нравится, он понимает, как будет функционировать весь продукт. Теперь это его точка отсчета, поэтому нет необходимости изменять и добавлять что-либо.

Простое внесение изменений

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

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

Как создать макет (мокап) для презентации сайта?

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

Вы помните опыт Mcdonald’s ? Братья Ричард и Морис Макдональды нарисовали на полу макет своей кухни, схематично обозначили порядок всех предметов и заставили своих сотрудников двигаться так, как будто они находятся на настоящей кухне. Таким образом, они смогли выявить оптимальную траекторию для каждого работника в соответствии с выполняемыми им задачами. Это был первый случай, когда дизайн помог сократить время приготовления пищи с 10 минут до 30 секунд.

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

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

Чтобы сделать макет (мокап) сайта, который позволит оценить все функции и удобство использования, нужно собрать много различной информации о будущем продукте:

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

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

После того, как эта информация будет собрана, команда разработчиков начнет планирование. Чем тщательнее они это сделают, тем лучше для процесса разработки. Хорошо продуманные макеты (мокапы) сайта уменьшают конечную стоимость разработки продукта.

На этом этапе команда должна ответить на вопрос о том, будет ли дизайн адаптивным, плоским или выполненным в стиле material ?

Другой важный вопрос, который должен быть спланирован заранее — как будет выглядеть мобильная версия сайта. Какой контент будет отображаться на мобильном устройстве, а какой не будет?

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

Какие шаги нужно продумать при создании макетов сайта

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

Основные элементы разработки макета

Стиль

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

Логотип

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

Структура

Используйте сетку, чтобы сделать контент заметным и простым. Хорошо структурированную информацию воспринимать гораздо легче.

Элементы призыва к действию

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

Выбор макета

Современный дизайн предлагает три основных вида макетов для размещения важных элементов в соответствии с тем, как пользователь просматривает веб-страницу. Вы можете выбирать между Z-шаблоном , F-шаблоном и структурой диаграммы Гутенберга. Ваш выбор должен основываться на типе сайта, который вы создаете, а также вашем контенте.

Типичные ошибки при создании макета веб-страницы

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

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

Ошибка макета — слишком много элементов

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

Однако если вы используете программное обеспечение для создания макета, которое не предусматривает возможности выбора цветовой палитры, вы рискуете создать что-то похожее на это:

Ошибка макета — неправильные цвета

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

Нечитаемый текст. Цвета, используемые для текста и фона, определяют насколько легко будет читаться текст. Лучший вариант — темный текст на светлом, однотонном фоне. Если пользователю трудно прочитать текст, он немедленно закроет веб-страницу. Яркий цвет текстов или экстравагантные шрифты могут превратить ваш дизайн в нечто подобное:

Ошибка макета — нечитаемый текст

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

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

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

Давайте посмотрим, что мы будем создавать в этом уроке.

Для выполнения урока, вам понадобится следующие ресурсы:

Бесплатный шрифт Free Font Sansation .
Текстура 26 Repeatable Pixel Pattern
Набор социальных иконок Free Social Media Icons
Иконка руки Hand Cursor Icon
Стоковое изображение Stock photo: Harvest 1
Стоковое изображение Stock photo: New York Streets 3
Стоковое изображение Stock photo: Daisy Age
Стоковое изображение Stock photo: A tree on the horizon
Стоковое изображение Stock photo: Sales figures
Стоковое изображение Stock photo: Time is Money!

Подготовка холста

Шаг 1

В этом уроке мы будем использовать фреймворк 960 GS . Нужно с качать шаблон с его главной страницы и найти внутри архива файл «12 Column Grid».

Нажмите на иконку глаза возле слоя 12 Col Grid, чтобы скрыть его видимость — пока он нам не понадобится.

Шаг 2

Пока размер нашего холста достаточно мал. Нажимаем Image> Canvas Size (или Ctrl +Alt + C), чтобы сделать размер немного больше и устанавливаем опорную точку в центре.

Шаг 3

Нажмите Ctrl + R , чтобы показать линейку. Нажмите View> New Guide (Просмотр — Новая направляющая), чтобы создать новую направляющую. Выберите Vertical и Position (Положение): 185 px , чтобы создать вертикальную направляющую, которая будет сдвинута на 185 px от левого края.

Шаг 4

Создайте еще вертикальные направляющие на расстоянии в 150 , 1095 и 1130 пикселей .

Подготовка Color Theme

Шаг 5

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

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

Подготовка фона

Шаг 6

Выберите слой Background и нажмите на значок замка, чтобы разблокировать этот слой. Дважды щелкаем по изображению, чтобы изменить цвет фона.

С помощью пипетки выберите второй цвет нашей цветовой схемы (# 948371) .

Шаг 7

Нарисуйте прямоугольную форму в верхней части холста. Это будет второй фон.

Шаг 8

Выберите созданную форму и перейдите в панель Option Bar. откройте Fill Color и нажмите иконку выбора цвета. Когда появится диалоговое окно Color Picker, выберите первый цвет. В поле Stroke выберите None

Шаг 9

Создайте новый слой и с помощью Rectangular Marquee Tool выделите верхний прямоугольник. Активируйте инструмент градиентной заливки и залейте выделенную область радиальным градиентом от белого к черному.

Измените его режим Blend mode на Screen и уменьшите непрозрачность Opacity до 37% .

Шаг 10

Создайте новый слой и назовите его «тень».

Нарисуйте прямоугольное выделение в нижней части второго фона, как показано на рисунке ниже. Нажмите Edit: Fill . Установить Use — Black . Нажмите OK , чтобы заполнить выделение черным.

Шаг 11

Размойте его с помощью Gaussian Blur. Нажмите Filter> Blur> Gaussian Blur .

Шаг 12

Удерживая нажатой Alt , поместите курсор между тенью и слоем со вторым фоном. Не отпуская Al , нажмите, чтобы преобразовать слой в обтравочную маску . Преобразовав его в Clipping Mask, тени сейчас размещены внутри верхнего фона.

Шаг 13

Измените прозрачность тени Opacity до 50% . Ниже вы можете увидеть результат при 100% увеличении.

Шаг 14

Пришло время, чтобы разместить все слои в одну группу. Чтобы сделать это, выберите все слои и нажмите Ctrl + G .

Header

Шаг 15

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

Шаг 16

В панели Option Bar , установите цвет Stroke — # af9f8e .

Шаг 17

Для заливки выберите следующие цвета линейного градиента — от # d0c4b9 к #a89c91 .

Название сайта

Шаг 18

В левой стороне шаблона добавляем название нашего сайта. Обратите внимание, чтобы размещение соответствовало рисунку ниже. Дважды щелкните текст и добавьте Drop Shadow . В уроке был использован шрифт Sansation .

Активируйте инструмент создания многоугольника Polygon tool и установите количество сторон — 3 . Нарисуйте треугольник с цветом заливки Fill: # 3d3123 и значение обводки Stroke : None . Добавляем к слою тень — Layer Style > Drop Shadow .

Шаг 22

Подчеркнем активную кнопку меню. Активируйте инструмент Линия и установить ее размер weight — 5 пикселей . Выберите цвет # f76b6a и линия должна быть без обводки.

Разместите линию под активным меню и добавьте расстояния между линией и прямоугольной формой в 1 пиксель.

Использование стилей символа

Шаг 23

Давайте сохраним настройки стилей для текста. Эта что-то похожее на упрощенную версию стилей символов в InDesign. Чтобы сохраним их, нужно активировать текст, а затем нажать на иконке «New Character Style».

Дважды щелкните на новый стиль и выберете следующие настройки.

Шаг 24

Выберите следующий пункт меню, а затем нажмите кнопку Character Style для применения настроек стиля. Если вы нашли знак плюс возле стилей, это означает, что они имеют разные настройки.

Шаг 25

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

Шаг 26

Так в чем же преимущество использования стилей символов? Они помогут нам централизовать настройки текста. Мы можем просто изменить стиль символа, чтобы отредактировать любой текст. Например, если изменить стиль Top Menu – Normal на Corbel, все элементы меню автоматически изменятся на Corbel.

Шаг 27

Создайте новый слой и поместите его под элементами меню. Нажмите Ctrl и кликните по меню, чтобы сделать следующее выделение. Залейте его черным.

Шаг 28

Удалите выделение, нажав Ctrl + D. Размойте черную область, применив фильтр Filter> Blur> Gaussian Blur .

Слайдер

Шаг 29

Нарисуйте прямоугольную форму шириной в столбцов (см. ниже).

Для цвета заливки выберите # dfd1c2 . Цвет Stroke — # c8baac, размер 10 pt . Нажмите на маленькую стрелку рядом с линией, чтобы убедиться, что выбрана опция Align Insid.

Шаг 30

Вставляем изображение, как показано на рисунке ниже. Конвертируйте его в Clipping Mask, нажав Ctrl + Alt + G . Изображение будет автоматически размещено внутри блока слайдера. При необходимости, вы можете изменять размер и перемещать его, никак не влияя на его рамку.

Шаг 31

Нарисуйте еще одну прямоугольную форму возле слайдер таким же цветом. Убедитесь в том, что форма будет привязана к крайней направляющей. Добавляем стили Layer Style> Pattern Overlay, используя текстуру

Как нарисовать пятый в этом году сайт строительной компании и сохранить интерес к работе.

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

Но мы то с вами знаем, сколько рабочего времени, на самом деле, занимает творческий процесс… Большая часть «жизни» уходит на отрисовку бесконечного количества вариантов, поиска единственно возможной формы, проработку десятков дополнительных макетов, типовых элементов и т. д. А если представить, что это пятый макет дизайна сайта строительной компании только в этом году, становится совсем грустно. И работа превращается в серую рутину.

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

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

Каких-то радикальных способов борьбы с подобными кризисами наверное не существует. Разве что устроить темную менеджеру :), которому всегда мало — но это как-то не гуманно, да и противоречит глобальным интересам компании.

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

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

Поэтому если у меня есть возможность оторваться от экрана, я всегда стараюсь ее использовать и тоже самое рекомендую всем кто работает у нас в компании.

Езжайте побродить по стройке, устройте фотосессию в соседнем дворе, слепите или вырежьте что-нибудь из бумаги, помогите разгрузить фуру с конфетами, примерьте ростовую куклу, посетите колбасный завод, поговорите «за жизнь» с мужиками из сборочного цеха, попробуйте скатать рол на кухне суши-бара… одним словом не бойтесь погружаться в среду! Все это сделает вашу работу гораздо интересней, клиента лояльней и в конце концов наполнит пятый в этом году макет сайта строительной компании живыми красками.

Урок: Фотошоп-макет для сайта — Уроки Photoshop — Полезные статьи

В этом Фотошоп уроке будем учиться рисовать лицо вашему сайту.

Вот такой макет получится в конце урока.

Начните с создания нового документа размером 650 * 550 px.
Залейте его таким цветом #e6f2e6

Создайте новый слой. Нарисуйте прямоугольник внутри, отступив примерно по 30 px с каждой стороны. Также залейте каким-нибудь цветом.

Нажмите на кнопку внизу палитры слоев и добавьте стили:

Обводка, ширина 5 px, внутри, цвет #296750

Промежуточный результат:

Приступим к рисованию навигации сайта.

С помощью , нарисуйте прямоугольное выделение в правом верхнем углу нашего макета.
Перейдите в меню Select >> Modify >> Smooth selection (Выделение — Модификация — Оптимизировать) , чтобы сгладить края.

Создайте новый слой, залейте выделение цветом #3b9710.

А теперь примените стили:

1) Внутренняя тень:

Используйте цвет #184702 для тени

2) Обводка, размер 3 px, внутри, цвет #FFFFFF, то есть белый.

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

Создайте новый слой.

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

Примените стиль Тень:

И сделайте белую обводку размером 3 px.

Теперь найдите фото с пейзажем… что-нибудь нейтральное, например такое:

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

Вот, к чему вам нужно стремиться…

Возьмите то же самое фото, сделайте его меньше, разместите в левой стороне хедера.

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

Возьмите инструмент Текст, шрифт Arial, цвет белый, размер 11-12 px, и напишите названия ссылок.

На данный момент, вот что у нас получилось.

На пустом голубом пространстве напишите название вашего сайта.

Логотипу сайта можно добавить легкий эффект объема.

Создайте еще один слой. Нарисуйте прямоугольное выделение в основном окне макета под хедером (заголовком)

Добавьте белую обводку снаружи.

И градиент: от #68b13a (сверху) к #2c7e0e (внизу)

Прямо поверх зеленого прямоугольника нарисуйте еще один с помощью нашего любимого выделения и нажмите «Delete».

Таким образом, вы вырежете дырку в зеленом квадрате.

Добавьте текст в этот прямоугольник…

То же самое повторите и сделайте второе окно в зеленом квадрате. Это будет основное текстовое окно.

И вот ваш результат!

Веб и дизайнеры | Полная платформа ресурсов для веб-дизайнеров и разработчиков — Создание макета веб-сайта в Photoshop — ПОРТФОЛИЯ

объявление

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

Введите адрес электронной почты и скачайте его сейчас!

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

Шаг 1: Добавьте сетку 960

Выравнивание необходимо для любого дизайна. Мы будем использовать систему 960s Grid, которую вы можете скачать здесь. После загрузки файла откройте 960_grid_12_col.psd, который находится в папке фотошопа. Обычно размер документа составляет 1080 X 1080 пикселей, но для нашего шаблона нам нужно 1200 X 1100 пикселей. Чтобы изменить размер шаблона, перейдите в меню «Изображение» -> «Размер холста», введите ширину 180 и высоту 80 и нажмите стрелку вверх. Это сделает шаблон 1200 X 1100 пикселей. Чтобы залить фоновый слой белым цветом, выберите фоновый слой, нажмите Shift + Backspace и залейте его белым цветом.

Шаг 2: Структура папки

Мне нравится сохранять структуру при проектировании чего-либо, и мне нравится, когда вы это делаете. Разделите этот дизайн на 3 части (верхний колонтитул, основной текст и нижний колонтитул). Чтобы реализовать это, создайте три папки с именами Header, Body и Footer в палитре слоев. Мы будем работать над каждым разделом шаг за шагом: сначала над заголовком, затем над телом и, наконец, над нижним колонтитулом.

Шаг 3. Добавьте градиентный фон в заголовок

Перед добавлением градиентного фона мы добавим направляющие линии.Нажмите View -> New Guide, выберите горизонтальный и введите 100 для позиции. Повторите тот же шаг, чтобы добавить направляющую линию 140 пикселей и 180 пикселей.

Чтобы добавить градиентный фон в раздел заголовка, создайте новый слой под названием Header bg. Используя инструмент выделения, создайте выделение размером 1200×140 пикселей, затем нажмите Shift + Backspace и залейте его любым цветом. Затем щелкните правой кнопкой мыши слой Header bg и выберите параметры наложения. Примените следующие настройки для наложения градиента в соответствии со следующим изображением.

Шаг 4. Добавьте две пиксельные линии

Около 80 пикселей сверху добавьте две линии в один пиксель.Создайте новый слой под названием Line 1px dark, выберите инструмент Marquee Tool и выберите 940 x 1 px, как показано на изображении ниже.

Залейте слой цветом # A54E0F, повторите то же самое для другой линии 1px, назовите его Line 1px dark и залейте его цветом # E37D1E.

Шаг 5: время очистки

Это хорошая привычка начинать систематизировать файл с самого начала. Если вы работали с одной и той же папкой (Header bg), весь слой, который мы создали до сих пор, должен находиться в ней. Даже если тебе не о чем волноваться. Заблокируйте свой фоновый слой.

Используя инструмент выделения, перетащите выделение за пределы документа так, чтобы были выбраны три слоя Header bg, Line 1px light и Line 1px dark. Теперь в палитре слоев перетащите выбранные слои в папку Background. С этого момента я не буду объяснять этот шаг для организации файла, а просто обратитесь к шагу 5.

Шаг 6. Вставьте свой логотип

Введите PORTFOLIA чуть выше 1px линий, щелкните правой кнопкой мыши слой portfolia и добавьте параметр смешивания со следующими настройками.

Теперь мы добавим затухающий свет за логотипом, чтобы создать новый слой с именем Fade, установить режим слоя на Overlay.Используя инструмент Rectangle Marquee Tool, выберите прямоугольник, чтобы закрыть логотип, затем выберите мягкую кисть 175 пикселей и установите цвет на #FFFFFF. Кликните по слою несколько раз, чтобы придать ему эффект затухания. У вас должен быть световой эффект позади логотипа.

Шаг 7. Кнопка призыва к действию

Выберите инструмент Прямоугольник со скругленными углами и установите радиус 15 пикселей. Перетащите, чтобы создать круглый прямоугольник 225 х 30 пикселей, назовите его Оранжевый прямоугольник. Добавьте стиль слоя со следующими настройками.

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

Добавьте к слою следующие настройки слоя.

Напишите номер телефона и сделайте внешний вид яркости в настройках стиля слоя.

Добавьте текст «Позвоните нам» и используйте следующую настройку.

Мы почти закончили с кнопкой призыва к действию 🙂, но нужно добавить последний бит. Добавьте две линии размером 1 пиксель между текстом «Позвоните нам» и номером телефона.

Создайте папку с названием «Кнопка призыва к действию» и выполните шаг 5.

Шаг 8: Добавьте навигацию

Выберите инструмент «Круглый прямоугольник» с радиусом 10 пикселей. Нарисуйте круглый прямоугольник размером 100 x 40 пикселей.

Добавить текст в меню навигации.

Семейство шрифтов: Verdana
Размер шрифта: 14pt
Стиль шрифта: Обычный
Цвет шрифта: #FFFFFF

Давайте добавим немного тени под меню, чтобы создать новый слой под названием Nav bottom shadow.С помощью инструмента «Прямоугольник» нарисуйте прямоугольник размером 1200×40 пикселей и добавьте тень со следующими настройками

Мы закончили с разделом заголовка, поэтому поместите все слои и папки в папку заголовка, кроме фонового слоя.

Шаг 9. Слайдер изображения

Загрузите три изображения из SXC

Поместите загруженные изображения в документ. Измените размер изображения подсолнуха и кориандра до 300×200 пикселей и поместите его в середину документа. Измените размер двух других изображений до 240×158 пикселей и поместите их слева и справа от документа.После совмещения изображений размыте два небольших изображения. Перейдите в Filter-> Blur-> Motion Blur. Установите угол 180 и расстояние 6 пикселей.

Теперь очередь теней. Используя инструмент «Прямоугольник», создайте прямоугольник размером 300 x 120 пикселей и залейте его черным цветом # 000000.

Затем щелкните правой кнопкой мыши прямоугольник и выберите перспективу.

Перетащите якорь с одного из верхних концов, чтобы сделать его похожим на изображение ниже. Теперь перейдите в Filter-> Blur-> Motion Blur. Установите угол 180 и расстояние 6 пикселей.Затем перейдите в Фильтр-> Размытие-> Размытие по Гауссу, установите радиус 5,5 пикселей. Во время размытия изображения всплывающее окно попросит сначала растрировать форму, нажмите ОК.

Переместите слой за изображением, и он должен выглядеть, как на изображении ниже.

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

Шаг 10: ползунок

Нарисуйте ползунок для ползунка с помощью инструмента «Прямоугольник со скругленными углами» с радиусом 20 пикселей. Снова используя инструмент Прямоугольник со скругленными углами с радиусом 8 пикселей, нарисуйте прямоугольник 70 х 26 пикселей.Примените к ползунку следующие настройки параметров наложения.

Пора добавить ручку ползунка к кнопке ползунка. Используя инструмент Rectangle Marquee Tool, нарисуйте область размером 1 x 13 пикселей и залейте ее белым цветом. Затем примените настройку наложения градиента к слою, назовите его 1px gradient line. Повторите слой 4 раза и переместите скопированный слой к смежным сторонам.

Шаг 11: Область содержимого

Добавьте две новые направляющие 480 и 520 пикселей. Затем загрузите иконки из базового набора Pixel-Mixer и из базового набора Pixel-Mixer 2.Перетащите значок инструмента настройки из базового набора 2 из загруженного значка.

Напишите текст для заголовка со следующими настройками

Шрифт: Arial
Размер шрифта: 18px
Цвет: # E5932A
Стиль шрифта: Курсив

Сделать то же самое для основного текста со следующими настройками

Шрифт: Arial
Размер шрифта: 13px
Цвет: # 79807C
Стиль шрифта: Обычный

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

Пора снова организовать файл. Создайте папку с вызовом «Основное содержимое» и повторите шаг 5.

Шаг 12: Свидетельство

Добавьте две новые направляющие на 620 и 660 пикселей. Используя инструмент «Прямоугольник со скругленными углами», создайте прямоугольник с радиусом 10 пикселей (ширина: 940 пикселей и высота: 140 пикселей). Примените к слою следующие настройки.

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

Для типа знака цитаты »со следующими настройками

Шрифт: Arial
Размер шрифта: 80px
Цвет: # 6E6C6C
Стиль шрифта: Курсив

Сделайте то же самое для основного отзыва со следующими настройками

Шрифт: Arial
Размер шрифта: 13px
Цвет: # 79807C
Стиль шрифта: Курсив

Затем добавьте имя с такими же настройками, кроме стиля шрифта: Обычный, а для ссылки на веб-сайт используйте Цвет: # E5932A.

Шаг 13: нижний колонтитул

Нарисуйте прямоугольник с помощью инструмента «Прямоугольник со скругленными углами» с радиусом 8 пикселей, равным 920 x 170 пикселей и цветом # E37DLE. Примените следующие настройки параметров обводки к прямоугольнику. Назовите этот слой «Рамка коробки».

Теперь в нижней части круглого прямоугольника создайте прямоугольник размером 940 x 60 пикселей (назовите этот слой «Передняя форма» и примените наложение градиента, как показано на изображении ниже.

Это должно выглядеть так.

После создания базовой основы для нижнего колонтитула добавьте тень под ней.Для этого нарисуйте прямоугольник 850 х 70 пикселей, назовите его Тень. Нажмите Edit -> Free Transform, затем щелкните правой кнопкой мыши прямоугольник и выберите Perspective. Перетащите верхнюю точку с одной стороны прямоугольника к другой точке, пока она не станет похожей на изображение ниже.

Перейдите в Filter -> Blur -> Motion Blur и примените следующие настройки.

Снова перейдите в Фильтр -> Размытие -> Размытие по Гауссу

Переместите слой Shadow под другой нижний колонтитул.

Чтобы добавить битовый 3D-эффект, добавьте новый слой «Прямоугольная форма слева» размером 26 x 60 пикселей, закрасьте его цветом # B16117.Нажмите Edit -> Free Transform, затем щелкните правой кнопкой мыши прямоугольник и выберите Skew. Удерживая клавишу Alt, перетащите верхнюю правую точку вверх.

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

Для прокрутки эскизов начните с добавления нового скругленного прямоугольника (назовите его Image shape) размером 175x100px, залейте его цветом #FFFFFF и примените обводку 1px # 985414. Загрузите изображение MAM Chihuly Show 5 с SXC и поместите его над слоем Image shape.Выберите слой изображения, затем перейдите в Слой -> Создать обтравочную маску, это замаскирует изображение со слоем прямоугольника под ним. При необходимости отрегулируйте изображение. Чтобы показать эффект приподнятости на миниатюре, добавьте слой Тень и с помощью инструмента Эллипс создайте небольшой эллипс и перейдите в Фильтр -> Размытие по Гауссу с Raidus 1.3px, теперь у вас должно быть уменьшенное изображение с тенью, как на изображении ниже.

Повторите те же шаги, чтобы создать еще два эскиза.

Последний шаг 🙂 этого урока — добавить стрелки для миниатюр.Создайте круг (назовите его Стрелка круг влево) размером 19 x 19 пикселей, примените следующие настройки к слою.

Над слоем с кругом добавьте новый слой и назовите его «Стрелка влево». Добавьте маленькую стрелку и примените настройку обводки, как показано ниже.

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

Заключение

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

Создайте чистый, минималистичный дизайн веб-сайта в Photoshop

Сегодня мы собираемся создать чистый, минималистичный макет HTML в Photoshop, идеально подходящий для любого фотографа или творческого профессионала. Мы будем использовать несколько простых эффектов и стилей слоев, чтобы добиться минимального дизайна.

Окончательный макет веб-сайта

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

Шаг 1

Загрузите сетку 960 из 960.gs. Я использую макет из 12 столбцов.

Шаг 2

Откройте шаблон в фотошопе. Теперь нам нужно немного увеличить размер холста. Выберите размер холста (Изображение> Размер холста) и измените макет на 1200 × 1200 пикселей. Убедитесь, что якорь установлен в верхнюю середину, чтобы слои нашей сетки оставались по центру.

Шаг 3

Мне часто нравится создавать область образцов для своего дизайна, чтобы легко подбирать цвета на лету. Я создам три прямоугольника в правом верхнем углу, залитые следующими цветами: # 777777, #DDDDDD и # 00aeef.Включите направляющие (ярлык: cmd +;), и мы готовы к созданию.

Шаг 4

Начнем с названия. В качестве основного текста мы будем использовать Droid Serif. Установите размер шрифта на 24 пикселя и цвет на # 77777. Выровняйте текст по центру страницы, используя макет сетки.

Шаг 5

Давайте добавим к заголовку верхнюю и нижнюю границы. Откройте инструмент «Линия» и установите его ширину 1 пиксель, мы будем использовать более светлый серый цвет (# 777777). Добавьте верхнюю строку и продублируйте ее (alt + перетаскивание).Затем выберите два верхних слоя и (alt + перетащите), чтобы скопировать их под заголовком. Наконец, возьмите инструмент пользовательской формы и откройте группу фигур орнаментов (находится в небольшом меню в правом верхнем углу раскрывающегося списка фигур). Я использую орнамент 5 (см. Изображение) и наш голубой цвет, чтобы нарисовать орнамент над заголовком.

Шаг 6

Последняя часть нашего логотипа будет нашим подзаголовком. Этот сайт предназначен для студии дизайна / фотографии, поэтому давайте воспользуемся крупным шрифтом (я использую Zapfino), чтобы написать «Дизайн и фотография».

Шаг 7

Давайте добавим текстурированную кнопку прокрутки вверху страницы для очень заметного призыва к действию. Выбрав наш синий цвет, нарисуйте прямоугольник в правом верхнем углу документа. Выровняйте по сетке 960.

Шаг 8

Возьмите инструмент «Перо» и добавьте точку в нижней центральной линии. Возьмите инструмент точки преобразования, чтобы удалить кривые Безье, и перетащите точку вверх, чтобы добиться нужного среза.

Шаг 9

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

Шаг 10

Удерживая Cmd щелкните базовый слой прокрутки, чтобы превратить его область в выделение. Инвертируйте выделение (cmd + shift + i) и, выбрав граничный слой в меню слоев, нажмите «Удалить», чтобы удалить лишние линии за пределами области прокрутки.

Шаг 11

Теперь мы преобразуем всю прокрутку в смарт-объект, чтобы применить некоторые эффекты. В меню слоев выберите слой прокрутки и границы, щелкните правой кнопкой мыши и выберите в меню «преобразовать в смарт-объект».

Шаг 12

Давайте добавим немного шума, чтобы придать текстуру. (Фильтр> Шум> Добавить шум). Установите его на 1,5%.

Шаг 13

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

Шаг 14

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

Шаг 15

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

Шаг 16

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

Шаг 17

Существенно уменьшите непрозрачность этого слоя (20%), чтобы оставить только малейшую текстуру.

Шаг 18

Теперь давайте добавим нашу навигацию. Напечатайте свою навигацию и равномерно распределите ее по центру страницы. Я добавил дополнительные строки (используемые в логотипе заголовка), чтобы обозначить навигацию. Наконец, добавьте синие ромбы (используя инструмент настраиваемого слоя), чтобы отделить каждый пункт меню.

Шаг 19

Возьмите фотографию, которую хотите разместить на сайте. Я использую это изображение грузовика. Чтобы соответствовать тону сайта, я собираюсь обесцветить его (Изображение> Коррекция> Обесцветить).Вам также может потребоваться настроить уровни в зависимости от выбранного изображения.

Шаг 20

Перетащите его в свой шаблон и измените размер, чтобы он соответствовал области. Если вам нужно обрезать его, возьмите инструмент выделения, сделайте свой выбор, нажмите cmd + shift + i, чтобы инвертировать выделение (как мы сделали с прокруткой) и удалите любое лишнее изображение.

Шаг 21

Затем мы добавим несколько сегментов контента под нашим основным изображением. Я использую голубой цвет и Droid Serif для названий.Возьмите текстовый инструмент и нарисуйте текстовое поле в 4 красных областях сетки. Это гарантирует, что сегменты равномерно сбалансированы по странице. Добавьте свой текст или lorem-ipsum. Наконец, я добавил еще один орнамент (из нашего ранее использовавшегося инструмента создания нестандартных форм орнаментов).

Шаг 22

Продублируйте эту текстовую область, нажав Alt + перетаскивание, чтобы создать 3 сегмента содержимого.

Шаг 23

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

Шаг 24

Остался только нижний колонтитул. Мы создадим еще несколько светло-серых линий, добавим текст об авторских правах, скопируем орнамент заголовка и перевернем его так, чтобы он располагался под нижним колонтитулом (Правка> Трансформировать> Отразить по вертикали)

Шаг 25

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

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

Скачать PSD

Поделитесь этим с друзьями:

Хотите больше? Подпишитесь, и мы вам его доставим.

Подпишитесь на RSS-канал или на рассылку обновлений по электронной почте, чтобы получать еще больше интересного контента!

30 руководств по Photoshop для веб-дизайнеров

Photoshop можно использовать для многих целей, и одно из наиболее распространенных применений — для разработки веб-интерфейсов и мобильных пользовательских интерфейсов (UI). Вот несколько руководств по пользовательскому интерфейсу, в которых вы узнаете, как создавать полные сайты и различные элементы сайта в Photoshop.

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

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

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

Аудиоплееры

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

Из этого туториала Вы узнаете, как просто создать простой, но стильный слайдер в Photoshop.

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

Я знаю, что аудиоплееры вряд ли являются наиболее часто используемым элементом пользовательского интерфейса, но поскольку проигрыватель в этом руководстве выглядит потрясающе, я включил его в этот список. В этом руководстве используется Illustrator — вы можете создать аналогичный проигрыватель в Photoshop или любой другой программе для дизайна, но с Illustrator это намного проще.Если вы не знакомы с методами построения идеальной векторной формы с пикселями, у вас будет возможность узнать о них в этом уроке.

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

~~Отличный интерфейс для приложения iPad~~

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

~~Учебное пособие по дизайну веб-сайтов для приложений iOS~~

Итак, это одно большое руководство (как и изображение, которое его сопровождает)! В отличие от других руководств, это часовой видеоурок.Если вы ищете быстрое руководство, это не одно из них — со всеми перемотками назад и вперед вам может потребоваться от 3 до 4 или даже больше часов, но конечный результат — четкий веб-сайт с брошюрой о приложении для iOS — это определенно того стоит.

Простые и функциональные рекламные мобильные приложения Целевая страница

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

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

Разработка макета бизнес-сети

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

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

Это еще один учебник с идеальным пикселем, в котором используются стили слоев и базовые векторные формы для создания чистого интерфейса приложения Twitter.Поскольку вы будете разрабатывать полный интерфейс приложения, не ожидайте, что руководство будет коротким и быстрым. Этот учебник огромен — в нем более 80 шагов, поэтому вам лучше посвятить ему как минимум полдня. Есть много деталей, на которые нужно обратить внимание, и хорошая новость в том, что они очень хорошо объяснены.

Винтажный макет портфолио с использованием Photoshop

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

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

Простой и профессиональный макет финансового веб-сайта

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

Архивные учебные пособия

Текстурированный веб-макет

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

Чистый веб-макет с сеткой 960

В этом руководстве вы создадите чистый макет веб-сайта с использованием системы 960 Grid System. Вы увидите, как работа с этой системой может упростить рабочий процесс веб-разработки и как работать с сеткой.

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

Из этого урока вы узнаете, как создать красивый и чистый веб-сайт для потоковой передачи музыки в Photoshop.

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

Узнайте, как создать суперпрофессиональный веб-дизайн портфолио с помощью ряда методов, включая световые эффекты, варианты смешивания и общую теорию дизайна.

Чистый и красочный веб-макет

В этом уроке вам покажут, как создать чистый корпоративный макет в Photoshop.

Из этого урока вы узнаете, как создать чистый и минималистичный макет портфолио в Photoshop.

В этом подробном руководстве вы узнаете, как создать макет Web 2.0 с помощью 960.gs.

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

~~Чистый макет портфеля~~

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

Из этого туториала Вы узнаете, как сделать простой и понятный макет для своего iPhone-приложения.

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

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

Готово!

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

Создание веб-макета в стиле гранж в Photoshop

22 апр. Создание веб-макета в стиле гранж в Photoshop

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

Шаг 1:

На этот раз мы собираемся создать полноценный веб-дизайн в стиле гранж с помощью Photoshop и множества стоковых изображений.Поскольку это руководство среднего и продвинутого уровней, я пропущу объяснение некоторых основных шагов. Сначала создайте новый документ размером 950 на 800 пикселей с разрешением RGB 72dpi. Покажите линейки и перетащите четыре направляющих, ограничивающих документ, это будет оптимальная область дизайна. Я планирую сохранить макет фиксированной ширины.

Перейдите в Изображение> Размер холста и увеличьте ширину и высоту намного больше, 1200 пикселей на 1000 пикселей в порядке, таким образом мы будем проектировать для более широких разрешений экрана. Затем добавьте дополнительные направляющие, куда вы планируете добавить контейнеры (верхний колонтитул, панель навигации, боковая панель, нижний колонтитул).

Давайте представим, что этот дизайн предназначен для шаблона WordPress, поэтому нам понадобятся заголовок, панель навигации внутри заголовка и правая боковая панель. Взгляните на нижнюю часть следующего изображения. Затем залейте фон этим цветом # 7A8173.

Шаг 2:

Теперь мы собираемся создать узор для фона заголовка, который довольно прост. Создайте новый документ размером 50 на 300 пикселей и нарисуйте что-то вроде изображения ниже. Я использую направляющие, чтобы сделать мою фигуру максимально симметричной.Затем перейдите в меню «Правка»> «Определить узор» и сохраните фигуру как «узор 1».

Шаг 3:

На новом слое в нашем основном файле дизайна нарисуйте прямоугольник высотой 300 пикселей с помощью инструмента «Прямоугольник». Перейдите в Фильтры и добавьте наложение узора, найдите свой новый узор и примените его. Чтобы он выглядел правильно, вы должны нажать кнопку «Привязать к исходной точке». Измените заливку слоя на 0%, создайте новый пустой слой над слоем-фигурой и объедините оба, таким образом, у вас будет готовый узор для добавления к нему некоторых эффектов.Назовите этот слой «Узор 1».

Шаг 4:

Выберите слой «Pattern 1» и примените к нему несколько стилей слоя: Drop Shadow, Gradient Overlay и Pattern Overlay. Попробуйте получить что-то похожее на нижнюю часть изображения ниже, используя следующие значения.

Шаг 5:

Теперь мы собираемся добавить фон панели навигации. Нарисуйте прямоугольник, немного скрывающий слой «Узор 1». Примените к этому прямоугольнику наложение Узор, наложение градиента от черного к красно-черному и мягкую тень.Используйте значения изображений ниже в качестве справки. Затем добавьте маску слоя> Скрыть все и нарисуйте отраженный градиент от черного к белому к черному на маске слоя, вы получите что-то похожее на нижнее изображение ниже.

Шаг 6:

Теперь нарисуйте эллипс (# 691E1B) над слоем «Узор 1», назовите его «Свет» и примените к нему размытие по Гауссу с радиусом 50 пикселей. Я создал дополнительную направляющую, чтобы нарисовать свет в центре заголовка. Удалите все, что находится под панелью навигации, и измените режим наложения слоя на Color Dodge.

Шаг 7:

Чтобы закончить первую часть макета, мы собираемся нарисовать фон боковой панели. Нарисуйте несколько направляющих, чтобы ограничить боковую панель, а также отредактируйте существующие направляющие, чтобы они соответствовали реальному дизайну. Затем нарисуйте красный прямоугольник (# 3D100B) и примените следующие стили: Drop Shadow, Color Overlay и Pattern Overlay.

На этом этапе вы должны подумать о том, как вы собираетесь вырезать изображение в HTML + CSS; Вот почему я большую часть времени использую падающие тени с расстоянием 0 пикселей и только горизонтальные или вертикальные градиенты.Текстура в этом случае имеет много горизонтальных линий. Это должно быть легко преобразовать в повторяющийся фон для многих областей. Кроме того, это хороший момент, чтобы сделать перерыв и организовать слои в папках, чтобы все было организовано.

Шаг 8:

Теперь начнем с деталей. Я хочу добавить название сайта на видном месте, поэтому я буду использовать это красивое изображение этикетки в стиле гранж. Очевидно, вы должны извлечь этикетку и разместить ее в верхнем левом углу нашего дизайна.Попробуйте получить что-то вроде первого изображения ниже. Затем используйте инструмент Magic Wand, чтобы выделить маленький коричневый кружок, затем Ctrl + Shift + I, чтобы инвертировать выделение. Отрегулируйте уровни и оттенок / насыщенность, используя значения, показанные ниже.

Шаг 9:

Теперь, используя инструмент «Ластик» и неправильную кисть, удалите некоторые области границы этикетки. Чтобы добавить эффект вырезания из бумаги, выберите инструмент «Осветление» и используйте ту же кисть, чтобы применить осветление к границе этикетки.

Шаг 10:

Теперь мы добавим тень к нашему ярлыку. Для этого продублируйте слой «Label», измените Hue / Saturation> Lightness на -100 и примените Gaussian Blur с радиусом 10 пикселей. Затем измените режим наложения «Копия метки» на Умножение и установите Непрозрачность на 75%.

Шаг 11:

Последняя обработка этикетки, измените насыщенность на -40, чтобы сделать ее более серой.

Шаг 12:

Теперь мы добавим несколько вспомогательных изображений, попытаемся найти изображения, окружающие концепцию, но, поскольку это руководство по методам, я выбираю случайный.Это красивая фотография старинного поезда здесь, в высокогорье Боливии. Выдвиньте форму поезда, как хотите. Затем измените режим наложения слоя «train» на Darken.

Шаг 13:

Давайте добавим текст, сначала имя страницы. Напечатайте что-нибудь с использованием гранжевого шрифта; Вы можете найти несколько интересных здесь. Для заголовка используйте черный шрифт и измените режим наложения слоя на Overlay, затем продублируйте слой и измените непрозрачность копии на 75%.Чтобы получить крошечный эффект размытия, переместите скопированный слой на один или два пикселя влево или вправо. Добавьте больше текста, используя эту технику, например слоган или что-то в этом роде. Кроме того, сейчас хороший момент, чтобы добавить и навигационные ссылки.

Шаг 14:

А теперь добавим больше вещей, это стиль гранж! Я скачал несколько кистей Jenn B отсюда, у этих кистей есть ограничения. Используя эти кисти, добавьте несколько цифр, углов, малярных лент и прочего, не стесняйтесь делать на этом этапе все, что захотите.Просто не забудьте добавить все слои под слоями «Этикетка» и «Копия метки».

Шаг 15:

Теперь мы начнем добавлять разделы страницы. Прежде всего, в шапке нам понадобится строка поиска. Введите метку поиска. Затем нарисуйте красный прямоугольник (# 6A0400) в качестве поля ввода для поиска, затем примените эффект слоя «Обводка» и «Узор».

Шаг 16:

Теперь мы начнем добавлять основное содержание нашего дизайна. Сначала мы собираемся добавить поле, в которое будет помещен избранный текст.Нарисуйте темно-серый прямоугольник (# 0D0F0E) на слое под боковой панелью. Я создал четыре папки, чтобы упорядочить макет: одну для «Заголовка» над всем, одну для «Боковой панели» под «Заголовком», одну для «Контента» под «Заголовком» и «Боковой панелью» и последнюю. один для «Нижнего колонтитула».

Вы можете добавить этот прямоугольник в слой «Content», также вы можете добавить столько папок, сколько необходимо внутри этих четырех папок. После того, как вы разместили прямоугольник в нужном месте, примените эффект Drop shadow и Stroke, используя значения, указанные ниже.

Шаг 17:

Загрузите несколько гранжевых углов и границ отсюда и вставьте один на серый фон. Затем примените эффект наложения к углу с цветом # 171612. Также добавьте еще один угол над фоном боковой панели, но на этот раз снизьте его непрозрачность ниже 25%.

Шаг 18:

Давайте добавим текст. Вы можете добавить любой образец текста, представьте, что это раздел недавних сообщений, созданный с помощью javascript, или раздел избранных сообщений, что-то в этом роде.Я использую тот же гранжевый экранный шрифт, что и для панели навигации, с цветом # 4D0D0D, и Arial с цветом # 3F3F3F для основного текста.

Примените эффект тени к заголовку и добавьте тот же эффект к элементам навигации. Когда вы конвертируете этот PSD в файл HTML + CSS, вам нужно будет преобразовать эти заголовки в изображения, так что ничего страшного, если вы хотите добавить к ним больше стилей. Наконец, используйте направляющие, чтобы расположить текстовые слои в нужных местах.

Шаг 19:

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

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

Шаг 20:

У меня была эта фотография с сепией, поэтому я добавляю ее в дизайн. Добавьте любое изображение в новый слой над слоем «Polaroid», выберите черный квадрат поляроида, затем Command + Shift + I, чтобы инвертировать выделение. Выберите слой с изображением и удалите все лишнее. Затем вы можете добавить больше деталей в стиле гранж, например, клейкой ленты поверх изображения, как показано на изображениях ниже. Я также применил эффект Drop Shadow размером 1px к добавленной ленте.

Шаг 21:

Сейчас хороший момент, чтобы добавить значок RSS на боковую панель. Нарисуйте прямоугольник с закругленными углами (# 99917E), затем примените к нему следующие эффекты: внутреннее свечение, наложение узора и тень, используйте значения, показанные на изображении ниже. Затем нарисуйте или вставьте в новый слой над прямоугольником стандартную фигуру RSS и залейте ее черным цветом. Наконец, измените режим наложения слоя «RSS shape» на Overlay.

Шаг 22:

Теперь поместите значок RSS в левый верхний угол боковой панели.Добавьте текст, например «RSS FEED». Нарисуйте еще один кусок малярной ленты и напишите на нем количество подписчиков. Помните, сейчас мы работаем с папкой «Боковая панель».

Шаг 23:

Пришло время добавить одну запись в наш дизайн. Просто напишите случайный текст в качестве заголовка, другую строку для даты, категории и автора. Также несколько слов в тексте поста. Типографика — самая важная на этом этапе. Я люблю использовать шрифты с засечками для заголовков и без засечек для основного текста, но это только я.Решите, что лучше всего подходит для вашего дизайна.

Шаг 24:

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

Это изображение будет на 35-миллиметровой пленке. Извлеките две маленькие полоски из пленки и измените их оттенок / насыщенность, используя значения на изображении ниже.Затем, используя нестандартный ластик, удалите некоторые участки полос. Наконец, добавьте тень к каждой полосе. Когда вы закончите с пленкой, вставьте любое изображение под слоями пленки. Я добавляю фотографию одного из своих путешествий. Наконец, примените к этому изображению эффект обводки (# 2F261D).

Шаг 25:

Нарисуйте красную линию размером 2 пикселя под сообщением и немного текста для комментариев. Рекомендуется добавить все слои, связанные с публикацией, в новую папку под названием «Сообщение». Затем немного увеличьте высоту документа, вы можете сделать это с помощью инструмента «Обрезка», просто чтобы посмотреть, как будет выглядеть наш дизайн, если на нем есть две или три публикации.Дублируйте группу «Пост» и измените текст и изображение, как показано ниже.

Шаг 26:

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

Шаг 27:

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

Шаг 28:

Мы почти закончили. Добавьте немного гранжевых деталей внизу боковой панели, добавив несколько гранжевых кистей на новый слой над фоновым слоем боковой панели. Выберите фоновый слой боковой панели, затем выберите «Слой»> «Маска слоя»> «Показать все». Затем скройте некоторые области в левом нижнем углу фона боковой панели с помощью неправильной черной кисти.

Шаг 29:

Наконец, выберите фоновый слой боковой панели и скопируйте его стиль.Нарисуйте прямоугольник внизу дизайна внутри папки «Нижний колонтитул» и вставьте в него стиль слоя. Затем извлеките и вставьте это изображение над фоном нижнего колонтитула.

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

Окончательный результат:

Надеюсь, вы сможете узнать что-то новое из этого руководства.

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

Удачи!

Ссылка: psd.tutsplus

Создание макета для некоммерческой организации в Photoshop

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

Вот конечный результат того, что мы будем создавать (щелкните изображение, чтобы увидеть его в полном размере)

Шаг 1. Создание нового документа

Перейдите в меню «Файл»> «Создать» и создайте новый документ шириной 1600 пикселей и высотой 1200 пикселей. Сайт будет использовать ширину 960 пикселей, но мы собираемся использовать дополнительное пространство по бокам, чтобы смешать текстурированные участки в сплошной цвет.

Шаг 2: Установка фона

На фоновом слое установите горизонтальную направляющую («Вид»> «Новая направляющая») на 520 пикселей, выберите все, что находится над этой линией, и с помощью инструмента «Ведро с краской» задайте цвет # b48c61.Затем с помощью инструмента «Ведро с краской» сделайте все, что находится ниже направляющей, более темно-коричневого цвета. Я использую # 312517.

Нарисуйте еще одну горизонтальную направляющую на 80 пикселей и залейте все выше этой линии цветом # 312517. Теперь у вас должен быть фон, который выглядит так:

Шаг 3: Добавьте текстуру

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

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

Область, которую мы заполняем текстурой, имеет ширину 1600 пикселей и высоту 440 пикселей, поэтому я выбираю вырезать часть такого размера на каждой фотографии, прежде чем вставлять ее в документ. Когда у вас есть текстуры нужного размера, скопируйте первую, выделите область между направляющими на 80 и 520 пикселей с помощью инструмента прямоугольной области и вставьте текстуру в выбранную область.

Затем вызовите параметры стилей слоя, дважды щелкнув слой в палитре слоев, чтобы мы могли настроить параметры наложения (или, выбрав слой, перейдите в Слой> Стиль слоя> Параметры наложения). Установите режим наложения на «наложение» и установите непрозрачность на 60%.

Затем повторите процесс, чтобы вставить вторую текстуру в ту же область. Поднимите параметры стиля слоя на этом слое, установите режим наложения «наложение» и на этот раз используйте непрозрачность 40%.У вас должно получиться что-то вроде этого:

Теперь текстура установлена, но она резко обрывается по бокам на любых широкоэкранных мониторах с шириной более 1600 пикселей. Я собираюсь использовать градиент, чтобы смешать текстуру с однотонным цветом, чтобы пользователи широкоэкранного изображения видели горизонтальные полосы, а текстура будет только посередине. Создайте новый слой поверх остальных и установите цвет переднего плана на # b48c61 (более светлый коричневый цвет, используемый на фоновом слое).Выберите инструмент градиента и выберите линейный градиент. Затем выберите градиент, который идет от цвета переднего плана к прозрачности.

Чтобы применить градиент, используйте прямоугольную рамку, чтобы выбрать текстурированную область (если она еще не выбрана), щелкните по левому краю, удерживайте нажатой клавишу Shift и перетащите ее примерно до отметки 300 пикселей (если у вас не повернуты линейки на, перейдите в Просмотр> Линейки) и отпустите кнопку мыши.

Затем создайте еще один слой и сделайте то же самое с правой стороны, приблизившись к отметке 1300 пикселей.

Шаг 4: Заголовок

У нашего сайта будет простой заголовок с названием выдуманной организации и пример слогана. Для начала добавьте текст для заголовка и выровняйте его по отметке 340 пикселей, используя вертикальную направляющую. Я использую шрифт Bebas с размером 24 пунктов, цветом # fdebd7 и набором эффектов тени # 000000, непрозрачностью 75% и 2 пикселя для расстояния и размера.

Затем я введу слоган справа от заголовка шрифтом Arial 14 pt и цветом # 886f4f.На данный момент это выглядит так:

Шаг 5: Меню навигации

Я буду использовать вертикальное меню навигации сразу под заголовком, которое будет располагаться поверх текстурированной области. Меню будет использовать непрозрачность, чтобы текстура просматривалась через меню. Вы можете установить вертикальные направляющие на 320 пикселей и 660 пикселей, чтобы контролировать ширину меню. Используйте инструмент прямоугольной области, чтобы выделить область. Затем установите цвет переднего плана на # 312517 (темно-коричневый, используемый для фона) и выберите инструмент «Ведро с краской».Затем установите непрозрачность на 40% (вы можете поэкспериментировать с разными уровнями непрозрачности и посмотреть, что вам нравится).

Теперь вы можете добавить боковые границы области навигации, используя цвет # 675138. Для этого я выбрал инструмент «Карандаш», выбрал квадратную кисть и установил ширину 1 пиксель. Щелкните один раз в том месте, где вы хотите начать границу. Затем переместитесь туда, где он должен закончиться, удерживая Shift, щелкните мышью. Это сделает прямую линию между двумя точками. Я также установил горизонтальные границы, чтобы разделить элементы навигации.Для этого я установил горизонтальные направляющие на 130, 215, 300, 385 и 470 пикселей и использовал эти направляющие, чтобы нарисовать границы с помощью инструмента «Карандаш».

Теперь мы можем добавить текст для меню навигации. Чтобы все было выровнено равномерно, вы можете установить вертикальную направляющую на 340 пикселей (которая будет выравнивать меню по вертикали с началом названия организации в заголовке) и горизонтальные направляющие на 150, 195, 235, 280, 320, 365, 405 и 450. Используйте эти направляющие для выравнивания текста по вертикали и горизонтали.Для более крупного текста, который не будет ссылками, я использую 18 pt Bebas и цвет # 312517. А для текста, который будет ссылками, я использую шрифт Arial 14 pt и цвет # 7b0900.

Вот что у нас есть:

Шаг 5: Основная область фото

Мы собираемся использовать крупную избранную фотографию с двумя другими фотографиями за ней. Я думаю, что самый простой подход — начать с изображения, которое будет спереди. Это фото, которое я купил на iStockphoto, его можно найти здесь.Фотография имеет ширину 425 пикселей и высоту 282 пикселя, а в окончательном дизайне она будет иметь границу в 10 пикселей по всему периметру. Для меня самый простой способ сделать это — создать новый документ 445 на 302 (добавляя пиксели с каждой стороны для границы) и использовать инструмент «ведро с краской», чтобы заполнить его цветом # fdead8. Затем вставьте фотографию в новый документ.

Затем мы добавим к изображению границу в 1 пиксель цвета # 9b7853. Для этого выберите инструмент «Карандаш» и квадратную кисть размером 1 пиксель и нарисуйте линию по краям с каждой стороны.Затем мы скопируем это изображение, вставим его в наш макет и разместим в текстурированной области. Вы можете использовать вертикальные направляющие на 660 пикселей и 1280 пикселей, чтобы показать ширину области, с которой вам нужно работать, и разместить ее посередине.

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

Когда вы вставляете эти фотографии, они будут лежать поверх основной фотографии. Нажмите Ctrl + T (трансформировать), и вы сможете наклонить фотографии, чтобы они лежали немного криво под основной фотографией.

С помощью мыши и / или клавиш со стрелками слегка поверните их и переместите немного влево и вправо от основной фотографии, чтобы были видны края. Затем перетащите слой, содержащий основную фотографию, поверх других слоев, и он будет выглядеть так:

Я также добавил тень на каждый из трех слоев, содержащих фотографии.Используйте цвет # 555353, непрозрачность 75%, угол 90 градусов, расстояние и размер 3.

Шаг 6: темная рамка

Под областью навигации и основной фотографией создайте границу высотой 10 пикселей, используя темно-коричневый цвет (# 21190f). Затем в нижней части границы используйте инструмент «Карандаш» с квадратной кистью шириной 1 пиксель и нарисуйте линию цвета # 433320.

Шаг 7. Боковая панель

Боковая панель будет содержать призыв к подписке на рассылку новостей и список предстоящих событий.Начнем с области рассылки новостей. Я использую вертикальные направляющие на 320 и 660 пикселей и горизонтальные направляющие на 540 и 715 пикселей, чтобы создать поле, в котором будет содержаться информация информационного бюллетеня. Цвет поля будет # fdebd8, с 5 пикселями # e5d4c1 на всем протяжении (эти 5 пикселей находятся внутри направляющих, упомянутых выше, а не снаружи). Я использовал инструмент прямоугольной области, чтобы выделить область, и ведро с краской, чтобы залить ее цветом.

Для значка почты я буду использовать элемент из набора значков Practika, выпущенного Smashing Magazine.Установите значок в левом верхнем углу с текстом «информационный бюллетень» 14 pt Bebas и № 312517. Ниже я использую строку текста шрифтом Arial 12 pt того же цвета.

Затем я установил горизонтальные направляющие для создания двух полей формы и кнопки отправки. Направляющие установлены на 625, 645, 655, 675, 685 и 705. Вертикальные направляющие также установлены на 380 и 550, а поля формы могут быть созданы с помощью инструмента прямоугольной области и ведра с краской.

Затем вы можете придать полям формы границу в 1 пиксель с помощью инструмента «Карандаш» и цвета # e5d4c1.После того, как вы создали поля формы, а затем кнопку, создайте текст для «Имя», «Электронная почта» и «Подписка», используя Arial 12 pt.

Шаг 8: Список событий

Под областью рассылки мы создадим пространство, в котором будут освещаться предстоящие события. Это поле будет использовать те же цвета, ту же рамку в 5 пикселей и такую же ширину (от 320 до 660 пикселей). Высота будет установлена с помощью горизонтальных направляющих на 735 и 1035.

В этом разделе я буду использовать значок календаря, который является частью набора значков Flavors, снова выпущенного Smashing Magazine.Установите значок и текст «Предстоящие события» (14 pt Bebas, # 312517) на место.

Я создал текстовое поле с 5 пикселями по бокам, которое будет содержать ссылки на предстоящие события и их даты. Элементы события выделены жирным шрифтом Arial 14 пт, # 7b0900. Дата и время: 12 пунктов, обычный Arial, # 312517. А внизу ссылка на полный календарь — обычный Arial размером 12 пунктов, # 7b0900.

Шаг 9: Основная текстовая область

Теперь мы можем перейти к основному тексту.Установите вертикальную направляющую на 680 и горизонтальную направляющую на 540 и используйте эти направляющие для выравнивания текстового поля на новом слое. В этом текстовом поле создайте заголовок, используя полужирный шрифт Arial 18 пунктов и цвет # fdebd8. Под заголовком вставьте несколько абзацев текста-заполнителя (я использую Lorem Ipsum). Основной текст — это шрифт Arial размером 12 пунктов, цвет которого совпадает с цветом заголовка.

Шаг 10. Нижний колонтитул

Теперь вы можете создать нижний колонтитул, создав новый слой и используя инструмент прямоугольной области, чтобы выделить область, и инструмент рисования, чтобы заполнить ее цветом # 21190f.Инструментом «Карандаш» нарисуйте границу в 1 пиксель # 433320.

Под боковой панелью создайте текстовое поле для хранения ссылок, которые будут помещены в нижний колонтитул. Для этого текста я использовал ту же настройку, что и основной текст, 12 pt Arial, # fdebd8.

Последнее, что нужно сделать, это добавить область фотографии в нижний колонтитул. Я буду использовать размер фотографии 100 на 100 пикселей, и вы можете выровнять все, установив вертикальные направляющие на 680, 780, 800, 900, 920, 1020, 1040, 1140, 1160 и 1260.И горизонтальные направляющие на 1075 и 1175. Это создаст пять блоков 100 x 100, где будут размещаться фотографии, с 20 пикселями между ними.

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

После вставки изображений моим последним действием было нарисовать рамку в 1 пиксель вокруг каждой фотографии с помощью инструмента «Карандаш» и цвета # 433320.

Окончательный результат:

Вот окончательный результат урока (щелкните изображение, чтобы увидеть его в полном размере):

Исходный файл Photoshop, использованный в этом руководстве, доступен для загрузки, если вы хотите его использовать: Загрузите zip-файл.

Если вы ищете вдохновение в веб-дизайне для создания некоммерческого веб-сайта, посмотрите новую публикацию на Vandelay Design, 40 лучших некоммерческих веб-сайтах.

PS Web Design Tutorial IV-How to Create a Professional Blog Website Layout in Photoshop

Дань сайту Talk-Mania. Год назад я видел на этом сайте много хороших руководств по веб-дизайну. Год спустя, когда я оглянулся, чтобы посмотреть, есть ли какие-нибудь новые учебники, я внезапно обнаружил, что веб-сайт больше не может быть открыт.Может быть, его закрыли, может, изменили название сайта. К счастью, в прошлом году я загрузил и сохранил несколько руководств, и этот учебник — одно из них. Я также надеюсь увидеть больше обучающих сайтов по дизайну веб-страниц PS и больше отличных дизайнов.

Конвенция:

1. В этой статье используется программа Photoshop CS5 версии

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

3.Некоторые операции в исходном тексте не давали параметров. После повторных тестов я измерил некоторые параметры, которые отображаются красным текстом. Некоторые неправильные параметры, правильные параметры отображаются прямо красным текстом

Например: （90，22，231，77）. Координаты верхнего левого угла прямоугольника: (90, 22), ширина 231, высота 77

Например: （90，22）, Координаты верхнего левого угла прямоугольника (90, 22), а два других параметра прямоугольника были указаны в учебном пособии

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

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

Мы будем использовать систему сеток 960 для создания веб-макета. Скачайте файл архива с сайта, распакуйте его и откройте файл «960_grid_12_col 2.psd» из папки «фотошоп».

Я буду использовать 960 Grid System, чтобы создать макет веб-сайта, загрузить файл с сайта, разархивировать его и открыть 960_grid_12_col 2.psd из папки фотошопа.

Поскольку веб-сайт Talk-Mania больше не доступен, а PSD фактически является файлом помощи при позиционировании, этот файл не используется в данном переводе.

Шаг 1
Увеличьте размер документа, выбрав «Изображение»> «Размер холста». Используйте настройки со следующего изображения. Затем выберите инструмент «Заливка» (G) и залейте фон цветом # f6f0e2.

шаг 1

В меню: Изображение> Размер холста увеличьте размер документа. Используйте конфигурацию, показанную на рисунке ниже, а затем выберите инструмент «Ведро с краской», чтобы добавить цвет фона к документу: # f6f0e2

Поскольку PSD не открывается, этот шаг становится новым документом размером 1200 * 1500 пикселей.Используйте инструмент «Ведро с краской», чтобы добавить цвет фона к документу: # f6f0e2

Результаты следующие:

Шаг 2
Выберите инструмент «Прямоугольник» (U) и создайте белый прямоугольник шириной 940 пикселей от верха документа до низа. Оставьте расстояние 30 пикселей от нижнего края документа. Назовите этот слой content bg, дважды щелкните по нему, чтобы открыть окно Layer Style, и добавьте обводку 1px, используя цвет # ded6c4.

Шаг 2

В документе используйте инструмент «Прямоугольник», чтобы создать белый прямоугольник шириной 940 пикселей сверху вниз (130，0，940，1470), 20 пикселей от нижнего края.Назовите содержимое слоя bg, дважды щелкните слой, чтобы открыть диалоговое окно стиля слоя, добавьте стиль обводки к прямоугольнику, шириной 1 пиксель, цветом: # ded6c4

Шаг 3 — Создание заголовка
Нажмите кнопку «Создать новую группу» в нижней части панели «Слои», чтобы создать новую группу и назовите ее «заголовок».
Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник высотой 10 пикселей в верхней части документа, используя цвет # aa915c. Назовите этот слой «верхняя панель».

Шаг 3 — создаем голову

Нажмите кнопку «Создать новую группу» в нижней части панели «Слои», чтобы создать новую группу и назовите ее заголовок.

Используйте инструмент «Прямоугольник», чтобы создать прямоугольник высотой 10 пикселей в верхней части документа (0，0，1200，10), цвет: # aa915c, с именем top bar.

Шаг 4
Выберите инструмент Line Tool (U), установите толщину 1px и нарисуйте горизонтальную линию внизу прямоугольника, который вы создали на предыдущем шаге, используя цвет # 968051.Назовите этот слой «линия 1px».
Нажмите Ctrl / Cmd + J, чтобы продублировать этот слой. Измените цвет новой строки на # c3a76a. Затем выберите инструмент «Перемещение» (V) и нажмите стрелку вверх один раз, чтобы переместить этот слой на один пиксель вверх.

Шаг 4

Используйте инструмент «Линия», чтобы нарисовать горизонтальную линию шириной 1 пиксель внизу только что созданного прямоугольника. Цвет: # 968051. Именованная линия 1px

Ctrl + J, чтобы скопировать слой и изменить цвет новой линии на # c3a76a. Затем выберите инструмент перемещения и один раз нажмите клавишу со стрелкой вверх, чтобы переместить линию вверх на один пиксель.

Шаг 5
Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник высотой 100 пикселей и цветом # e8c271 под первым прямоугольником. Назовите этот слой «header bg».

Под верхним прямоугольником с помощью инструмента «Прямоугольник» создайте прямоугольник высотой 100 пикселей, цвет: # e8c271. Именованный заголовок bg

Шаг 6
Ctrl / Cmd-щелчок по векторной маске слоя «header bg», чтобы выбрать его. Затем перейдите в Layer> New Fill Layer> Gradient.Выделение, которое вы сделали, теперь преобразовано в маску, и градиент будет виден только над заголовком.
Используйте настройки из следующего изображения для слоя Gradient Fill и переместите градиент в левую часть заголовка (чтобы переместить градиент, щелкните изображение и перетащите курсор на белый цвет, откроется окно Gradient Fill). Установите режим наложения этого слоя на Overlay 20%.

Шаг 6

Ctrl + щелчок и щелкните слой bg заголовка, чтобы выбрать его. Затем нажмите «Слой»> «Новый слой заливки»> «Градиент».Выделенная область преобразуется в маску, так что линейный градиент виден только в области головы.

Обратитесь к изображению ниже, чтобы узнать параметры градиентной заливки, а затем переместите слой градиента влево от области головы (при перемещении слоя градиента щелкните слой и обратите внимание на белый курсор при перетаскивании), установите непрозрачность слоя 20%

Шаг 7
Выберите инструмент Line Tool (U) и нарисуйте две линии толщиной 1px внизу заголовка.Используйте цвет # f4d48f для первой строки и # c6a661 для второй.

Шаг 7

Используйте инструмент «Линия», чтобы создать 2 горизонтальные линии шириной 1 пиксель в нижней части области головы. Цвет первой строки: # f4d48f; цвет второй строки: # c6a661

Шаг 8
Выберите инструмент «Текст» (T) и напишите название вашего веб-макета в левой части заголовка, используя цвет # f6eedd и шрифт Myriad Pro Bold Italic.
Активируйте направляющие, чтобы помочь вам правильно расположить этот текстовый слой.
Дважды щелкните этот слой, чтобы открыть окно «Стиль слоя» и использовать настройки со следующего изображения. Я использовал цвет # 8e7849 для Drop Shadow.

Шаг 8

Используйте текстовые инструменты, чтобы написать название вашего веб-сайта в левой части области заголовка макета вашего веб-сайта, цвет: # f6eedd, шрифт: Myriad Pro, полужирный и курсив

Активируйте направляющую линию, чтобы помочь вам правильно расположить текстовый слой.

Дважды щелкните текстовый слой, чтобы открыть диалоговое окно «Стиль слоя», затем установите параметры в соответствии со следующим рисунком и установите цвет проекции на # 8e7849

Шаг 9 — Создание панели навигации
Создайте новую группу и назовите ее «навигация».Выберите инструмент «Прямоугольник со скругленными углами» (U) и создайте прямоугольник со скругленными углами размером 550 на 50 пикселей и цветом # e9d09b. Назовите этот слой «панель навигации» и с помощью инструмента «Перемещение» (V) переместите его в правую часть макета на 10 пикселей под заголовком. Я использовал цвет # cdbd9b для Drop Shadow.

Шаг 9 — создание панели навигации

Создайте новую группу и назовите ее навигация. Создайте прямоугольник с закругленными углами с помощью инструмента «Прямоугольник со скругленными углами» (500，70), размер: 550 пикселей * 50 пикселей, цвет: # e9d09b, с именем navbar, используйте инструмент перемещения, чтобы переместиться в правую сторону документа, нижний край на 10 пикселей ниже. область головы.Добавьте стиль, как показано на рисунке, и цвет проекции: # cdbd9b

Шаг 10
Выберите инструмент «Текст» (T) и напишите названия пунктов меню навигации, используя цвет # fffcf4. Добавьте тень к вашим текстовым слоям, используя настройки со следующего изображения.

Шаг 10

Используйте текстовый инструмент, чтобы добавить меню панели навигации, цвет: # fffcf4. Добавьте проекцию к тексту, как показано на рисунке ниже:

Шаг 11 — Создание избранной области
Создайте новую группу и назовите ее «избранная».Затем выберите инструмент «Прямоугольник со скругленными углами» (U) и создайте прямоугольник размером 900 на 280 пикселей и цветом # d9cdb2. Назовите этот слой «Feature bg» и переместите его на расстояние 30 пикселей от нижнего края заголовка.

Шаг 11 — создание выделенной области

Создайте новую группу и назовите ее избранной. Затем используйте инструмент «Прямоугольник с закругленными углами», чтобы создать прямоугольник с закругленными углами (150 × 140), размер: 900 пикселей * 280 пикселей, цвет: # d9cdb2. Назовите этот слой Feature bg и переместите его в положение 30 пикселей от нижней части области головы.

Шаг 12.
Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник внутри большого скругленного прямоугольника с размерами 600 пикселей на 260 пикселей и цветом # f9f5ed.
Активируйте направляющие, чтобы помочь вам создать эту форму. Затем назовите этот слой «Держатель изображения».
Откройте изображение в Photoshop и переместите его в документ веб-макета с помощью инструмента «Перемещение» (V). Назовите этот слой «изображение» и поместите это изображение поверх слоя «держатель изображения». Щелкните правой кнопкой мыши слой «изображение» и выберите «Создать обтравочную маску».

Шаг 12

Используйте инструмент «Прямоугольник», чтобы создать прямоугольник в большом прямоугольнике с закругленными углами (160 × 150), размер: 600 пикселей * 260 пикселей, цвет: # f9f5ed

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

Откройте изображение в PS и с помощью мобильного инструмента переместите его в макет веб-страницы. Назовите этот слой image и переместите этот слой над держателем изображения слоя. Щелкните правой кнопкой мыши слой изображения и выберите Создать обтравочную маску

Step 13
Теперь мы создадим две стрелки для выделенной области.Выберите инструмент «Прямоугольник со скругленными углами» (U) и создайте небольшой прямоугольник со скругленными углами цвета # d9cdb2. Дважды щелкните этот слой, чтобы открыть окно «Стиль слоя» и использовать настройки со следующего изображения. Для обводки я использовал цвет # aaa18c. Назовите этот слой «прямоугольник с закругленными углами».

Шаг 13

Теперь мы собираемся создать 2 стрелки в выбранной области. Выберите инструмент «Прямоугольник со скругленными углами», чтобы создать инструмент «Маленький прямоугольник со скругленными углами» (710，260，60，40), цвет: # d9cdb2. Дважды щелкните этот слой, чтобы открыть окно стиля слоя и установить параметры, как показано на рисунке ниже.Цвет обводки: # aaa18c. Назовите этот слой скругленным прямоугольником

Шаг 14
Выберите инструмент Custom Shape Tool (U) и создайте форму стрелки внутри скругленного прямоугольника, используя цвет # e8e0c8. Дублируйте эту стрелку и переместите новую влево.
Выберите слой «Прямоугольник с закругленными углами» и два слоя со стрелками и нажмите Ctrl / Cmd + G, чтобы поместить их в группу. Назовите группу «стрелка вправо».

Шаг 14

Выберите инструмент пользовательской формы, чтобы создать форму стрелки в прямоугольнике с закругленными углами, цвет: # e8e0c8.Скопируйте стрелку и переместите ее влево

Выберите слой прямоугольника с закругленными углами и два слоя со стрелками, и Ctrl + G объединит их в группу. Назовите группу стрелкой вправо.

Шаг 15
Инструментом Rectangular Marquee Tool (M) выделите правую сторону маленького прямоугольника с закругленными углами. Убедитесь, что группа «стрелка вправо» выбрана, затем перейдите к Layer> Layer Mask> Hide Selection.

Шаг 15

Используйте инструмент выделения прямоугольника, чтобы выбрать правую сторону небольшого прямоугольника со скругленными углами.Убедитесь, что выбрана группа со стрелкой вправо, а затем щелкните меню: Слой> Маска слоя> Скрыть выделение

Шаг 16
Щелкните правой кнопкой мыши слой «стрелка вправо» и выберите «Преобразовать в смарт-объект». Дублируйте этот слой (Ctrl / Cmd + J). Затем перейдите в Edit> Transform> Flip Horizontal. Назовите новый слой «стрелка влево» и переместите его в левую часть выделенной области.

Шаг 16

Щелкните правой кнопкой мыши слой со стрелкой вправо и выберите «Преобразовать в смарт-объект».Скопируйте этот слой (Ctrl + J). Затем щелкните меню: Правка> Трансформировать> Отразить по горизонтали. Назовите новый слой со стрелкой влево и переместите его влево от выделенной области

Шаг 17
Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник размером 280 на 260 пикселей и цветом # f4ecd8. Поместите прямоугольник рядом с изображением и назовите этот слой «text bg». Дважды щелкните этот слой, чтобы открыть стиль слоя, и добавьте обводку в 1 пиксель, используя цвет # f8f4ea.

Шаг 17

Создайте прямоугольник с помощью инструмента «Прямоугольник» (760х150), размер: 280 пикселей * 260 пикселей, цвет: # f4ecd8.Прямоугольник прикреплен к правой стороне изображения в выделенной области и имеет название text bg. Дважды щелкните слой, чтобы открыть стиль слоя, добавьте обводку 1px, цвет обводки: # f8f4ea

Шаг 18
Ctrl / Cmd-щелчок по векторной маске слоя «text bg», чтобы выбрать прямоугольник. Затем перейдите в Layer> New Fill Layer> Gradient и используйте настройки со следующего изображения. Я использовал градиент # 362D1A-to-transparent. Пока открыто окно «Градиентная заливка», щелкните изображение и переместите градиент в левую часть прямоугольника.Затем установите непрозрачность этого слоя на 10%.

Шаг 18

Ctrl + щелчок по текстовому слою bg, чтобы выбрать прямоугольник. Затем щелкните меню: «Слой»> «Новый слой заливки»> «Градиент», а затем установите параметры в соответствии с рисунком ниже. В линейном градиенте установите цвет # 362D1A на прозрачный. Когда откроется окно градиентной заливки, щелкните градиент, чтобы переместиться влево от прямоугольника. Затем установите непрозрачность 10%.

Шаг 19
Создайте две вертикальные линии в левой части прямоугольника.Используйте цвет # c7bca0 для первой строки и # fffdf7 для второй.

Шаг 19

Создайте две вертикальные линии в левой части прямоугольника, цвет первой линии: # c7bca0, цвет второй линии: # fffdf7

Шаг 20.
Выберите инструмент «Текст» (T) и добавьте текст для выделенной области, используя цвет # 6e6758 и шрифт Helvetica.

Шаг 20

Используйте инструмент «Текст», чтобы добавить текст в выделенную область, цвет: # 6e6758, шрифт: Helvetica (в этом переводе вместо этого используется шрифт Verdana)

Шаг 21
Выберите инструмент «Линия» (U) и нарисуйте горизонтальную линию под выделенной областью, используя цвет # e7e1d5.

Шаг 21

Создайте горизонтальную линию с помощью инструмента «Линия» (150，445，900，1). Ниже выделенной области цвет: # e7e1d5

Шаг 22 — Создание области содержимого
Создайте новую группу и назовите ее «содержимое». Затем выберите инструмент «Прямоугольник» (U), удерживая клавишу Shift, создайте квадрат размером 200 на 200 пикселей и цветом # d9cdb2. Назовите этот слой «держатель изображения», дважды щелкните по нему и используйте настройки со следующего изображения, чтобы создать эффект двойной обводки.Я использовал цвет # f4ecd8 для Inner Glow и # ada48f для Stroke.
Выберите инструмент «Текст» (T) и добавьте текст рядом с квадратом.

Шаг 22 — создание области содержимого

Создайте новую группу и назовите ее content. Используя инструмент «Прямоугольник», удерживайте клавишу Shift, чтобы создать квадрат (150 × 470), размер: 200 пикселей * 200 пикселей, цвет: # d9cdb2. Назовите этот слой «держатель изображения», дважды щелкните слой, чтобы создать эффект двухцветной обводки, как показано на рисунке ниже. Цвет внутреннего свечения: # f4ecd8; цвет обводки: # ada48f.

Используйте инструмент «Текст», чтобы добавить текст справа от квадрата

Шаг 23
Дублируйте слои, которые вы создали на предыдущем шаге, пару раз. Используйте инструмент «Перемещение» (V), чтобы переместить новые слои под исходные.

Шаг 23

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

Шаг 24 — Создание боковой панели
Создайте новую группу и назовите ее «боковая панель».Выберите инструмент «Линия» (U) и нарисуйте вертикальную линию рядом с сообщениями в блоге, используя цвет # e7e1d5.

Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник размером 270 на 30 пикселей и цветом # fcf9f4. Добавьте обводку в 1 пиксель к этому слою с прямоугольником, используя цвет # e0dace. Назовите этот слой «панель поиска». Затем выберите инструмент «Текст» (T) и добавьте контент для боковой панели.

Шаг 24 — создание боковой панели

Создайте новую группу и назовите ее боковая панель. Используйте инструмент «Линия», чтобы создать вертикальную прямую линию на правой стороне области только что (760，470，1，675), цвет: # e7e1d5.

Создайте прямоугольник с помощью инструмента «Прямоугольник» (780 × 500), размер: 270 пикселей * 30 пикселей, цвет: # fcf9f4. Добавьте обводку 1px, цвет: # e0dace. Назовите эту панель поиска слоя. Затем используйте текстовый инструмент, чтобы добавить текстовое содержимое боковой панели.

Шаг 25 — Создание области нижнего колонтитула
Создайте новую группу и назовите ее «Нижний колонтитул». Затем выберите инструмент «Прямоугольник» (U) и создайте прямоугольник высотой 40 пикселей и цветом # b3a078 внизу макета. Назовите этот слой «нижняя полоса». Затем выберите инструмент Line Tool (U) и нарисуйте горизонтальную линию вверху этого прямоугольника, используя цвет # 918161.

Шаг 25 — создание нижней части

Создайте новую группу и назовите ее нижний колонтитул. Затем выберите инструмент «Прямоугольник», чтобы создать прямоугольник высотой 40 пикселей внизу документа (130，1430，940，40), цвет: # b3a078. Назовите его нижняя панель. С помощью инструмента «Линия» нарисуйте горизонтальную линию поверх прямоугольника, цвет: # 918161

Шаг 26
Создайте еще один прямоугольник высотой 250 пикселей и цветом # d8c293. Поместите этот прямоугольник поверх предыдущего.Назовите этот слой «footer bg».
Выберите инструмент «Линия» (U) и нарисуйте две линии в верхней части этого прямоугольника. Используйте цвет # ece4d1 для первой строки и # ada28b для второй.

Шаг 26

Создайте еще один прямоугольник высотой 250 пикселей (130，1180，940，250), цвет: # d8c293. Переместите этот прямоугольник в верхнюю часть прямоугольника и назовите его footer bg

Используйте инструмент «Линия», чтобы создать две линии в верхней части этого прямоугольника, цвет первой линии: # ece4d1; цвет второй строки: # ada28b

Шаг 27
Используйте инструмент «Линия» (U), чтобы создать два разделителя, каждый из которых содержит две линии — одну цвета # ece4d1, а другую — цвета # ada28b.Поместите эти слои в группу и назовите группу «разделители».

Шаг 27

Используйте инструмент «Линия» для создания двух разделительных линий, каждая разделительная линия включает две прямые линии, цвет одной линии: # ece4d1, цвет другой линии: # ada28b. Объедините эти слои в группу и назовите разделители групп

Четыре прямые слева направо — это

（440，1200，1，210）， # ece4d1

（441，1200，1，210）， # ada28b

（760，1200，1，210）， # ece4d1

（761，1200，1，210）， # ada28b

Шаг 28
Добавьте маску к группе «разделители», выбрав Layer> Layer Mask> Reveal All.Затем выберите инструмент «Градиент» (G) и перетащите два градиента от черного к прозрачному — один вверху разделителей, а другой — внизу.

Шаг 28

Чтобы добавить маску в группу разделителей, щелкните меню: «Слой»> «Маска слоя»> «Показать все». Выберите инструмент градиента и перетащите два градиента от черного к прозрачному — один вверху разделительной линии и один внизу разделительной линии

Нет необходимости перетаскивать инструмент градиента дважды, просто установите инструмент градиента один раз, как показано на рисунке ниже, а затем перетащите его один раз.

Шаг 29
Выберите инструмент «Текст» (T) и добавьте контент в нижний колонтитул вашего веб-макета.

Шаг 29

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

Шаг 30
Выберите инструмент «Текст» (T) и добавьте заявление об авторских правах внизу макета, используя цвет # 867859.

Шаг 30

Используйте текстовый инструмент, чтобы добавить информацию об авторских правах внизу макета, цвет: # 867859

Конечный продукт выглядит следующим образом:

Опыт:

В этом руководстве есть 2 особенности: одна — это маска, которая используется чаще, другая — эффект двойного обводки (с использованием внутреннего свечения и обводки для имитации эффекта двойного обводки).

Дань Talk-Mania, надеюсь, я смогу увидеть похожие высококачественные учебные сайты для PS

Эта статья воспроизведена из блога Wancang Yimi Blog Park, исходная ссылка: http: // www.cnblogs.com/grenet/archive/2012/06/21/2553566.html, Пожалуйста, свяжитесь с первоначальным автором, если вам нужно перепечатать

Создайте уникальный безобразный макет веб-сайта

Введение

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

Окончательное изображение

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

Шаг 1

Создайте новый документ (1000X800 пикселей).Создайте новый слой для вашего фона и залейте его E3D4B9.

Шаг 2

Теперь вставьте изображение линованной бумаги. Я использовал первую фотографию из нашего бесплатного набора текстур бумаги, выпущенного прямо здесь, в PSDFAN. Вырежьте бумагу с помощью инструмента «волшебная палочка» и перейдите в меню «Изображение»> «Коррекция»> «Обесцветить». Затем примените параметры тени, показанные ниже:

Шаг 3

Теперь я взял несколько изображений из нашего пакета «Основы гранж».Я начинаю с размещения кофейных пятен на линованной бумаге, затем, чтобы убедиться, что они видны только на моей бумаге, а не на моем фоне, я выбираю свой бумажный слой, щелкаю где-нибудь вокруг него с помощью инструмента волшебной палочки, затем выбираю мой слой с кофейными пятнами и нажмите удалить. Уменьшите непрозрачность слоев кофейных пятен до 25%. Теперь поместите изображение скрепки поверх бумаги и с помощью инструмента лассо отрежьте часть скрепки, которая должна быть позади бумаги. Затем придайте ему легкую тень. Затем вставьте изображения из липкой ленты (также из нашего набора предметов первой необходимости в стиле гранж).Я также поместил это изображение, хотя на следующем шаге я объясню, как я это сделал, более подробно. Наконец, я добавил текст в свою заметку (шрифт: Handwriting Dakota).

Некоторые указатели

Гранж-дизайн — это идеальное сочетание изображений. Чтобы клейкая лента смешалась с остальной частью моего макета, я уменьшаю насыщенность изображения до -45 (изображение> настройки> оттенок / насыщенность). Я также уменьшаю непрозрачность слоя с липкой лентой до 90%, чтобы создать иллюзию небольших вариаций на поверхностях, которые он покрывает.Для своего изображения я кардинально изменил насыщенность и яркость / темноту, чтобы он хорошо сочетался с другими моими элементами гранжа.

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

Шаг 4

Подумав о том, как разные элементы хорошо сочетаются друг с другом, я не мог не заметить, как черно-белое изображение с линованной бумагой в оттенках серого выглядело немного плоским, будучи черно-белым.Чтобы придать ему оттенок цвета, я перешел в Изображение> Коррекция> Цветовой баланс и применил настройки, показанные ниже. Это позволило ему лучше сочетаться с другими элементами.

Шаг 5

Теперь я беру изображение солнечных лучей из нашего набора Sunburst в высоком разрешении. Я вставляю его так, чтобы центр солнечных лучей находился за моим пост-изображением. Чтобы удалить части солнечных лучей, перекрывающие мою бумагу, я выбираю свой бумажный слой, щелкаю за его пределами с помощью волшебной палочки, затем выбираю мой слой солнечных лучей и нажимаю удалить.Я также выделяю каждое отверстие в верхней части бумажного изображения и повторяю тот же шаг. Затем установите режим наложения моего слоя с солнечными лучами на «затемнение цвета» и уменьшите непрозрачность слоя до 8%. Это дает эффект акварели.

Шаг 6

Теперь создайте новый документ и нарисуйте темно-коричневый квадрат примерно посередине изображения. Выделив квадрат, выберите> изменить> сжать и сузить выделение на 10 пикселей, затем нажмите «Удалить», чтобы оставить своего рода рамку.Затем возьмите кисть-ластик и сотрите коричневую рамку, используя акварельную кисть с низкой непрозрачностью. Теперь возьмите изображение, которое вы хотите поместить в рамку, и измените его размер / обрежьте по размеру.

Шаг 7

В рамке документа скройте основной белый фоновый слой, а затем перейдите к слою> объединить видимый, чтобы объединить рамку и изображение. Затем скопируйте объединенное изображение обратно в исходный документ. Повторите этот этап, используя разные изображения, пока у вас не будет примерно 3 в вашем основном дизайне.Преимущество создания изображений в новом документе заключается в том, что вы можете легко изменить обрамленное изображение, а затем объединить / скопировать его обратно в исходный дизайн. Я также добавил текст и стрелку над этими изображениями.

Шаг 8

Теперь вставьте другое изображение из нашего набора текстур бумаги в нижнюю часть дизайна. Обязательно создайте новый набор слоев под основной областью линованной бумаги, так как мы хотим, чтобы этот раздел располагался ниже этой области. Чтобы красиво смешать его с фоном, я установил режим наложения слоя на «linear Burn» и уменьшил его непрозрачность до 30%.Я также применил настройки внутренней тени, показанные ниже, чтобы придать эффект глубины.

Шаг 9

Эта часть действительно зависит от вашего творчества. Используя как можно больше текстур бумаги, начните наклеивать кусочки бумаги по всему дизайну. Убедитесь, что они хорошо сочетаются друг с другом, отрегулировав оттенки / яркость изображения. Я также наклеил изображение на липкой ленте еще несколько раз, чтобы добавить фона, но следил за тем, чтобы непрозрачность оставалась низкой, чтобы она не была чрезмерной.Хитрость заключается в том, чтобы объединить как можно больше изображений, не отвлекаясь и не отвлекаясь. Лучше всего, чтобы непрозрачность большинства слоев была очень низкой, так как тогда вы можете создать действительно шероховатый вид, не отвлекая внимание от областей содержимого.

Шаг 10

Теперь я добавляю еще несколько деталей, таких как пятна от кофе / скрепки, и добавляю этикетку из своего набора Grunge Essentials Pack. Наконец, я добавляю текст к метке, просто набирая его, а затем перехожу к редактированию> преобразованию> повороту и правильной подгонке.

Шаг 11

Теперь создадим меню сайта. Я набираю ссылки меню на листе бумаги чуть ниже моего ярлыка. Затем я использую свой инструмент линии и инструмент пользовательских фигур, чтобы создать несколько разделительных линий и стрелок рядом со ссылками в меню. Гранж-дизайн хорош тем, что зачастую не нужно быть слишком точным. При рисовании стрелок и линий вам не нужно беспокоиться о том, что все они будут одинакового размера или идеально выровнены, просто нарисуйте их так быстро и грубо, как захотите.Наконец, объедините все ваши стрелки в один слой, а затем все ваши разделительные линии в один слой. Возьмите ластик акварельной кисти с низкой непрозрачностью и сотрите части линий / стрелок, чтобы создать более шероховатый вид.

Шаг 12

Вставьте красивое изображение на линованную бумагу, убедившись, что этот новый слой расположен под вами, разместите слой и слои с миниатюрами изображений. Вырежьте его, используя технику волшебной палочки, описанную ранее.Затем установите режим наложения слоя на «жесткий свет» и уменьшите непрозрачность до 70%. Наконец, используйте ластик для акварельной кисти, чтобы стереть нижнюю / боковую часть изображения в беспорядочном стиле.

Шаг 13

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

Шаг 14

Теперь я создаю область подписки на рассылку новостей под своим меню. Эти техники довольно очевидны, если посмотреть на изображение ниже, но, опять же, их логика является неотъемлемой частью понимания гранжевого дизайна.Я намеренно изменил темноту текста («Информационный бюллетень» темнее, чем «Имя» и «Электронная почта», так как это создает многослойный вид. Я создаю структурированные поля для формы подписки, но уменьшаю их непрозрачность и аккуратно стираю их края. немного, чтобы придать им вид шероховатый.

Шаг 15

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

Шаг 16

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

И все готово

Вот и готовый дизайн. Нажмите на изображение ниже, если хотите просмотреть версию в полном размере.

Загрузить исходный файл для этого учебного курса

Об авторе:

Том — основатель PSDFAN.Он любит писать уроки, узнавать больше о дизайне и взаимодействовать с сообществом.