Как научиться красиво рисовать начинающему дизайнеру интерьера.

27.01.2019

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

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

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

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

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

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

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

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

Видеоурок: создание контакта

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

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

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

Что потребуется для выполнения этого урока?

Photoshop – редактор растровой графики, который как правило применяется при создании макетов.
Комплекты иконок. В сети можно найти большое количество бесплатных наборов иконок.
Несколько небольших картинок для заполнения контента.
Генератор бреда от Яндекса (referats.yandex.ru). Он понадобится для заполнения текстом нашего макета (в качестве “рыбы”).
Шрифты. В примере используется один нестандартный шрифт – Arsenal. Он доступен для скачивания на сайте fontsquirrel с множеством других кириллических шрифтов.

Итак, приступим.

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

Создадим новый документ, прозрачный, размером 1400 х 2000 (Нажмите ctrl+N и заполните поля в открывшемся окошке).

новый рисунок

Открываем панель со слоями, соответствующими созданному документу. Единственный существующий слой переименовываем в Фон (два раза щелкнув по названию слоя).

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

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

На панели инструментов выбираем цвет переднего плана фиолетовый, нажимаем клавиши shift+F5 и заливаем этим цветом фон будущего макета.

Создаем структуру папок, соответствующую частям макета. Упорядоченность позволит лучше ориентироваться, не путаться в слоях. Нужно создать следующие папки – шапка, меню, контент, футер. (Нажимаем сочетание ctrl+f и указываем название соответствующей папки).

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

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

Весь дальнейший процесс создания макета можно разделить на несколько этапов.

Размечаем макет направляющими

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

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

Фильтрация через область композиции

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

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

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

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

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

Для этой цели я использую сочетание горячих клавиш ctrl+shift+; (горячие клавиши нужно настроить)

Создайте горизонтальные направляющие 140px, 180px, 200px, 574px, 900px, 1450px, 1510px, 1610px и вертикальные направляющие 100px, 110px, 130px, 1270px, 1290px, 1300px.

Макет примет вид как на картинке. Это линии, расчерчивающие основные блоки.

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

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

Рисуем основные блоки

Переходим в папку, соответствующую шапке сайта. Выбираем основной цвет #3e0b1b.

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

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

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

шапка подложка

Теперь перейдем к папке меню. Меню у нас будет фиксированной ширины 750 px, всего 5 пунктов по 150 px. Cоответственно нужно прочертить вертикальные направляющие 350px, 1100px, 500px, 650px, 800px, 950px.

Выбрем цвет переднего плана #7652a5 и изобразим первый пункт. Теперь сделаем полученный прямоугольник слегка наклонным. Нажимаем ctrl+T . В параметрах сверху выбираем наклон -10. Жмем галочку, применяя изменения.

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

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

Осталось применить к полученному пункту стили. Если два раза щелкнуть по слою Пункт , откроется окно с настройкой стилей.Применяем стиль Внутренняя тень с настройками как на картинке.

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

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

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

Переключимся на папку Контент в слоях. Изменим основной цвет на #c3b4d8 . Рисуем прямоугольник соответствующий странице.

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

Затем выше рисуем еще один прямоугольник с цветом, до горизонтальной направляющей 574px. Слой назовем Верх страницы и применим к нему стиль Тень , как показано ниже.

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

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

Мы создаем маску выбора.
Применить маску - то есть, маска будет применена к объекту и исчезнет.
Маска предварительного просмотра Удалить маску.

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

Переключаемся на инструмент Линия на панели инструментов, чтобы нарисовать разделитель для страницы (вдоль горизонтальной направляющей 900px, между вертикальными направляющими 130px и 1270px). Цвет #fff.

Осталось создать слой Подвал . В папке рисуем прямоугольник такого же оттенка как шапка (#3e0b1b).

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

Уделяем внимание деталям

Начнем с названия и логотипа. Добавляем дополнительные направляющие: горизонтальная 70px и вертикальная 750px.

Выбираем инструмент Текст, в параметрах выставляем шрифт Arsenal, размер 30px.Щелкаем мышкой в центре, в том месте, где будет находится текст и пишем название (в слоях в этот момент выбрана папка Шапка). Теперь делаем шрифт Verdana 24px и ниже пишем слоган (еще один сайт). Копируем рисунок логотипа в фотошоп (просто перетащив его мышью из папки где он находится).

К слоям логотип, название и слоган применяем слой Тень (см. рисунок).

Копируем иконки в папку меню и размещаем их на пунктах.

Прописываем названия пунктов шрифтом Arsenal italic 24px, оттенка #fff.

Теперь заполним верхнюю часть страницы (папка ).

Расчертим направляющими, где будут располагаться, отступы, названия, блоки. Горизонтальные – 220px, 150px, 260px, 320px, 350px, 380px, 390px, 480px, 550px. Вертикальные -470px, 510px, 880px, 920px. Выглядит это так.

Копируем иконки, которые будут перед текстом.

Переключаемся на Текст, пишем названия шрифтом #444 Arsenal 24px. Рисуем четыре серых блока (оттенок #), называем слои блок1, блок2, блок3, блок4.

Добавим еще 4 направляющих, задающих отступы для строки поиска в блоке1 – 270px, 310px (по горизонтали) и 130px, 450px (по вертикали).

Нарисуем ее в виде прямоугольника #fff. Впишем текст Найти…

Ниже находится еще один Блок. В данном случае, там будет список, написанный шрифтом Verdana 18px.

В блоке справа инструментом Текст вычерчиваем прямоугольник (нажать на левую кнопку мыши и потянуть) , с учетом отступов, отмеченных направляющими 940px и 1270px по вертикали и 280px по горизонтали. Получится текстовая область, ограниченная пунктирами, ее удобно использовать для больших текстов. Помещаем туда список тегов.

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

С помощью направляющих отмечаем отступы слева, справа, сверху, снизу 20px. Заголовок выполняется шрифтом Arsenal 24px, цвета #8f0814 и отстоит от категории статьи на 10px, что отмечено линиями. Расстояние между отдельными записями с картинками также по 20px по вертикали. Текст отстоит от левого края на 120px, плюс отступ 10px.

Копируем заранее подготовленные, произвольные картинки и подгоняем до нужных размеров.

Размечаем среднюю часть страницы – cверху будет отступ 20px для всего контента.

Справа список статей с картинками. Расстояние между картинками 30px, ширина картинок -100 px, отступ до текста справа 10px. Шрифты такие же как в блоке Свежие записи.

Слева находится статья с большой картинкой и кратким содержанием, которая будет занимать пространство между направляющими 130 и 880 пикселей. Картинка от 130px до 430px (ширина 300px). Заголовок Arsenal 24px #444. Текст статьи – Verdana 14px, такого же цвета. От заголовка сделан отступ 10px. Снизу до разделителя такой же отступ 10px.

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

Добавляем направляющую посередине футера (1560px по горизонтали), вставляем и центрируем текст с копирайтом по ней.

Вот так выглядит итоговый вариант макета.

На этом все, спасибо за внимание.

От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема - создание дизайна сайта в 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 цветов и шапки Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу - залог успеха! Желаю вам удачи. На этом у меня все! Подписывайтесь на обновления, и вы не пропустите самый интересные статьи. Пока, до новых встреч!