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

для чего нужен макет, и с чего начать работу

От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема — создание дизайна сайта в Photoshope. В целом, все, что касается создания рабочих макетов сайтов, это практические уроки, и в интернете информации об этом крайне мало. Умельцев много, много рекламы и платных курсов, вебинаров… но, по сути, бесплатно делиться секретами и тонкостями никто не хочет. Типа, попробуйте, помучайтесь, и убедитесь, что «без меня» вам не справиться.

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

Photoshop и веб-дизайн

С создания функциональных макетов будущих сайтов начинается 98% проектов веб-дизайна, и практически все они сейчас рисуются в Фотошопе. Что же такое макет?

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

шапка;

расположение меню;

навигация;

цветовая гамма;

шрифты и т. д.

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

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

С чего начать разработку макета?

Заказчики не всегда попадаются люди творческие, не все окончательно могут объяснить чего хотят, и как это должно выглядеть. Задача веб-дизайнера — задавать умные вопросы и получать умные ответы! Чем умнее спросишь, тем меньше будешь переделывать

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

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

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

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

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

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

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

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

Дизайн-макет в Photoshope

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

Документ

Стандартный макет имеет ширину 960 пикселей. Открываем «Документ» — Новый — задаем размеры. 1200*1500 пикселей будет достаточно, разрешение оставляем 72.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

В меню программы выбираем «Select/Выделение» — «Transform Selection/Трансформировать выделенную область». В свойствах устанавливаем значение ширины — 960 и фиксируем рабочую область макета. Направляющие оставляем на границах выделения.

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

Заходим «Select/Выделение» — «Transform Selection/Трансформировать выделенную область», и уменьшаем выделение до 920 пикселей. Макет автоматически разместится по центру, и у вас получится отступ в 20 пикселей с каждой стороны. При изменении ширины не забывайте переустанавливать направляющие.

2. Шапка и текстура

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

выделенная область заливается 1 цветом;

в меню выбираются стили слоя;

«Gradient Overlay/Наложение градиента».

Объем можно добавить подсветкой:

создается новый слой;

выбирается мягкая кисть размером 600 px;

для кисти устанавливается цвет #19535a;

в 1 клик в нужной части шапки рисуется блик.

Расскажу еще про одну функцию — текстуру. Из любого цвета можно сделать текстурную картинку:

инструментом «Pencil Tool/Карандаш» рисуем 2 точки;

видимость фонового слоя временно отключаем;

через меню «Edit/Редактирование» — «Define Pattern/Определить узор» получаем готовую текстуру.

Приблизительно так:

Ну как, получилось? Увлекает процесс? Начало положено, вы на пути потрясающих экспериментов, которые открывает для вас графический Photoshop.

Теперь самое время открыть Фотошоп, который для веб-дизайна давно стал незаменимым помощником, и сделать набросок какого-нибудь простенького макета из 2–3 цветов и шапки Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу — залог успеха! Желаю вам удачи. На этом у меня все! Подписывайтесь на обновления, и вы не пропустите самый интересные статьи. Пока, до новых встреч!

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Дизайн сайта в Фотошопе (Photoshop)

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

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

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

Рис.1 Быстрый старт в Фотошоп

Поехали!

Дизайн сайта в Фотошопе: с нуля за 60 минут!

Для начала, это настройка рабочей области. Прежде всего, стоит зайти во вкладку “Window” в верхней панели и отключить все лишнее и включить все нужное. Во-первых — это “Character” — символы, цвета, слои, “Options”  — опции и “Tools”- инструменты. Просто поставьте эти галочки, дальше мы чуть подробнее про каждый инструмент поговорим. Просто бывает частая ошибка — очень много всего включено, на рабочей области бардак и совет такой — отключите все лишнее, включите вот только это, действительно необходимые инструменты (рис.2).

Рис.2 Настройка рабочей области

В фотошопе при создании дизайна сайта мы создаем макет (рис.3), где горячая клавиша ⌘N (Command N), вот таким образом я буду обозначать горячую клавишу в презентации — ⌘N на Mac-е, если вы пользуетесь Windows — то это CTRL+N (Control N). То есть вот этот вот “цветочек”- это CTRL на Windows. Стоит установить единицу измерения пиксели, разрешение — 72 пикселя на дюйм, режим цвета (цветовая палитра) — RGB 8 bit.

Кстати, рекомендую посмотреть прямо сейчас:

Рис.3 Настройка макета

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

Как создать дизайн сайта в фотошопе: фигуры и трансформация

Фигуры. Горячая клавиша “U”. Фигуры — это прямоугольник, прямоугольник с округленными углами, эллипс, многоугольник, прямая и фигура произвольной формы (рис.4).

Рис.4 Фигуры

Этот инструмент часто применяется в photoshop при создании дизайна сайта,  и находится  он на панели инструментов, да, вот он выделен, горячая клавиша “U”. С формами, с фигурами можно производить трансформации, мы сейчас это рассмотрим на примере фигур, то же самое можно делать и с картинками. Горячая клавиша ⌘Т — свободная трансформация (рис.5), т.е. мы двигаем объект, он у нас свободно изменяет свои размеры. Если мы нажимаем тоже ⌘Т и  берем за краешек и двигаем с SHIFT-ом (вот такой вот стрелочкой я буду обозначать нажатую клавишу SHIFT), мы видим, что размер, точнее пропорция объекта сохраняется.

Рис.5 Трансформация

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

Рис.6 Прямоугольник с округленными углами (неправильно)

Рис.7 Прямоугольник с округленными углами (правильно)

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

Выделение, перемещение. Вообще, для выделения объекта — горячая клавиша “V” для выделения и перемещения она называется move to и есть клавиша “А” для точечного перемещения (рис.8). В предыдущем примере мы видели, когда я выделял точки в прямоугольнике с округленными углами, вот я как раз нажимал эту горячую клавишу “А”, выделял точки и с ним уже дальше работал.

Рис.8 Выделение, перемещение

Копирование. Вот этот значок “⌥” — это на Mac-е “option” , если вы работаете на Windows, то это клавиша Alt (рис.9).

Рис.9 Копирование

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

Прозрачность. Клавишами от 1 до 0 мы можем изменять прозрачность объекта, “opacity” , так называемая. Вот я сейчас просто нажимаю сейчас будет 1 — это 10, 2 — 20, 30 и так далее и так до 100, т.е. 0 — это 100% прозрачности (рис.10).

Рис.10 Прозрачность

Дизайн сайта в photoshop: текст, выравнивание и цвет

Текст. Работа с текстом — горячая клавиша “Т”. Вот так в панели инструментов выглядит сам инструмент работы с текстом — шрифт, размер там и так далее. Вообще есть два варианта работы с текстом в фотошопе при создании дизайна сайта — текстовой блок и текстовая строка. Текстовой блок — это когда мы задаем размер этого блока и текст автоматически в этом блоке переносится, перемещается, заполняет все это пространство. В строку, в бесконечно длинную строку придется вот эти переносы на следующую строку делать вручную, т.е. ставить курсор, нажимать Enter и переносить. В тексте можем просто потянуть и изменить размер и текст сам подстроится под размер блока. Вообще удобнее для параграфов, т.е. для набора использовать текстовой блок. Текстовую строку удобно использовать для (давайте еще раз ее включу) каких-то очень коротких слов — либо одно слово, либо два слова, либо три слова и так далее, т.е. для каких-то коротких вещей. Та же самая горячая клавиша “Т” (рис.11,12).

Рис.11 Текст

Рис.12 Текст

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

Рис.13 Выравнивание

Дальше группы слоев еще есть (рис.14). “ ⌘G” — сгруппировать, “ ⌘ SHIFT G” — разгруппировать.

Рис.14 Группа слоев

Давайте продолжим создание сайта в фотошопе с нуля. Есть несколько эллипсов, несколько объектов, я их выделяю и группирую, они у меня находятся в папочке все. Можно группы в группы заносить, можно создавать папку из нескольких папок и так далее. Горячая клавиша “⌘ G”.

Цвет. Палитра с цветами, стоит установить цветовые координаты Hue, Saturation, Brightness , т.е. тон, насыщенность и яркость в палитре, в инструменте вот эта маленькая кнопочка, маленькая иконочка, нажмите на нее и установите HSB Sliders (рис.15).

Рис.15 Цвет

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

Как сделать дизайн сайта в фотошопе: картинки, смарт-объекты и маски

Картинки и смарт-объекты. Что важно сказать про это — смарт-объект не теряет в качестве при изменении размера, растровая картинка превращается в пятно (рис.16,17).

Рис.16 Картинки и смарт-объекты

Рис.17 Картинки и смарт-объекты

Давайте еще раз закрепим важные пункты о дизайне сайта в Фотошопе из прошедшей части урока. Я просто изменяю размер, смарт-объект, растровая картинка, увеличиваю, видим цветовое пятно. Смарт-объекты не теряют в качестве после уменьшения размера и последующего увеличения, т.е. можно спокойно их трансформировать и ресайдить. Картинки в дизайне сайта автоматически импортируются в Фотошоп как смарт-объекты, т.е. если вы добавляете картинку в Фотошоп, она превращается в смарт-объект. Особенность в том, что смарт-объекты нельзя редактировать. Имею ввиду, кисточкой что-то подтереть, подретушировать смарт-объекты не получится. Нужно либо заходить внутрь смарт-объекта, т.е. двойным кликом, либо просто, самый простой варинт — это кликнуть “растризовать”, кликнуть по изображению правой кнопкой мыши в слоях “Rastrize” и “Convert to smart oject”. Видим, когда “Растр” — это у нас просто изображение, когда “Smart object”, здесь появляется такая маленькая икононочка, надеюсь, вам видно. Нет иконочки, смарт-объект — есть иконочка.

Маски. Alt click между слоями, т.е. мы наживаем Alt и кликаем между слоями(рис.18).

Рис.18 Маски

Рис.19 Маски

И просто поймите сейчас, как это работает, на следующем слайде я покажу в чем суть. Т.е. у нас есть два слоя, есть эллипс, есть картинка. Мы наводим курсор, нажимаем Alt, появляется вот такая вот стрелочка и просто кликаем. Вот как это работает.

Давайте далее рассмотрим дизайн сайта в photoshop по шагам. Опять же эллипс, картинка, давайте я на паузу поставлю, когда мы превращаем эллипс в маску, у нас верхняя картинка заполняет форму этого эллипса. Соответственно, когда вы хотите сделать что-то похожее, внизу у вас должен быть, как бы, родительский объект, тот объект, формы которого вы хотите заимствовать, а сверху уже накладываете картинку, которая будет его перекрывать. Это очень распространено в фотографиях, т.е. как сделать фотографию в круге? Очень просто! Нужно сделать несколько кружочков, наложить на них фотографии и включить маску.

Настройка фотошопа для веб-дизайна: направляющие

Направляющие. Горячая клавиша “⌘R”, чтобы скрыть и показать линейки (рис.20).

Рис.20 Направляющие

При создании сайта в фотошопе используйте линейку — это черные штучки с цифрами, это они и есть. И горячая клавиша “ ⌘;” , чтобы скрыть и показать направляющие. Т.е. давайте на скриншоте на примере, я открываю линейки и просто перетаскиваю из углов направляющие, опять же направляющие нужны, чтобы ваш макет выглядел ровно, чтобы вы могли по этим направляющим ваши текстовые блоки, картинки и фигуры уметь выровнять. И стоит еще здесь проверить, чтобы единица измерения была “пиксели”. Нужно просто нажать правой кнопкой мыши на линейке и установить пиксели(рис.21). У нас везде все в пикселях должно быть.

Рис.21 Направляющие

Для экспорта мы заходим — “Файл”, “save for web”(сохранить для веб) и сохраняйте ваш макет, если вы делаете сайты, проще всего, самый простой формат, который  не требует настроек дополнительных — это “PNG 24” (рис.22).

Рис.22 Экспорт файла

В чем его прелесть?  Т.е. в чем минус GPEG-а , все знаем, что картинки принято хранить в GPEG-е. GPEG — ломает шрифты, т.е. если у вас макет сайта, где много шрифтов, много текста,   в GPEG-е шрифты будут размываться, шрифты будут, так называемыми артефактами. Если мы сохраняем в PNG 24, то картинка выглядит гораздо чище. Она может занимать чуть больше места, но на первых порах, на первых этапах , чтобы не перегрузить себя какими-то настройками , ставьте PNG 24 и смело сохраняйте ваши макеты в этом формате.

И я напомню про горячие клавиши (рис.23).

Горячие клавиши в photoshop значительно ускорят работу при создании дизайна сайта.

“U” — прямоугольник, эллипс, фигуры.

“Т” — это текст.

“В” — выделение, перемещение объекта.

Клавиша “А” — для точечного выделения, помним про прямоугольник с округленными углами.

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

Alt clic между слоями — мы превращаем слои в маску, нижний слой становится маской, верхний слой на него накладывается.

“⌘Т” — трансформация, изменение размера.

“ ⌘G”, “ ⌘ SHIFT G” — группировка, разгруппировка в папки.

“ ⌘R” — скрыть и показать линейки.

“ ⌘;” — скрыть и показать направляющие.

И, думаю, всем известная клавиша “ ⌘Z” — отменить предыдущее действие и если мы зажимаем “Option” или “Alt” на Windows , ALT+Z — мы можем шагать назад по нашей истории изменений, а если мы зажимаем  ⌘SHIFT и нажимаем Z, то мы делаем шаг вперед. Т.е. с ALT-ом мы двигаемся назад, с SHIFT-ом мы можем сделать вперед, потом снова назад, вперед. Нажимаем  ⌘Z, откатываемся на предыдущее изменение.

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

Как сделать дизайн сайта в фотошопе

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата .PSD.

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

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

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

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

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

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент.

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

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

В результате манипуляций градиент получился следующим.

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

6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком — своего рода подложка. Например, ширина сайта — 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.

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

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

Сохраняем его отдельным графическим файлом шириной в 1 пиксель, как делали это с подложкой.

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

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

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

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

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

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.

20. Прописываем текст в основной части страницы, используя всё тот же инструмент Горизонтальный текст.

21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt. Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T).

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

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

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

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

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

Профессиональный макет сайта в фотошоп / Creativo.one

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

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

1. Набор иконок (wefunction.com)
   
   Альтернативный набор иконок
2. Иконка Twitter (iconeden.com)
3. Шрифт 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 пиксел.

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

Шаг 13.  Добавляем контент

Пришло время добавить области под контент. Область контента будет разделена на 3 колонки с равным отступом. Между каждой колонкой будет отступ в 25 пикселов.

Добавьте направляющие по обеим сторонам колонок.

Добавьте в колонки список услуг. Украсьте текст с услугами иконками.

Нарисуйте кнопку «Read More» при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме слой-фигуры.

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

Дублируйте слой с кнопкой (Ctrl + J).

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

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

Примените к этой кнопке стили слоя:

Добавьте текст.

Шаг 14. Создаем футер

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

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

Финальное изображение:

Автор урока: Niranth

Источник:

photoshoptutorials.ws

Создание дизайна сайта в фотошопе, размеры макета

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

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

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

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

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

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

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

А это уже как вы наверное понимаете мало того что некорректно смотрится но и вызывает неудобство для пользователя сайтом (потенциального клиента), это большой минус. Этот скроллинг появляется из-за того что дизайнер не учел что фиксированная ширина макета сайта 1003 пикселя, а верстальщик сверстал макет на 1024 пикселя. Конечно, это может быть и ошибка верстальщика, но сейчас не о верстке.

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

Я при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

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

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

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

Как сделать дизайн сайта в фотошопе?

Вы знаете, что такое Photoshop, тогда создать макет сайта не будет для вас проблемой. Если обобщенно говорить о том, как сделать дизайн сайта в Фотошопе, то необходимо только:

1. Создать новый документ.
2. Добавить фон.
3. Добавить картинки.
4. Настроить стандартные кнопки.
5. Наполнить блоки текстовым контентом.
6. Оценить результат.

Шаг 1

Начнем с самого начала. Просто запустите Photoshop и создайте новый документ (CTRL + N) с параметрами, указанными на скрине ниже.

Шаг 2

Теперь вы должны добавить подходящий узор на свой фон.

Layer Style->Blending options->Pattern Overlay.

Шаг 3

Вы хотите создать потрясающий дизайн? Тогда используйте сетчатую структуру для проектирования. Поместите сетчатую структуру в ваш дизайн сайта с интервалами 60px и 20px.

Шаг 4

Итак … теперь пришло время создать меню для будущего сайта. Используйте инструмент Rounded Rectangle для его создания (радиус — 3 px). Ширину для меню возьмем — 940 px, а высоту — 34 px.

Чтоб сделать это меню более привлекательным, перейдите в Blending Options->Drop Shadow. Используйте настройки, которые вы можете увидеть на скриншотах:

Blending options->Inner Shadow

Для меню выбран цвет #6bafff.

Шаг 5

Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool. Вы можете создать свой дизайн с любым шрифтом, который вам нравится. В примере использовался шрифт Aller [bold]. Размер 14px.

Шаг 6

Все кнопки меню являются ссылками, и вы должны показать, что они активны. Поэтому возьмем, к примеру, create — это прямоугольник (цвет, который для него использовался: # 5a90e5).

Результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Используйте инструмент Rounded Rectangle (радиус — 3px), чтоб создать форму поиска со следующими параметрами: 124px и 26px.

Добавляем внутреннюю тень:Blending Options->Inner Shadow.

Создайте один прямоугольник с размерами 41px и 32px.

Blending Options->Drop Shadow

Blending Options->Inner Shadow

Blending Options->Color Overlay (цвет — #6bafff)

Теперь пришло время добавить привычный для функции поиска значок. Откройте Linecons Free->Vector Icons Pack и найдите там значок поиска.

И вот результат:

Шаг 8

Связь с социальными сетями очень полезна и важна для любого сайта. Попробуем создать простую кнопку Facebook.С помощью инструмента Rounded Rectangle (радиус — 3px) создаем кнопку.

Затем используем инструмент Rectangle (закругленный), чтоб создать квадрат (удерживая кнопку Shift) с размером — 16 px.

Выберите инструмент Pen Tool  и отрежьте половину этого квадрата.

Нажмите Edit->Transform->Rotate, чтоб поместить этот треугольник на левую сторону прямоугольника. Выделите все слои кнопки Facebook и объедините их (Ctrl + E).

Blending Options->Inner Shadow:

Blending Options->Color Overlay (#c1cac5 )

Теперь добавьте текст Перейти или т.п. на кнопку Facebook.

Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете использовать букву F, и выделить ее синим цветом (# 5a90e5).

Результат:

Шаг 9

Создайте новую форму: ширина 940px, высота 372px.

Как всегда, добавьте тень:

И границу: Blending Options->Stroke (20px, цвет # 6bafff).

Шаг 10

Добавьте в свой дизайн стандартные иконки. Не забудьте использовать сетку, расстояние — 180px.

Шаг 11

Добавьте текст. Вы должны использовать тот же шрифт, который использовали для панели меню. Установите размер шрифта на 30px.

Поиграйте с настройками смешивания: добавьте белую тень, цветное наложение (# 6aaefd) и внутреннюю тень, чтоб получить вот такой результат:

Шаг 12

Заполните четыре столбца (ширина каждого — 240 px) текстовым контентом. Лучше добавить разный текст в каждый столбец.

Шаг 13

Создайте кнопку Читать дальше с помощью инструментов, которые мы использовали ранее. Blending options->Inner Shadow, Drop Shadow, Color Overlay (# 919392).

Step 14

Добавьте текст Читать далее или что-то подобное на кнопку.

Шаг 15

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

Шаг 16

Ваш следующий блок может быть разделом на любую тематику. Используйте инструмент Rounded Rectangle для создания квадрата (удерживайте нажатой кнопку Shift). Радиус — 3px, ширина и высота — 138px.

Перейдите в Blending options ->Stroke, чтоб ввести настройки: размер-20px, цвет # 919392.

Скопируйте и вставьте этот элемент 5 раз. Поместите эти квадраты с интервалом 20px и добавьте на них фото партнеров, сотрудников и т.д.

Шаг 17

Футер сайта так же важен, как и заголовок. Спросите себя: “Что вы хотите, чтоб ваши посетители делали, когда они дошли до нижней части страницы сайта?” Ответ, который вы получите, станет отличной отправной точкой для разработки футера вашего сайта.

Добавьте градиент, например # 3a8df1 — # 6bafff.

Шаг 18

Добавьте еще три блока в футер на свой выбор, учитывая ответ на вышеуказанный вопрос. Используйте шрифт Arial Regular для заголовков (30px) и добавьте стили, например, как на скриншоте ниже:

Используйте шрифт Arial Regular для текста в разделах (12px).

Поместите несколько стандартных значков в один из разделов футера — RSS, Google Plus + или Twitter.

Ну, собственно и все! Результат:

Если на первый взгляд кажется, что создать дизайн сайта самостоятельно — не возможно и под силу только дизайнерам, то вы ошибаетесь. С помощью всем известной программы Photoshop создать дизайн сайта не составит труда. Достаточно выполнить всего 18 шагов, и вы получите собственный уникальный дизайн для своего ресурса, при этом, абсолютно бесплатно!

Дизайн сайта в фотошопе

Один из самых популярных редакторов, используемых при разработке дизайна сайта – это Adobe Photoshop («фотошоп»). Этот редактор позволяет добиться множества красивых визуальных эффектов, реализовать практически любую идею дизайнера.

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

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

Типичный шаблон дизайна сайта состоит из нескольких частей: «шапки», панели для меню сайта, информационного (контентного) блока, «подвала». Размещаются эти элементы на «болванке», ширина и высота которой равны предполагаемому разрешению экрана пользователей сайта.

Начинать создание шаблона дизайна сайта следует с создания нового документа в фотошопе. Ширина документа задается в пикселях, в соответствии с требуемым разрешением, например, 1024 пикселя. Высоту документа можно взять произвольно, ведь в браузере страница сама «растянется» по вертикали, если высота ее содержимого превышает высоту экрана. Стандартное разрешение для шаблона дизайна сайта – 72 пикселя на дюйм, цветовой режим необходимо установить в значение «RGB», 8 бит.

При помощи команды View — New guide (Показать-Новые направляющие) можно разметить страницу в соответствии с модульной сеткой. Это позволяет добиться точного совпадения размеров эскиза и конечного документа. Кроме того, можно воспользоваться уже готовыми сетками, разработанными под разные разрешения мониторов. Как правило, такие сетки предлагаются авторами совершенно бесплатно.

Следующий шаг – создание фона страницы. Фон может быть однотонным, для этого при помощи команды Paint Bucket Tool (Заливка) с установленным значением Foreground (Фоновый цвет) следует заполнить пространство документа выбранным цветом. Кроме того, фоном может служить какое-либо изображение или же узор. Узором пространство макета также заполняется при помощи команды Paint Bucket Tool, но с установленным значением Pattern (Узор).

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

Создать необходимое прямоугольное выделение можно при помощи инструмента Rectangular Marquee Tool (Прямоугольное выделение). Изменяя параметр Feather этого инструмента можно задать необходимое скругление для углов.

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

Отдельным шагом можно выделить создание кнопок и иконок для дизайна сайта. В зависимости от идеи дизайна, они могут быть строгими деловыми или же, наоборот, веселыми. Кнопки, как правило, создаются при помощи все того же Rectangular Marquee Tool. Задать кнопкам другую, непрямоугольную форму, можно с помощью инструмента Pen Tool (Перо). С помощью Pen Tool можно создавать и различные иконки произвольной формы.

Надписи на кнопках и иконках выполняются при помощи инструмента Horizontal Type Tool (Горизонтальный текст) или Vertical Type Tool (Вертикальный текст). В настройках инструмента можно задать любую необходимую гарнитуру шрифта и его размер, задать выравнивание текста.

Для дальнейшей работы над дизайном сайта, готовый шаблон необходимо разрезать на части. Это нужно для того, чтобы поместить шаблон в ячейки таблицы при html-верстке страницы. Разрезать шаблон следует с помощью инструмента Slice Tool (Раскройка). Кусочки изображения (slices) по размерам должны соответствовать элементам будущей html-страницы.

С помощью команды Save for Web&Devices необходимо сохранить разрезанное изображение. В диалоговом окне следует выбрать тип файлов HTML&images и сохранить файл с именем «index.htm» или «index.html». Теперь шаблон дизайна сайта состоит из файла index.html и каталога images, в котором находятся нарезанные кусочки макета. С помощью «Блокнота» или любого html-редактора файл index.html редактируется при необходимости.

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

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

Плагины в Adobe Photoshop – это специальные надстройки, которые дополняют редактор новыми функциями или же модифицируют уже имеющиеся. При помощи плагинов визуальные эффекты для дизайна сайта в фотошопе также можно создать всего одним кликом.

Как изменить дизайн сайта?

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

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

Теги:

дизайн сайта,
дизайн сайта в фотошопе,
сделать дизайн сайта в фотошопе,
создание дизайна сайта в фотошопе,
создать дизайн сайта в фотошопе

Бесплатное руководство по Photoshop — Photoshop для начинающих веб-дизайна

Photoshop — один из лучших инструментов, поэтому изучите его с помощью этого руководства по веб-дизайну Photoshop!

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

1. Возможности файлов и новые возможности

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

2. Замена, использование и установка кистей

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

3. Ключ к нестандартным формам

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

4. Ядро Photoshop, слои и группы

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

5. Горячие клавиши для перемещения и изменения размера

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

6. Получение максимальной отдачи от масштабирования и панорамирования

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

7. Создание интересных эффектов с помощью режимов наложения

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

8. Текст, любите или ненавижу

Тексты — одна из самых сложных вещей в Photoshop, потому что он не предназначен для этого. Итак, в этом уроке мы собираемся найти простые способы работы с Photoshop и текстами.

9. Чистый дизайн веб-страницы с помощью Photoshop

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

Photoshop для веб-дизайна: 20 профессиональных советов

Для многих веб-дизайнеров пакет Adobe Creative Cloud, в частности Photoshop, играет неотъемлемую часть в процессе создания веб-сайтов.Создаваете ли вы макеты веб-сайтов или разрабатываете отдельные элементы сайта, Photoshop — отличный вариант.

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

01. Использование систем сеток

Существует ряд инструментов, которые помогут вам использовать сетки в Photoshop.

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

02. Получите все

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

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

03. Изучите пользовательские предустановки документов

Photoshop поставляется с рядом предустановок, ориентированных на Интернет.Проверь их!

Нажмите cmd + N , чтобы открыть окно «Новый документ». Меню предустановок содержит базовые веб-и мобильные предустановки, но в нем отсутствуют многие общие параметры для различных систем сеток, баннеров, устройств iOS и Android. Уделите несколько минут, чтобы заполнить недостающие области.

04. Настроить тип по умолчанию

Закройте все открытые документы. Откройте палитру символов, чтобы выбрать предпочтительное семейство шрифтов, толщину, интервал и цвет. Больше не будет мириад по умолчанию!

05. Сделайте ваши векторные изображения четкими

Сохраняйте четкость ваших векторных объектов.Выбрав инструмент «Прямоугольник» ( U ), откройте меню параметров геометрии на панели параметров. Установите флажок «Привязать к пикселям».

06. Создайте пунктирные линии.

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

Выберите инструмент «Кисть» ( B ), затем откройте палитру «Наборы кистей», за которой следует раскрывающееся меню в правом верхнем углу. Выберите Квадратные кисти и нажмите «Добавить».

Теперь выберите кисть Hard Square 1 Pixel.Переключитесь на палитру кистей и нажмите Brush Tip Shape, установив интервал на 300%. На холсте зажмите Shift , перетаскивая кисть по горизонтали или вертикали, чтобы создать четкую пунктирную линию.

07. Простой перенос текста

Используя быстрое решение, Photoshop может применять функции переноса текста, аналогичные функциям InDesign. Выберите инструмент «Прямоугольник» ( U ). На панели параметров установите для заливки значение «Контуры», выберите для формы инструмент «Прямоугольник» и выберите «Добавить в область контура» (или нажмите + ).

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

Выберите инструмент «Текст» ( T ) и щелкните внутри большого прямоугольника, чтобы преобразовать форму в рабочий контур «Текст» для заливки шрифтом. Вы можете дополнительно уточнить размеры рабочего контура текста с помощью инструмента «Прямоугольник» ( U ) и инструмента «Прямое выделение» ( A ).

08. Создание быстрых цветных заливок

Некоторые ключевые команды используются снова и снова. Быстрая заливка — одна из них.

Нажмите alt + Delete , чтобы залить текст, фигуры и слои выбранным цветом переднего плана. Нажмите cmd + Delete , чтобы залить область выбранным цветом фона. Нажмите D , чтобы вернуться к черно-белому по умолчанию, и нажмите X , чтобы поменять местами цвета переднего плана и фона.

09. Оставайтесь организованными

Используйте cmd + G для группировки слоев и помогите вам оставаться организованным и сосредоточенным.Группирование областей содержимого и компонентов, таких как навигация, области избранного содержимого, вспомогательные компоненты и нижние колонтитулы, по отдельности избавит вас от головной боли на протяжении всего процесса проектирования и разработки проекта.

10. Станьте умнее

Использование смарт-объектов (перейдите в «Фильтр> Преобразовать для смарт-фильтров» и ctrl или щелкните правой кнопкой мыши «Слой> Преобразовать в смарт-объект»), разумно может действительно ускорить ваш рабочий процесс на всем протяжении процесс проектирования. Преобразование больших фотографий и векторных объектов в смарт-объекты сохраняет исходное качество изображения после масштабирования, поворота и наклона.

Следующая страница: еще 10 советов по веб-дизайну для Photoshop …

30 лучших уроков по макету веб-дизайна в Photoshop

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

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

Как создать уникальный красочный макет сайта

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

Создайте тематический веб-дизайн Magic Night с нуля в Photoshop

Создайте безобразный веб-дизайн

Создайте креативный необычный макет в Photoshop

Как сделать зеленый и гладкий веб-макет в Photoshop

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

Создайте тему WordPress в стиле гранж с помощью Photoshop

Создайте макет WordPress, вдохновленный природой

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

Учебное пособие по шаблону Softblue

Учебник

Создание макета портфолио с деревянным фоном в Photoshop

Учебник по модному макету для бизнеса и финансов

Учебник по макету программного обеспечения

Создайте креативную тему wordpress

Создайте чистый и эффективный макет продукта

Макет дизайна корзины для покупок

Создайте простой современный веб-шаблон в Photoshop

Как создать веб-макет «изношенной бумаги» с помощью Photoshop

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

Макет бизнес-сайта в Photoshop

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

Учебное пособие по веб-дизайну: / Шаблон портфолио!

Создание чистого макета PSD с трехмерным изображением

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

Создание расширенного макета игры или клана

Создание чистого макет хостинга

Web 2.0 руководство по макету фотошопа

Руководство RocknRolla Blog Design

Это все на сегодня, друзья мои. Приходите завтра за другой статьей, связанной с дизайном. Или вы можете подписаться на меня в Твиттере или подписаться на мой RSS Кормить.

[Всего: 0 Среднее: 0/5]

Создание веб-сайта в Photoshop

страница РЕЗЮМЕ

Как создать визуальный элемент веб-сайта в Adobe Photoshop от начала до конца.

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

Начать с документа Photoshop в формате RGB не более 990 пикселей

Когда я начинаю графический дизайн веб-сайта, я обычно создаю новый документ Photoshop шириной 990 пикселей. Это связано с тем, что 990 пикселей — это почти наибольшая ширина, которую вы можете использовать на веб-странице без неприятной горизонтальной полосы прокрутки, появляющейся в браузере Microsoft Windows, при ограничениях дисплея 1024 x 768 пикселей (наиболее популярное разрешение экрана на момент написания).

Любой, кто использует Apple Mac, знает, что ширина окна браузера гораздо более гибкая, но поскольку пользователи Mac составляют меньшинство, дизайнер веб-сайта должен работать с (в первую очередь) с пользователями ПК — если только аудитория не известна. На базе Mac.

Итак, мой документ обычно начинается с размера 990 x 900 пикселей (рисунок 1) .

Рисунок 1 — создание файла Photoshop 990 x 900 пикселей

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

Как видно из снимков экрана (, рисунок 2, ), даже если мы увеличим разрешение экрана до 1280 x 800 пикселей, даже если мы получим намного большую ширину, доступная высота останется практически неизменной.И чем больше панелей инструментов и функций добавлено в верхней части окна браузера, тем меньше вертикального пространства мы получим.

Рисунок 2a — Windows XP с Internet Explorer 8 с разрешением 1024 x 768

Рисунок 2b — Windows XP с Internet Explorer 8 с разрешением 1280 x 800

Решите, что будет видно по прибытии, а что будет спрятано под складкой

Это означает, что есть опасность того, что ключевые сообщения будут непреднамеренно скрыты «в нижней части страницы» (что означает, что вам придется прокручивать страницу вниз, чтобы увидеть их).Но даже в этом случае мы не хотим создавать веб-сайт высотой всего 560 пикселей … мы должны найти золотую середину.

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

Включите только релевантное

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

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

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

Итак, приступим к основам

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

Вместо того, чтобы писать руководство, объясняющее, как создавать все возможные типы дизайна, я собираюсь сосредоточиться на одном дизайне — дизайне, созданном для using-dreamweaver.com. Освоив основы, вы можете варьировать, экспериментировать и улучшать, сколько душе угодно.

Создать документ с направляющими

Итак, для начала — создайте новый документ Photoshop, используя настройки, показанные на рис. 1 . Добавьте к документу четыре направляющих на расстоянии 10 пикселей от каждого края.Самый быстрый способ сделать это — выбрать:

ПРОСМОТР / НОВОЕ РУКОВОДСТВО…

… а затем выберите:

По горизонтали, положение 10 пикселей

Повтор по горизонтали, положение 890 пикселей

Повторить по вертикали, позиция 10 пикселей

Повтор по вертикали, положение 980 пикселей

Задайте цвет фона

Цвет фона (или узор) веб-сайта — это область, которая будет заполнять все уголки окна браузера, неиспользуемые самим сайтом, поэтому важно не делать ее слишком отвлекающей или яркой.Я выбрал темно-серый цвет, чтобы улучшить сам сайт. Для этого щелкните квадрат палитры цветов переднего плана в нижней части палитры инструментов и либо выберите свой собственный цвет из палитры цветов, либо введите следующее значение в поле в центре нижней части диалогового окна с помощью символа #: 666666 . Щелкните ОК.

В верхнем меню выберите:

РЕДАКТИРОВАТЬ / ЗАПОЛНИТЬ…

… и ниже Содержание выберите Цвет переднего плана . У вас должен получиться холст, который выглядит как рисунок 3 .Об этом позаботились.

Рисунок 3

Создание платформы веб-сайта

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

Выберите инструмент Rounded Rectangle Tool из палитры инструментов.В палитре параметров убедитесь, что выбрана кнопка « Shape Layers », а не « Paths » или « Pixels ». Это гарантирует, что будет создан красивый, редактируемый путь с заливкой, а не пустой путь или пиксельная форма. После этого в палитре параметров в поле «, радиус » введите 20 пикселей. Если вы не видите поле «Радиус», вероятно, инструмент «Прямоугольник со скругленными углами» не выбран на палитре «Инструменты». Перед созданием формы выберите новый цвет переднего плана в палитре инструментов.Я использовал # 99cc33 .

Убедившись, что « Snap to Guides » выбран в меню VIEW щелкните в верхнем левом углу холста, где направляющие пересекают друг друга, и перетащите вниз до нижнего правого пересечения направляющих, а затем отпустите. Это создаст большой прямоугольник с закругленными углами (, рисунок 4, ). Это будет фон для сайта.

Рисунок 4

Frame 2:

Следующая панель будет светло-зеленой с падающей тенью

дизайн TIP

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

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

ПРОСМОТР / НОВОЕ РУКОВОДСТВО…

… а затем выберите:

По горизонтали, положение 100 пикселей

По горизонтали, положение 850 пикселей

По вертикали, положение 30 пикселей

По вертикали, положение 960 пикселей

Выберите инструмент Rounded Rectangle Tool , как и раньше, измените цвет переднего плана на # ccff99 и создайте новый прямоугольник с закругленными углами так же, как и раньше, используя вновь созданные направляющие в качестве границы.

релевантная ССЫЛКА

Если вы хотите сделать что-то более сложное с помощью Photoshop, это довольно просто — если вы знаете, какие кнопки нажимать.

Посетите этот урок Glass Photoshop, чтобы получить один из многих подробных уроков.

Создайте падающую тень

В палитре слоев (с выделенным светло-зеленым прямоугольником с закругленными углами) нажмите внизу кнопку « Добавить стиль слоя » (с надписью fx ).Выберите Drop Shadow и введите следующие значения:

• Непрозрачность = 75%
• Расстояние = 0 пикселей
• Спред = 0%
• Размер = 10 пикселей
• шум = 0%

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

Рама 3:

Последняя панель будет белой

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

По горизонтали, положение 140 пикселей

По вертикали, положение 40 пикселей

По вертикали, положение 950 пикселей

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

Рисунок 5 — наслоение фоновой панели завершено

Создать верхний и нижний колонтитулы

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

Можно слишком много внимания уделять «дизайну ради дизайна». Соблазн заполнить пустое пространство абстрактными произведениями искусства очень силен, но ему нужно противостоять, чтобы очистить сообщение. Таким образом, заголовок этого веб-сайта имеет заголовок и «цепочку ссылок», которые делают очевидным, в каком разделе находится читатель, и позволяют быстро вернуться к основной категории или домашней странице (, рис. 6, ).

Рисунок 6. Верхний колонтитул, нижний колонтитул и панировочные сухари на месте

Добавление текста в Photoshop

Чтобы добавить текст в Photoshop, просто выберите инструмент «Текст» ( Horizontal Type Tool ) на палитре «Инструменты», щелкните где-нибудь на холсте и начните печатать. Новый слой будет создан автоматически для каждого блока текста, который вы создаете. Вы можете щелкнуть один раз и ввести текст, чтобы создать неограниченный блок текста, или вы можете щелкнуть и перетащить, чтобы создать текстовое поле, которое ограничит текст в пределах определенной вами области.

Панировочные сухари

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

Нижний колонтитул

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

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

Основная навигация

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

релевантная ССЫЛКА

Мега-меню
Есть много других возможностей навигации, одна из которых — часто практичное Мега-меню.

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

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

Создание кнопок вкладок

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

Рисунок 7 — Закругленные вкладки навигации

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

.

По горизонтали, положение 110 пикселей

По вертикали, положение 230 пикселей

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

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

Вторичная навигация

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

По горизонтали, положение 160 пикселей

По вертикали, положение 60 пикселей

Я добавил к этой панели эффект слоя, чтобы придать ей зеленую обводку в 1 пиксель.Для этого выберите слой, содержащий панель. Нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ). Выберите ход и введите следующие значения:

• Размер: 1px
• Положение: внутри
• Режим наложения: Нормальный
• Непрозрачность: 100%
• Тип заливки: Цвет
• Цвет: # ccff99 (щелкните цветной прямоугольник и введите ccff99 в поле #)

Тип веб-сайта Лица

Шрифт, который я выбрал для текста на сайте, — Georgia.Я выбрал это по трем основным причинам:

1. Мне нравится. Хотя мне нравится чистый вид шрифта без засечек (такого как тот, который используется в заголовке), я чувствую, что простота структуры сайта действительно выделяет красивый, интересный шрифт с засечками, такой как Georgia.
2. Это шрифт, разработанный Microsoft для Интернета, поэтому он хорошо работает как с большими, так и с маленькими размерами.
3. На большинстве компьютеров установлена ​​Джорджия. Это решающий фактор, который резко ограничивает количество шрифтов, обычно используемых в дизайне веб-сайтов.Существует множество обходных путей, таких как Flash-текст, изображения в виде текста и методы замены текста PHP, но для простоты эти альтернативы, как правило, находятся в меньшинстве в Интернете. Короче говоря, если на компьютере не установлен шрифт, используемый веб-сайтом, браузер отобразит альтернативный вариант — иногда с нежелательными результатами.

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

Выберите стиль текста

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

Хотя стиль текста на этом начальном этапе разработки может быть изменен (как и все остальное!), Он помогает получить общее представление о том, как выглядят разные шрифты, размеры и цвета. Для этого достаточно просто создать текстовое поле в документе Photoshop с помощью перетаскивания (с помощью инструмента Horizontal Type Tool ) и заполнить его текстом-заполнителем. Обычно я экспериментирую со стилями для двух заголовков ( h2 и h3 ), текста абзаца (P), Bullet Points и Links ( рисунок 8 ).

дизайн TIP

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

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

Примеры абзацев Lorum Ipsum можно создать на удобном веб-сайте Lipsum .

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

Создание иллюстраций для информационных панелей

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

Рисунок 8 — Стилизация текста и панелей

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

Теперь выберите переднюю белую панель, щелкнув ее миниатюру Vector mask — если все сделано правильно, вы должны увидеть, как ее путь отображается черным цветом. Выберите инструмент Direct Selection Tool (белая стрелка). Мы собираемся перетащить верхнюю часть белой панели, но снова нам нужно начать перетаскивание, щелкнув темно-серый фон, а не одну из других существующих векторных фигур.

Щелкните серый фон и перетащите рамку вокруг верхней части панели, убедившись, что все точки привязки, составляющие верхнюю часть слоя-фигуры, выбраны.Затем нажмите SHIFT + <СТРЕЛКА ВНИЗ> . Это сдвинет всю верхнюю часть панели вниз на 10 пикселей. Используйте ВВЕРХ, и ВНИЗ, стрелки, без , клавишу SHIFT , чтобы подтолкнуть точки привязки до тех пор, пока вы не будете довольны.

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

Готово

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

Создание веб-сайта в Photoshop — Конец статьи

Перейти к предыдущей статье | Перейти на домашнюю страницу | К следующей статье

Требуется обратная связь!

Присылайте любые вопросы или отзывы по адресу: feedback @ using-dreamweaver.com или оставьте его на нашей странице в Facebook.

25 отличных уроков по макету в Photoshop для веб-дизайна

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

1. Макет портфолио в чистом стиле

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

2. Чистый макет блога в Photoshop

Узнайте, как создать макет блога на темную тему в этом уроке Photoshop.

3. Создание веб-макета портфолио в Photoshop

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

4. Как создать яркий веб-дизайн портфолио в Photoshop

В этом уроке Photoshop используется сетка 960 для компоновки веб-страницы.

5. Создайте элегантный веб-макет фотографии в Photoshop

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

6. Макет веб-сайта фотогалереи в Photoshop

Научитесь создавать темную фотогалерею с помощью этого превосходного урока по Photoshop.

7. Создание веб-сайта потокового видео с фильмами

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

8. Как создать стильное портфолио. Концепция веб-дизайна

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

9. Создание современной лабораторной темы веб-дизайна в Photoshop

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

10. Создайте чрезвычайно простой темный веб-дизайн в Photoshop

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

11. Как создать элегантный дизайн веб-сайта на основе сетки

От бумаги до Photoshop: научитесь размещать веб-дизайн на сетке.

12. Как создать винтажный макет веб-сайта Photoshop

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

13. Создайте простой чистый макет портфолио в Photoshop

Это руководство по макету Photoshop идеально подходит для сайтов портфолио, а также сайтов веб-приложений.

14. Темный макет 3D портфолио в Photoshop

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

15. Создайте чистый и красочный макет электронной коммерции в Photoshop

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

16. Разработка инновационного сайта-портфолио с использованием альтернативного пользовательского интерфейса / пользовательского интерфейса

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

17. Создайте элегантный веб-сайт мобильного приложения

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

18. Создайте теплый, веселый интерфейс веб-сайта в Adobe Photoshop

В этом превосходном руководстве по веб-макету есть продолжение преобразования PSD в HTML.

19. Впечатляющий макет портфолио видеооператора в Photoshop

В этом уроке вы будете использовать инструмент Custom Shape Tool, чтобы создать фоновый узор.

20. Как создать тему WordPress в Photoshop

Научитесь создавать простой макет блога с помощью Photoshop.

21. Создайте смелое и яркое портфолио

Это руководство по веб-макету проведет вас через создание красочного сайта-портфолио.

22. Создайте элегантный узорчатый веб-дизайн в Photoshop

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

23.Разработайте чистый корпоративный макет веб-сайта

Из этого руководства вы узнаете, как добавить стоковые фотографии в заголовок вашего веб-сайта.

24. Как создать красочный веб-макет для бизнеса

Этот урок Photoshop продемонстрирует, как включать значки в ваш веб-дизайн.

25. Создайте текстурированную веб-страницу «Скоро появится» в Photoshop

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

Баумгардт, Майкл: 0785342721461: Amazon.com: Книги

Хотя он может не показать 100 способов создания кнопок или получения гладких хромированных эффектов, Adobe Photoshop 6.0 Web Design предлагает вдумчивый и насыщенный изображениями взгляд на использование Photoshop для веб-дизайна.

Первый из четырех разделов дает обзор основ Интернета — как работают все элементы и каковы основные проблемы (например, проблемы браузера; веб-палитры; различия между форматами изображений, такими как GIF, JPEG и PNG).Во втором разделе рассматриваются основы Photoshop с упором на создание веб-контента (например, исправление цифровых фотографий для отображения в Интернете или создание плавных анимаций GIF). Также есть раздел о том, когда лучше использовать ImageReady. (Этот охват был расширен по сравнению с предыдущим изданием.)

Кто угодно может создавать GIF и JPEG, но настоящие профессионалы знают, как сделать изображения красивыми при небольшой пропускной способности. Итак, в третьем разделе подробно рассказывается об оптимизации размеров изображений, для которой Photoshop и ImageReady предлагают обширные инструменты.Последний раздел посвящен основным инструментам GoLive — соединению частей вместе для создания веб-страниц. Повсюду появляются небольшие руководства, чтобы познакомить читателей с ключевыми сценариями, такими как «Создание фрагментов и ролловеров» и «Разработка HTML».

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

Помимо Photoshop, ImageReady и GoLive, книга также затрагивает другие полезные приложения, такие как Xenofex от Alien Skin и Eye Candy 4000; QuickTime VR и Final Cut Pro от Apple; RealProducer; и SoundJam.Здесь, как и повсюду, автор может не раскрывать все детали, но он дает фундаментальные принципы, обеспечивающие прочную основу знаний для дальнейшего развития. — Анжелин Грант

Охваченные темы: Введение в веб-дизайн с использованием инструментов Adobe Photoshop 6, ImageReady 3 и GoLive 5, включая

• Обзор проблем, связанных с веб-дизайном
• Создание изображений для Интернет
• Работа со слоями, действиями и фильтрами
• Сравнение форматов изображений и обсуждение алгоритмов сжатия
• Оптимизация размеров файлов
• Создание ролловеров, анимации и фоновых изображений
• Переход от ImageReady к GoLive для сборки элементов в веб-страницу

По мере того как веб-дизайнеры становятся более опытными в HTML, многие обращаются к Photoshop как к своему основному инструменту дизайна.И если вы, как и большинство других дизайнеров, используете несколько продуктов для создания готового сайта, Adobe Photoshop 6.0 Web Design написан специально для вас. В этой великолепной четырехцветной книге веб-дизайнер Майкл Баумгардт показывает вам, как использовать набор инструментов Adobe для профессионального веб-дизайна. Эта новая редакция, охватывающая Photoshop, GoLive и ImageReady, полностью обновлена, чтобы отразить изменения в GoLive 5, Photoshop 6 и ImageReady 3. Книга начинается с основ использования инструментов Adobe для создания наиболее важных элементов веб-сайта.Затем он демонстрирует, как использовать новейшие функции, включая сжатие изображений, создание GIF-анимаций, создание динамического веб-содержимого, разработку элементов навигации, управление безопасными для Интернета цветами и многое другое.

Об авторе

Михаэль Баумгардт — один из самых уважаемых в Германии авторов веб-дизайна и настольных издательских систем. Один из первых дизайнеров, принявших на вооружение настольные издательские системы более десяти лет назад, он совершил скачок в дизайне для Интернета в 1996 году. Его книги по дизайну неизменно остаются бестселлерами.В настоящее время он живет в Нью-Йорке, где управляет компанией Mito Media, Inc., занимающейся веб-дизайном и издательской деятельностью. Он является автором предыдущего издания этой книги.

Проиллюстрируйте классный веб-сайт в Photoshop с помощью этих 4 простых шагов

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

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

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

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

1. Создание эскиза

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

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

2.Векторизация вашего эскиза

Мы закончили набросок, теперь пора его векторизовать. Поскольку это веб-сайт, я использую Photoshop — растровую программу. Однако, если вы дизайнер логотипов, вам следует использовать Illustrator только потому, что это векторная программа и ее можно масштабировать бесконечно.

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

С чего начать векторизацию? Тебе решать! Я собираюсь начать с перца чили и использовать инструмент «Перо», чтобы обвести каждую секцию:

После того, как вы нарисуете форму, выберите путь и залейте его основным цветом с помощью инструмента «Заливка» (alt + Delete).

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

На палитре «Слои» щелкните «Заблокировать прозрачные пиксели», чтобы при запуске этапа кисти вы оставляли отметки только на реальном изображении (а не на прозрачном фоне).

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

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

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

Повторим все вышеперечисленные этапы для рук и мексиканской шляпы:

• Создание контуров (инструмент «Перо»)
• Цветная заливка
• Расчесывание оттенков и мелирование

Не забудьте создать новый слой для каждого раздела!

3. Добавьте различные текстуры

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

Текстура 1:

Текстура 2:

Текстура (изображение) 3:

После помещения текстуры 1 в мой документ я включил инструмент «Свободное преобразование» (Ctrl + T), чтобы я мог поместить текстуру в свою иллюстрацию.

Есть еще несколько шагов для текстур 2 и 3 (см. Изображение ниже, где указаны номера):

1. Создайте новую группу в палитре слоев
2. Щелкните значок Добавить векторную маску и замаскируйте группу
3. Маска текстуры 2 и преобразование 2 и 3 по размеру изображения
4. Добавить текстуру 2 и 3 в группу
5. Замаскируйте текстуру 3 и создайте градиент поверх нее
6. В слоях палитры измените режим наложения для текстуры 3 с нормального на более светлый цвет

4.