В сегодняшней небольшой статье я бы хотел поговорить о размерах, которые необходимо выбирать при . А также об одном подводном камне, который многие либо попросту не учитывают, либо не знают о нем. В одной из своих предыдущих статей я уже рассказывал об основных моментах, которые нужно учитывать при разработке макета.
Прочитать об этих моментах можно в статье, . Сегодня же речь пойдет о конкретной задаче, которую мы будем решать и узнаем какие нужно выбирать размеры, почему именно такие, а не другие. Рассматривать мы будим создание дизайна сайта с фиксированной шириной по центру.
Итак, допустим, у нас есть техническое задание, в котором заказчик просит нас реализовать сайт с фиксированной шириной тела сайта, а по бокам должен быть какой-то фон, который будет резиновым и будет растягиваться в зависимости от разрешения монитора пользователя зашедшего на будущий сайт.
Исходя из поставленной задачи мы понимаем, что нам необходимо рисовать под минимальное разрешение монитора, которого придерживаются на сегодняшний день, это 1024х768 пикселей.
Вот тут то и скрыт наш с вами подводный камень, о котором многие не задумываются и начинают работу над дизайном. Нас интересует конкретно ширина разрешения монитора, а не высота. Высота может быть любая из расчета наполнения контентом сайта. Следовательно, высота на Ваше усмотрение.
А вот о ширине следует призадуматься, так какого размера делать то ее???? А рисовать ширину тела сайта необходимо в 1003 пикселя, Вы спросите, почему 1003 пикселя, а не 1024, да потому как нужно учитывать боковой скроллинг у браузера, а он составляет немного не мало 21 пиксель.
Вот и получается, что тело нашего сайта должно быть 1003 пикселя, этот параметр гарантирует, что у вас не появится горизонтальный скроллинг у сайта. Так как бывают случаи, когда верстальщик верстает макет, под разрешение 1024х768 пикселей, после чего появляется горизонтальный скроллинг, благодаря которому небольшая, но все же, часть сайта находится вне пределов монитора пользователя.
А это уже как вы наверное понимаете мало того что некорректно смотрится но и вызывает неудобство для пользователя сайтом (потенциального клиента), это большой минус. Этот скроллинг появляется из-за того что дизайнер не учел что фиксированная ширина макета сайта 1003 пикселя, а верстальщик сверстал макет на 1024 пикселя. Конечно, это может быть и ошибка верстальщика, но сейчас не о верстке.
Итак, я думаю, мы поняли, что фиксированная часть макета максимально должна быть 1003 пикселя, она может быть и меньше, мы рассматриваем корректное отображение будущего сайта на минимальном разрешение монитора с 1024х768 пикс.
Я при создание дизайна сайта в фотошопе , использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.
Статья получилась небольшая, постарался максимально понятно дать описание, если возникнут вопросы, пишите в комментариях.
Небольшое дополнение:
как заметил один из читателей, размеры бокового скроллинга у браузеров изменились. Если будет необходимо точно просчитать размер до пикселя, то учтите этот факт.
Ставим кистью пятно в левом верхнем углу:
Затем с помощью инструмента "Перемещение" (Move Tool) поднимаем слой с пятном несколько вверх и задаём слою непрозрачность 70%:
В инструментальной панели выбираем инструмент "Текст", в панели параметров жмём на иконку включения панели символов, где задаём следующие значения:
- Семейство шрифтов (Font Family): Avanti Regular (шрифт скачать по ссылке внизу)
- Высота кегля (Font Size): - 59пт
- Трекинг (Tracking): 5
- Масштаб по горизонтали (Horizontally Scale) - 115%
- Цвет (Color): #91d4f5
Для удобства включаем линейки (Ctrl+R) и ставим направляющие, горизонтальную 92 пикс, вертикальную - 104 пикс, в перекрестье направляющих и будет начальная позиция текста логотипа сайта. Пишем логотип "Автомобили" или типа того, на рисунке показан масштаб документа в натуральную величину:
Для шрифта слогана задаём следующие параметры:
- Семейство шрифтов (Font Family): Avanti Regular
- Высота кегля (Font Size): - 19пт
- Трекинг (Tracking): -35
- Масштаб по горизонтали (Horizontally Scale) - 100%
- Цвет (Color): #cdcdcd
В этой статье я покажу несколько продвинутых инструментов Photoshop , которые мы будем использовать для создания макета (мокапа ) флаера. Мы будем применять смарт-объекты для заполнителей, параметры «Трансформации » для растяжения, скоса и искривления слоев. У нас есть много других советов и приемов. Прочитав эту статью, вы сможете создавать с помощью фотошопа (Photoshop ) собственные макеты (мокапы) флаеров, визитных карточек и многого другого.
Как сделать макет (мокап) флаера в фотошопе (Photoshop)
Перед тем, как приступить к работе, давайте посмотрим на примеры макетов флаеров, которые мы создавали в Adobe Photoshop .
Создание макета флаера в Photoshop — Техника
Создание макета флаера в Photoshop — Техника
1. Самое главное — продумайте, для чего вы собираетесь создавать макет (мокап ) в фотошопе: для визитной карточки, брошюры, листовки, флаера или для чего-то еще. В рамках данной статьи мы разработаем макет флаера. Создайте новый документ с размером A4 , нажмите «ОК ».
Новый документ
2. Теперь создайте копию фонового слоя, нажав Ctrl + J , затем выберите инструмент «Кадрирование » (C ) и сделайте весь документ немного больше, так, как показано на рисунке, приведенном ниже, в документе появятся области по краям, но не беспокойтесь! Выберите серый цвет в качестве цвета фона, залейте эти области серым цветом.
Формат A4
3. Назовите новый скопированный слой Placeholder , затем кликните по нему правой кнопкой мыши, преобразуйте его в Смарт-объект. Помните — не следует масштабировать этот слой до преобразования в Смарт-объект. После преобразования слоя в Смарт-объект можно будет вносить любые изменения. Я уменьшаю его, как показано на рисунке ниже.
Формат A4
4. Сделайте слой Placeholder меньшим, примените эффект «Тень »:
- Режим смешивания – Нормальный;
- Непрозрачность — 100%;
- Угол — -45 градусов;
- Расстояние — 85 пикселей;
- Размер — 130 пикселей.
Создайте шесть копий этого слоя, затем выровняйте их так, как показано на рисунке ниже. Расстояние установите по своему усмотрению.
Создание макета флаера в Photoshop — Техника
5. Хорошо. Теперь согните нижний правый угол переднего слоя. Для этого выберите слой и нажмите Ctrl + T , будет активирован инструмент «Трансформация ». Далее нужно будет выбрать параметр «Деформация », размещенный в правой части меню параметров.
Параметр Деформация — Техника
Создание макета флаера в Photoshop
6. Теперь попробуйте сделать небольшую тень согнутого угла, используйте для этого инструмент «Кисть ». Затем продублируйте каждый слой и нажмите Ctrl + T , кликните по каждой копии слоя правой кнопкой мыши и выберите пункт «Отразить по вертикали », чтобы перевернуть ее. После этого переместите каждую копию ниже оригинального слоя, чтобы создать его отражение.
Отражение
7. Теперь выберите все слои отражения и переместите их в стеке слоев ниже оригинальных слоев. Создайте для них «Маску слоя » и примените к маске каждого слоя градиент, чтобы скрыть половину слоев отражений, а также уменьшить непрозрачность, чтобы сделать изображение более реалистичным.
Создание макета флаера в Photoshop — Техника
8. Теперь дважды кликните по любому из верхних слоев, в результате чего откроется новый документ. Разместите флаер в этом документе и нажмите Crtl + s , чтобы сохранить его, и вернитесь в основной документ. Вау! Попробуйте поэкспериментировать с тенями и бликами. Теперь вы знаете, как делать самые разнообразные макеты (мокапы ) в фотошопе.
Создание макета флаера в Photoshop — Техника
Надеюсь, вам понравилась эта статья, если у вас возникнут вопросы, пожалуйста, задайте их в комментариях. Благодарим за уделенное время.
От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема - создание дизайна сайта в Photoshope. В целом, все, что касается создания рабочих макетов сайтов, это практические уроки, и в интернете информации об этом крайне мало. Умельцев много, много рекламы и платных курсов, вебинаров… но, по сути, бесплатно делиться секретами и тонкостями никто не хочет. Типа, попробуйте, помучайтесь, и убедитесь, что «без меня» вам не справиться.
В этой статье я постараюсь ответить на самые распространенные вопросы, осветить, так сказать, общее направление. Уверен, мои советы вам пригодятся!
Photoshop и веб-дизайн
С создания функциональных макетов будущих сайтов начинается 98% проектов веб-дизайна, и практически все они сейчас рисуются в Фотошопе. Что же такое макет?
Дизайн-макет сайта - это прототип интернет-ресурса (портала, блога, торговой площадки и т. д.), отдельно взятой его странички, лендинга, графический образ с прорисованными деталями различных уровней. Картинка может быть общей, а может достаточно подробно давать представление обо всем структурном наполнении сайта, навигации и даже информационном контенте.
В идеале, на выходе должна получиться многослойная раскладка, полностью готовая к верстке и кодированию. Дизайн сайта в Фотошопе имеет ряд обязательных элементов:
расположение меню;
навигация;
цветовая гамма;
шрифты и т. д.
Но начинается все, естественно, с концепции. Тут может быть два варианта: или дизайнер получает готовый плоский рисунок, который необходимо воплотить в объеме, или «концепцию». Под концепцией каждый заказчик понимает свое: название, целевую аудиторию, просто общий перечень неких функций и задач, что угодно.
Но дизайн-макет - это уже не бла-бла-бла, а функциональный интерфейс, с готовой формой подачи информации, эстетичный и практичный.
С чего начать разработку макета?
Заказчики не всегда попадаются люди творческие, не все окончательно могут объяснить чего хотят, и как это должно выглядеть. Задача веб-дизайнера - задавать умные вопросы и получать умные ответы! Чем умнее спросишь, тем меньше будешь переделывать
Как я предлагаю подойти к разработке дизайна сайта в photoshop, буквально по шагам.
Пункт номер раз. Макет надо прорисовать на бумаге. Общими графическими формами - квадратиками, кружочками, прямоугольниками расставить по местам шапку, основное меню, статьи, фото, разделы, сайдбары, рекламу. Детали здесь не важны, главное - распланировать пространство.
У любого макета есть технические требования, вот на них и нужно нанизать ваш скелет. Сделайте несколько набросков, в сравнении все познается лучше. Какие-то варианты могут быть отвергнуты категорично, это тоже хорошо, отрицательный результат - тоже результат. Двигаемся дальше.
Пункт второй. Бумажный вариант в карандаше согласован, можно переходить к цветовому решению. Опять-таки можно обойтись рисунками, но более профессионально уже будет работать в графических программах. Можно в плоских, не принципиально.
Пункт три. Для того чтобы сделать действительно качественный дизайн-макет, не постесняйтесь зайти на ресурсы конкурентов. Определились с нишей и основными ключевыми запросами, забиваем их в Google или Yandex.
Нас интересует максимум ТОП-10. Проанализируйте функционал этих сайтов. В контент особо не вникайте, тестируйте навигацию. Станьте на время обыкновенным пользователем, который пришел на сайт по запросу и ищет для себя самый удобный и релевантный ресурс.
Если все ваши передвижения интуитивно понятны, и вы не тратите время на поиск необходимых кнопок, указателей, то постарайтесь отметить, с помощью чего достигнут такой результат. И наоборот, зафиксируйте себе, что вас раздражало, мешало, может меню кривое или много баннеров, рекламы. Ну и т. д. Ваша задача - объективно оценить основных конкурентов, взять на заметку достоинства и исключить явные недостатки.
Ну, это, как вы понимаете, теория, уделим время практике, и посмотрим, как создать дизайн сайта в Фотошопе, когда уже точно знаешь, что нужно нарисовать.
Дизайн-макет в Photoshope
Создание дизайна сайта в фотошопе, неважно, примитивного или мега крутого, всегда начинается с создания документа.
Документ
Стандартный макет имеет ширину 960 пикселей. Открываем «Документ» - Новый - задаем размеры. 1200*1500 пикселей будет достаточно, разрешение оставляем 72.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Теперь выделяем весь документ (клавиши 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 цветов и шапки Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу - залог успеха! Желаю вам удачи. На этом у меня все! Подписывайтесь на обновления, и вы не пропустите самый интересные статьи. Пока, до новых встреч!
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Photoshop - крайне популярная среди веб-дизайнеров программа, для многих даже стандарт. И если речь заходит о макете сайта, то в большинстве случаев под ним подразумевается файл формата.PSD.
Перед непосредственно созданием макета необходимо определиться со структурой сайта, продумать навигацию, представлять себе, где какие блоки и элементы будут располагаться.
Из чего состоит макет?
Подавляющее большинство веб-страниц состоит из:
- Верхней части (шапки), в которой располагается логотип, слоган, навигационное меню и т. д.;
- основного блока, в котором размещается контент;
- боковой панели (сайдбара);
- нижней части (футера), в которой обычно хранится вспомогательная информация, сведения об авторских правах, полезные ссылки и т. д.
Как создать?
Придумайте и продумайте структуру. Не лишним будет отрисовать её на листе бумаги или в самом Photoshop.
Обратите внимание на цветовую гамму - тона должны сочетаться, соответствовать тематике и направлению сайта. Текст должен хорошо читаться, а страницы - быстро грузиться. Не стоит перебарщивать с декорациями, интерактивными элементами и изысканными шрифтами - удобство важнее броского дизайна, потому что пользователи посещают сайты не для того, чтобы на них поглазеть, а с заранее определённой целью, и чем быстрее ваш ресурс позволяет её решить, тем выше он ценится.
Определитесь, растягивающимся или фиксированным будет ваш дизайн. Шаблон фиксированного размера на всех экранах выглядит одинаково, «резиновый» же, меняя размеры, подстраивается под устройство. Если дизайн «резиновый», то необходимо определиться, чем будет заполняться фон сайта.
Впрочем, макет настоящего веб-ресурса мы создавали в , которая является частью (крайне рекомендую), и сложный пример вы можете найти в ней.
Здесь же, чтобы не отвлекаться на детали и использование без того уже изученных инструментов, я буду рассматривать условный пример макета, схему шаблона, но по описываемому алгоритму вы вполне можете работать со своим макетом.
- Создайте документ будущего макета. Не забудьте определить размер.
- Разграничьте макет с помощью направляющих, вытягиваемых из линеек.
Чтобы включить линейки, либо нажмите сочетание клавиш Ctrl+R , либо выполните команду Просмотр -> Линейки главного меню программы.
Для вытягивания горизонтальной направляющей щёлкните на верхней линейке кнопкой мыши и, не отпуская её, перемещайте указатель вниз до тех пор, пока направляющая не займёт нужное положение. Чтобы вытянуть вертикальную линию, проделайте всё то же самое, только перемещайте указатель вправо от расположенной слева линейки.
В итоге ваш шаблон должен быть разграничен.
- Нарисуйте макет. Добавьте графику, линии, кнопки и прочие элементы. Здесь всё индивидуально, а инструменты для работы мы рассматривали на протяжении .
- Добавьте цвета, если не сделали этого раньше. Помните о гармоничности и мягкости тонов. Знания человеко-машинного взаимодействия и художественная школа будут только в плюс.
Как разрезать
Уже готовый макет необходимо разрезать «на кусочки», чтобы использовать его элементы в дизайне сайта, часть которого будет реализована через HTML, часть - через CSS, а часть - при помощи как раз тех самых картинок, на которые макет будет разрезан. Помните об этом, когда захотите оставить несколько картинок с белым фоном, текст страницы или названия ссылок - оставлять нужно только то, что будет браться из графических файлов и не будет реализовано другими средствами.
Итак, макет готов и открыт. Будем разрезать.
- Выключите слои с ненужными элементами макета - текстом, кнопками, формами и т. д. Чтобы спрятать слой, щёлкните на глазке в его строчке.
- Подгоните вытянутые из линеек направляющие под структурные элементы сайта. В принципе, макет можно разрезать и по ним, но в таком случае может получиться не совсем так, как нужно, поэтому будем использовать другое средство.
- Выберите инструмент Раскройка. Он расположен на палитре в группе Рамка.
- Чтобы отрезать кусок макета, подведите указатель к месту, откуда хотите начать, и делайте всё так, будто выделяете прямоугольную область. Вырезанная часть будет пронумерована. Синий цвет номера означает, что фрагмент активен и его можно редактировать. Части, которые программа предполагает, что вы будете разрезать, имеют номера на сером фоне. Отрезанный фрагмент выделен и имеет маркеры, благодаря которым его размер и положение можно корректировать.
- Аналогичным образом сделайте следующий разрез, и так до тех пор, пока работа не будет завершена.
- Когда всё сделано, сохраните результат. Для этого выполните команду Файл -> Экспортировать -> Сохранить для Web (старая версия), проверьте настройки (выберите формат, качество и т. д.), нажмите Сохранить и укажите папку, в которой будет создан каталог графических файлов.
- Внутри выбранной директории появилась папка images с графическими файлами, каждый из которых содержит часть макета.
- Теперь можно сохранить кнопки, иконки и прочие, ранее скрытые, элементы.
Макет создан, разрезан и полностью готов.
