Создадим полноценный макет дизайна сайта в Фотошопе . Начнем с макета страницы, а затем перейдем к разработке ее отдельных элементов. Результатом будет современный макет веб-страницы, готовый к верстке:
Его ключевыми особенностями являются горизонтальные полосы для разделения контента, красочный заголовок, портфолио, двухрядный основной макет и подвал со ссылками:
Перед тем, как создать сайт в Фотошопе , лучше сделать наброски основных контуров на бумаге:
Проектирование макета также помогает разработать структуру и получить представление о лучших позициях для ключевых элементов дизайна:
Создавая новый документ в Adobe Photoshop , я делаю макет размером, соответствующим распространенному широкоформатному монитору, чтобы дать хорошее представление общего вида сайта:
Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:
Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте «Наложение градиента » (Gradient Overlay ) с вертикальным переходом от серого цвета к белому:
Далее нарисуем область основного заголовка, где будет размещен избранный материал. На новом слое сделайте выделение, затем примените к нему стиль «Наложение градиента » с двумя цветами. Также добавьте неброскую внутреннюю тень, чтобы придать эскизу глубины:
Выделив область заголовка с маской, нажмите CTRL+SHIFT+C , чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум , чтобы создать простую текстуру, затем установите режим наложения «Умножение » и снизьте прозрачность до подходящего значения:
Далее продолжаем делать сайт в Фотошоп , вставив логотип компании и расположив его в сетке. Добавьте стиль «Наложение градиента » с настройками, соответствующими цветам заголовка, затем создайте мягкую внутреннюю тень:
Используйте инструмент «Текст » для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:
Заголовок – это отличное место, чтобы представить сайт. С ярким фоном он привлекает основное внимание пользователя. Используйте это пространство, чтобы поместить привлекательный вступительный заголовок с индивидуальным шрифтом, который соответствует имиджу компании:
Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica , чтобы текст можно было поместить в html без замены изображений:
Перед тем, как сделать сайт в Фотошопе до конца, расположите изображение ноутбука посередине. Это хорошо согласуется с образом выдуманной компании, и создает отличное тематическое пространство для отображения примеров работ на экране компьютера:
Подчеркните эту область радиальным градиентом, исходящим из-за компьютера. Этот дополнительный штрих поможет возвысить элемент над страницей:
Под основным заголовком создайте другое выделение и заполните его бело-серым градиентом:
Разделите среднюю часть страницы на две колонки с направляющими, привязанными к линиям сетки. Слева у нас будет главная панель контента, а правая будет содержать тонкую боковую панель. Используйте инструмент «Текст », чтобы добавить текст для примера:
Ниже область основного контента может содержать место для отображения последних записей блога. Разделите этот столбец еще на две колонки и набросайте примеры записей. Ссылки заголовков должны расцениваться пользователями как кликабельные, поэтому измените их цвет, чтобы дать визуальную подсказку:
При создании сайта с нуля в Фотошопе и верстке используем инструмент «Прямоугольник со скругленными углами », чтобы нарисовать прямоугольник на боковой панели. Первоначальный цвет не имеет значения, так как мы будем менять его стиль в следующем шаге:
Дважды щелкните по слою и добавьте ряд стилей слоя, в том числе серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень:
Используйте эту боковую панель, чтобы разработать секцию Featured Project (Рекомендуемый проект ). Ее элементы могут включать в себя небольшие снимки и отрывки текста:
Нарисуйте еще один прямоугольник, чтобы использовать его как кнопку. Добавьте пару стилей слоя, таких как «Наложение градиента » и «Обводка », чтобы стиль кнопки соответствовал общей серой теме:
Создайте короткую и содержательную надпись для кнопки, побуждающую пользователя пройтись по сайту, чтобы посмотреть будущие проекты:
Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:
Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T , чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:
Расположите тень по центру экрана, затем удалите лишнее пространство над подвалом. В результате получится тонкая тень, которая «приподнимает » главную страницу, добавив дизайну немного деталей:
Подвал является отличным местом для отображения второстепенных элементов страницы. Например, формы для авторизации пользователей. Доработайте дизайн с помощью инструмента «Текст », а затем нарисуйте пару полей для ввода. Дополните поля мягкой внутренней тенью.
ОглавлениеСоздание макетов сайтов: развлечение для избранных Разработка макета сайта: этапы Способ №1. Нарезка макета из шаблона сайта Способ №2. Создание макета сайта в почти фотошопе Способ №3. Онлайн-инструмент для создания макетов
Для начала задумайтесь над тем, почему вы решили создать макет сайта самостоятельно . Эта работа требует разносторонних знаний от человека в области ИТ и дизайна , аналитического и творческого мышления одновременно. А еще некой части вашего времени. Окей, есть 4 причины того, почему вам могло это понадобиться. Если у вас другая - пишите в комментарии, дополню.
Создание макетов сайтов: развлечение для избранных
Причина #1. Интерес к разработке макетов сайта
Ваши интересы очень специфичны? Мы здесь никого не осуждаем . Самим же стало когда-то интересно, и начали этим заниматься! К тому же, тяга к познанию - наша отличительная черта. Хвалю ваше любопытство.
Причина #2. Разработка макета сайта как вид заработка
Если вы хотите стать в будущем веб-дизайнером, с чего-то же надо начинать , а именно с элементарного макета страницы сайта. Быстрый результат своей работы мотивирует как ничто другое. К счастью, в статье предлагаю только блиц-способы создания макета .
Кстати, работа веб-дизайнера - это не шутки. Вот здесь ниже я просто оставлю график зарплат в зависимости от стажа (по данным DOU за май-июнь 2016). Ни на что не намекаю. Просто скрытый хантинг.
Причина #3. Составление ТЗ на разработку макета сайта для дизайнера
Часто перед недизайнерами стоит необходимость показать макет веб-сайта - иногда просто для иллюстрации своей идеи , но иногда и для подкрепления ТЗ . Конечно, это не обязательно и грамотный дизайнер сам поймет вашу идею и даже сделает лучше, чем вы ожидаете. Однако если вы точно знаете, чего хотите, лучше это показать, а не рассказывать.
Удобно также пользоваться приложением Coggle , которое вы можете подключить к Google Drive.
Мне нравится Coggle тем, что майнд-карта всегда под рукой , ей удобно делиться с коллегами, и здесь хорошо подобраны цвета элементов интерфейса. К тому же работает правая кнопка мышки, что позволяет хорошо настраивать карту. У меня получилась вот такая структура для главной страницы сайта.
На первом этапе проектирования макета создается mind-map сайта
Этап 2: Создание прототипа сайта
Далее можно сразу начать рисовать макет сайта в фотошопе, но, даже если делать макет из праздного любопытства, сначала следует нарисовать прототип сайта . При пошаговой разработке, протототипирование - неотъемлемый этап, который укрепляет психическое здоровье веб-дизайнера. При создании прототипа намечаются ключевые блоки будущего сайта (шапка, слайдер, кнопки, контакты, структура материала и пр.). Это позволяет существенно сэкономить время на этапе отрисовки макета т.к. можно будет увидеть примерный результат и безболезненно внести изменения.
Устали? Сделайте жизнь проще и закажите разработку сайта в KOLORO. Мы учтем ваши пожелания и вы получите именно то, что хотели.
Создание прототипа сайта онлайн
Обычно я пользуюсь двумя наиболее популярными онлайн-инструментами для создания прототипа сайта: Moqups и Mockflow . В обоих случаях есть возможность создавать прототипы бесплатно , но с ограниченным функционалом. Тарифы для первого сайта начинаются от $13/мес. (10 проектов, 1 Гб), а для второго - от $14/мес. (неограниченное количество проектов + 25 Гб в облаке). Еще все рекомендуют Mockingbird . И я порекомендую, но только из уважения к Eminem, потому что здесь 3 проекта обойдутся уже в $12/мес., а бесплатных инструментов меньше.
Теперь о личном впечатлении. Moqups удобнее и интуитивно понятен даже с первого посещения . Здесь много готовых блоков и иконок - как раз то, что нужно, чтобы быстро пройти этап прототипирования. Кроме того, элементы удобно центрировать относительно середины страницы или других элементов. Немного мешает ограничение в 300 объектов для страницы в бесплатном режиме - для макета одностраничного сайта может быть маловато. Есть возможность вставлять элементы с воркфрейма Bootstrap. Mockflow позволяет делать чуть меньше, и с ним нужно пару минут разобраться и привыкнуть к нему, однако большее количество пространства на диске может кого-то привлечь.
Прототипы сайта в Moqups и Mockflow
Как запрототипировать будущий сайт?
Рассмотрим на примере Moqups как можно создать прототип страницы с текстом для блога.
Шаг 1. Добавляем шапку (текст можно изменить).
Шаг 2. Добавляем блок для картинки и надпись (заголовок статьи). С помощью стилей можно удобно менять размер, шрифт и прочее форматирование текста.
Шаг 3. Добавляем текст и задаем ширину колонки. Все блоки удобно центрируются относительно середины страницы.
Шаг 4. Текст надо бы разбить картинкой . Да и ширина колонки слишком большая, 500 рх будет лучше. К счастью, можно ее быстро поменять. Большой плюс: выделенные элементы уменьшаются относительно друг друга и мой блок с картинкой тоже уменьшился.
Шаг 5. Добавим сайдбар (боковую колонку), здесь уже будет просто. Разместим поле для поиска и блок для подписки на рассылку (с привлекательной картинкой и яркой кнопкой).
Шаг 6. Допустим, наша статья получилась такой маленькой. Еще можно добавить опрос и рейтинг статьи. Получился аккуратный прототип странички для блога. Добавляйте другие элементы по своему вкусу.
Создание прототипа позволяет увидеть масштабы страницы и принять решения относительно тех или иных блоков. Кстати, с помощью этих инструментов можно делать прототипы для разных девайсов. Например, если постараться, получится что-то подобное. Однако обычно прототип ограничивается ч/б исполнением.
Прототип приложения для смартфона
Этап 3: Делаем красивый макет сайта: выбираем цвет
От удачного выбора цветов зависит восприятие сайта и бренда пользователями . Не советую полагаться на свои силы - подбор удачного оттенка может занять часы. Поэтому рекомендую использовать готовые палитры цветов для веба . У Google недавно вышел подробный гайд по удачным цветам для материального дизайна (тренд веб-дизайна). Эти цвета гармонично сочетаются, и вы можете быть уверены в их привлекательности. С помощью Materialpalette можно удачно подобрать два цвета - основной и акцент, а также посмотреть, как они будут выглядеть в интерфейсе. Немного больше цветов на Material Design Colors .
Представили сайт? Сделали прототип? Выбрали цвета? Теперь можно перейти к созданию самого макета. Предлагаю вам несколько способов.
Внимание! Здесь не будет советов по тому как сделать макет сайта в фотошопе - это тема для отдельной статьи, здесь более простые способы.
Способ №1. Нарезка макета из шаблона сайта
или существующих сайтов
Этот способ подойдет вам, если вы хотите:
- разобраться в основных инструментах Photoshop;
- найти разные референсы для своего будущего сайта и собрать их воедино;
- почувствовать себя дизайнером на пару часов ;
- продемонстрировать веб-дизайнеру или агентству (например, нам:) наиболее подробное видение сайта ;
- подкрепить ТЗ на разработку сайта не только «вот здесь кнопочки призыва, а тут разделитель и лидомагнит».
Плюсы такого подхода к разработке макета:
- вы сможете избежать распространенных ошибок , насмотревшись на качественные сайты;
- поймете, как не надо делать , чтобы было хорошо;
- исполнители веб-дизайна будут четко представлять, чего вы ожидаете;
- это очень быстро - за несколько часов вы сделаете макеты для всех страниц сайта.
Минусы:
- вы так и не поймете до конца, что такое веб-дизайн;
- некоторые референсы, которые вы найдете, верстальщик не реализует без изменения других частей сайта.
Как это делается
Самый простой и быстрый способ сделать макет сайта - выбрать шаблон под определенную CMS и переделать его под себя. Поэтому для начала надо определиться с CMS, что значительно упростит разработку сайта. Однако учтите, что дизайн сайта будет ограничиваться теми элементами, которые есть в шаблоне. Конечно, вы сможете поменять цвета, однако отдельные элементы интерфейса уже готовые и их изменить вы не сможете.
Если вы будете делать «рагу» из разных сайтов , не забывайте где-то в блокнотике карандашиком писать исходники . Это упростит дальнейшую разработку дизайна и верстку макета.
Макеты сайтов под Wordpress
Наиболее популярная CMS - это Wordpress. Например, вы найдете много современных шаблонов для этой CMS. Зачем? Сайт на шаблоне ускоряет запуск проекта в разы , однако он не будет уникальным. Хотя, если вы будете использовать оригинальные иллюстрации, изображения и креативный подход - даже шаблонный макет можно переделать до неузнаваемости . Главным преимуществом является то, что ваш сайт гарантированно будет адаптивным и вообще красавцем в плане отображения на разных устройствах .
Просмотрите разные шаблоны и выберите такой, какой вам больше всего по вкусу. Я еще немного поискала на Envato Market и нашла шаблон Dalton , который мне понравился больше всего. Зайдя на демонстрационную версию шаблона, вы сразу увидите концепт корпоративного сайта. Нажав на меню, вы сможете посмотреть более подробно, какие функции есть у шаблона , как будут выглядеть разные страницы. Лучше всего уделить этому полчаса и как следует разобраться в том, что есть в шаблоне.
Что дальше? Подбираем размер макета сайта, режем и клеим
Когда вы уже освоились в шаблоне, можно приступать к его нарезке . Отлично, если разрешение вашего экрана 1920 рх или больше - это позволит просто делать скриншоты частей сайта и соединять их в редакторе. Работа с макетом начинается с шапки (header), далее - разные блоки (body), в конце - подвал (footer).
Вам понадобится:
- удобный инструмент для снимка выбранной области (screen capture tool), я использую Lightshot - он предлагает сохранить изображение в отдельный файл или копирует его в буфер обмена;
- Photoshop - для склеивания нарезанных частей изображений.
Этапы создания макета для сайта на основе шаблона
Шаг 1. Выбираем ширину макета сайта
Решите, какую страницу вы будете делать первой. Не начинайте с главной - ее лучше оставить напоследок, т.к. это наиболее важная страница сайта и сначала лучше немного набить руку . В примере я буду делать страницу «О нас» - здесь будет интересная информация о компании и ее сотрудниках. У меня уже есть прототип сайта , поэтому я знаю, что делаю. Кстати, как там ваш прототип?
Откройте Photoshop и задайте ширину макета сайта 1920 рх. Этого будет достаточно для того, чтобы увидеть, как сайт будет выглядеть в браузере. Если у вас разрешение меньше - ставьте такую ширину, которую позволяет монитор. Насчет высоты пока не беспокойтесь - здесь сложно угадать и все равно придется растягивать/сужать область.
Шаг 2 . Продолжаем создание макета сайта в Photoshop
Подберите в шаблоне такую шапку , которая вам нравится. Вырежьте ее с помощью удобного инструмента, откройте документ в Photoshop и вставьте туда (Ctrl+V). С помощью инструмента перемещения (V) поместите шапку вверху. Мне нравится шапка с topbar, где есть контактная информация о компании.
Шаг 2.А. Делайте сразу правильный макет сайта
Теперь у вас есть два пути - изменять текст в изображении или писать сопутствующий текст в текстовом файле. Что удобнее? Все зависит от ваших целей. На личном опыте могу сказать, что лучше это сделать в макете, сразу подобрав шрифт и размеры . Так безопаснее и будет WYSIWYG в действии (What You See Is What You Get, «что видишь, то и получишь»).
Шаг 3. Идем к успеху
Наполняйте свой макет разными блоками и редактируйте их согласно своим нуждам. На данном этапе можно не играться с цветами, если у вас нет навыков использования Photoshop. Для того чтобы увеличить высоту макета, используйте инструмент «Рамка» (С).
Что получилось
Спустя пару минут размышлений, нарезки и склеивания наиболее понравившихся кусков, у меня получился структурированный макет страницы «О нас»
О чем не стоит забывать
- Называйте каждый слой с блоком адекватно , согласно тому, что там есть. Иначе потом совсем потеряетесь.
- При подборе шрифта надо выбрать разный размер для заголовков и основного текста . При этом лучше руководствоваться библиотекой веб-шрифтов Google Fonts . Не забудьте отфильтровать кириллические шрифты.
Способ №2. Создание макета сайта в фотошопе почти
Вам подойдет способ №2, если:
- у вас нет Photoshop (совесть не позволяет или нет места на диске) или вы еще не научились им пользоваться;
- вы хотите познакомиться с HTML кодом и CSS стилями без вмешательства в разметку;
- вам нужен интерактивный макет сайта.
Советую шикарный бесплатный инструмент для создания макетов Macaw . Для работы с программой ее надо скачать и установить - дело пары минут. В программе можно в визуальном режиме практически верстать макет, потому что вы сразу сможете опубликовать его и увидеть HTML-код и CSS. Немного подробнее о работе программы. У Macaw есть существенный недостаток - она создает неадаптивную веб-страницу. Как с этим бороться? Здесь уже понадобятся навыки верстальщика , чтобы подключить фреймворк (например, если делать макет сайта под Bootstrap). Однако если нужно просто показать работающий макет коллегам - Macaw отлично подойдет.
Так выглядит неадаптивный шаблон на разных устройствах. Хочется плакать
Для начала работы запустите программу у себя на компьютере. Вашему вниманию представляется пустой документ с шириной страницы 1200 рх с сеткой макета сайта. По умолчанию между столбцами есть отступ (padding), поэтому между созданными элементами будет расстояние. Рисовать вам придется только в пределах колонок , потому что если вы выйдете за них, блоки будут отображаться друг под другом. Так что следите за ними.
Вы можете самостоятельно задавать ширину столбцов, их количество и расстояние между ними. Если вы хотите, чтобы элементы «прилипали» друг к другу , задайте 100% ширину колонки и уберите между ними отступ. Зачем вам эта сетка? При HTML верстке макета сайта будет проще сделать адаптивный шаблон , т.к. современные фреймворки используют именно 12-столбиковую сетку.
Вы можете изменить ширину рабочей области, потянув ее справа, или задав размер самостоятельно
Что дальше? Макетируем
Настройте рабочую область так, как вам удобно и приступаем к работе. Я буду создавать такую же страницу, которую вырезала из шаблона Dalton.
Шаг 1.
Для начала необходимо создать шапку . Это будет контейнер с высотой 100 рх и нижней границей, толщиной в 1 рх.
Внутри другого контейнера будет логотип, а внутри следующего - меню. Для отдельных элементов меню не нужно создавать отдельные блоки , достаточно установить приемлемое расстояние между словами (word spacing).
Шаг 2
С готовой шапкой можно приступать к остальным блокам. В следующем блоке у меня будет фон , который необходимо отдельно загрузить .
Шаг 3. Создание интерактивного макета сайта
Продолжаю перетаскивать блоки и вставлять в них текст. Кнопку создаю при помощи специального инструмента «Кнопка » (логика!). Macaw позволяет создавать интерактивный макет с разными состояниями кнопок и возможностью переключения между страницами.
Обратите внимание на следующие выделенные элементы. Они помогают переключаться между разными блоками и организовывать их. Например, текст должен быть в определенном контейнере , а не болтаться просто так.
Если нажать File -> Publish , вы получите готовую страничку, у которой можно будет просмотреть HTML-код и CSS в разных вкладках. Это очень удобно, если вы хотите увидеть, как выглядит разметка.
Что получилось
Получилось как-то так. Здесь для сравнения, слева склеенные куски отредактированного шаблона, справа - макет, созданный в Macaw. Большой плюс программы - вы можете вставлять кнопки, добавлять им ссылки, создавать разные страницы и переходить между ними. Только не забывайте об иерархии контейнеров и не потеряйтесь в них.
Особенности такого способа создания макета сайта:
- чтобы понять тонкости работы программы, надо потратить дополнительное время;
- даже когда уже вник в программу, все еще иногда не понятно, почему она ведет себя так, а не иначе;
- об адаптивности можно забыть, если не доделывать самому;
- действительно удобно создавать макет и даже немного разобраться в верстке - можно увидеть, как взаимодействуют элементы и вообще какая структура;
- в стилях могут появляться такие вещи «width: 16.6666666666%», которые надо будет исправлять ; просто необходимо понимать, что здесь WYSIWG, а не больше.
Способ №3. Онлайн-инструмент для создания макетов
Если вы ищете вариант, как создать макет сайта в приложении с максимально простым и интуитивным интерфейсом , этот способ я подготовила специально для вас.
Удобный инструмент для создания инфографики , которым я пользуюсь уже давно - сервис Creately . Здесь есть десятки и сотни компонентов для создания UI дизайна под разные устройства (больше под мобильные). Вам точно понравится, покажу некоторые из них.
Еще здесь удобно редактировать элементы , добавлять текст (и даже делать кнопки со ссылками!). В общем, всего за пару минут у меня уже получилось то же самое, что и в Macaw, только аккуратнее . Однако такой макет не сделать сильно интерактивным. К этому способу не будет шагов т.к. сервис хорошо интуитивно понятен. На скрине я постаралась максимально отобразить возможности сервиса .
Возможности сервиса Creately
На этом все. Это были те способы, к которым я пришла на том или ином этапе творческого развития. Если вы нашли пользу в этом материале - мы счастливы.
P.S. Данная статья является ознакомительной и не позволит вам стать веб-дизайнером. За серьезными знаниями придется еще много покопаться в интернетах.
Разумеется, обратившись к профессионалам, можно быстро получить множество идей того, как будут выглядеть все элементы вашего фирменного стиля или рекламной кампании. Однако далеко не каждая фирма, особенно небольшая и начинающая, может позволить себе эти траты на этапе становления бизнеса. Выбор очевиден: в таком случае стоит попробовать сделать макет своими руками. Даже если у вас нет никакого опыта в этой сфере, есть шанс создать достаточно качественный дизайн макета бесплатно.
К вашим услугам - каталог шаблонов, разработанный специалистами типографии «Принт».
Без лишней скромности скажем, что мы обладаем огромным опытом типографской работы. Именно он позволил нам структурировать все возможные требования к печатной продукции в каталоге и позволить клиентам использовать его шаблоны бесплатно. Создание макета онлайн начинается с выбора типа продукции: визитные карточки или рекламные листовки, поощрительные грамоты или сертификаты. Выберите в перечне тот, который необходим вам, и приступим к работе.
Как сделать макет
Алгоритм работы с каталогом очень прост.
- Выберите понравившийся вариант оформления.
- Внесите всю необходимую информации, не упуская ни единого пункта (которые вам точно не понадобятся, можно удалить одним нажатием кнопки).
- Отредактируйте шрифты и размеры.
- Скорректируйте текст так, чтобы он не выходил за границы печати.
- Выберите качество и плотность бумаги для вашей продукции.
- Выберите необходимое количество экземпляров и нажмите «Добавить в корзину». После этого ваш заказ поступит в обработку к менеджерам полиграфического союза «Принт».
Преимущества очевидны:
Не первый год работая в типографской отрасли, мы нередко сталкиваемся со стандартными задачами . Поэтому уже досконально изучили все подводные камни, отработали идеальную схему для онлайн дизайна и предоставляем шаблоны для печати любой вашей продукции.
- Мы предоставляем все шаблоны бесплатно. Это значит, что создание макета не будет стоить вам ни копейки. Согласитесь, приятно! К тому же можно подготовить несколько вариантов, прежде чем остановиться на одном.
- Вы можете вооружиться любой из идей, увиденных на нашем сайте. Это значит, что в создании вашего макета примет участие не один дизайнер или даже дизайнерское бюро, а творцы всех вариантов, представленных в каталоге.
- Реальная возможность сэкономить без ущерба для качества. Мы проверяем каждый вариант оформления, прежде чем предоставить его вам. Убедитесь сами - бесплатный дизайн может быть хорош!
- Собственная типография гарантирует быструю и качественную печать уже созданного макета.
- Оперативная доставка позволит не тратить время зря: никаких стояний в пробке, вам все привезут прямо в офис.
Подводя итог: создание бесплатного макета вашей продукции - первый шаг к созданию фирменного стиля «под ключ». Сделайте его вместе с полиграфическим союзом «Принт» и вы не пожалеете о том, что решили сэкономить на дизайне.
Конструктор макетов от типографии “Принт” - что это такое?
Бывает у вас такое чувство, что вы переплачиваете за то, что могли бы сделать сами и гораздо лучше, чем нанятый вами специалист? Если речь идет о полиграфии, то это чувство - не завышенная самооценка, а вполне адекватная оценка ситуации. Ведь очень большая часть печатной продукции производится по одним и тем же шаблонам - разве что меняются картинки и текст. И заменить их вы вполне сможете самостоятельно, если у вас есть специальный инструмент. А он у вас есть!
Позвольте представить вам бесплатный конструктор макетов, разработанный специалистами нашей типографии. Он предназначен для тех, кто хочет подготовить дизайн макет сам, не обращаясь к профессиональным дизайнерам или фрилансерам. Конечно, его возможности не безграничны, он никогда не сможет заменить профессиональные программы типа Фотошопа или КорелДро, но смастерить с его помощью простенький макет сможет даже самый неопытный пользователь.
Работает наш конструктор макетов онлайн. Это значит, что для его использования вам потребуется подключение к интернету и обычный компьютер, ноутбук или планшет. Никакого дополнительного программного обеспечения скачивать и устанавливать не придется. Все очень просто: открыли сайт, поработали, сохранили макет, отправили на печать. Согласитесь, это существенно ускоряет работу. Не надо искать свободного дизайнера, заполнять бесконечные брифы, тратить время на согласование и доработку. Даже очевидная экономия на оплате работы верстальщиков не так радует, как экономия своего времени.
С помощью конструктора производится разработка дизайна полиграфии различного типа , каждому из которых посвящена отдельная статья этого раздела. Там мы подробно описываем, как лучше сделать тот или иной макет и какие тонкости следует учесть. В этом же блоке мы предлагаем поговорить о том, как работает конструктор макета в целом, не затрагивая частных случаев.
Разработка дизайн макета в данном конструкторе производится абсолютно бесплатно , поскольку вы делаете ее сами, а мы лишь предоставляем инструмент и шаблоны (в нашей базе их находится несколько сотен). Вы можете воспользоваться любым из них бесконечное количество раз и не платить за их использование ни копейки. А поскольку происходит разработка дизайна онлайн, то заняться этим вы можете в любое удобное для вас время дня или ночи. В общем, когда посетит муза или его величество дедлайн =)
Бесплатный Онлайн редактор: плюсы и минусы
Разумеется, наш конструктор полиграфических макетов имеет как достоинства, так и недостатки. Прежде чем вы решите, будете ли делать макет своими руками, давайте предварительно обнажим всю правду о данном редакторе:
Плюсы, которыми обладает бесплатный конструктор
Экономия. Это, пожалуй, самый очевидный плюс, который вытекает уже из названия. Поскольку работает онлайн редактор бесплатно, вы сможете сэкономить на оплате дизайнера-фрилансера или зарплате штатного специалиста, который в освобожденное время сможет выполнить более важную работу.
Скорость. За то время, которое вы потратили бы на заполнение брифа и согласование деталей с дизайнером, вы успеете сделать не один, а даже несколько макетов.
Отсутствие “глухих телефончиков”. Есть известное выражение: “если хочешь, чтобы работа была сделана как надо, сделай ее сам”. С нашим конструктором вам не придется переживать, что вас не так поймут, выберут не тот оттенок или перепутают название фирмы. С собой-то вы точно найдете общий язык:).
Никаких творческих мучений. В вашем распоряжении - несколько десятков шаблонов. Даже если в голову совершенно ничего не приходит, вы можете воспользоваться любым из них и получить качественный результат.
Минусы, которые имеет графический редактор:
Ограниченный функционал. Поскольку конструктор предназначен для использования людьми без специального дизайнерского образования, назвать его полноценным инструментом сложно. Он позволяет производить элементарные действия со строго определенными видами полиграфической продукции и вряд ли сможет заменить профессиональные графические программы.
Неуникальность. Наши шаблоны нередко выглядят очень привлекательно и без дополнительной обработки. Поэтому их часто используют полностью, заменяя только текст и контактные данные. Это убыстряет работу, но увеличивает шанс встретить точно такое же изображение у кого-то еще.
Как видите, хоть недостатков немного, но они все-таки есть. Поэтому лучше узнать о них раньше, чем вы будете использовать наш онлайн конструктор бесплатно. Чтобы потом не возникло лишних недоразумений.
С чего начинается создание дизайн макета
Изготовление дизайн макета начинается с выбора типа продукции, который вам необходим. На нашем сайте вы найдете инструменты для верстки шести наиболее популярных видов полиграфии. Для каждого из них в нашей базе существует множество шаблонов, которые можно изменять на свой вкус: менять цвет, добавлять и убирать детали, вставлять QR-код и так далее и тому подобное.
У специалистов, готовых за деньги создать подобный дизайн макет цены могут варьироваться от тысячи рублей до несколько десятков тысяч . Сумма ощутимая, а если прибавить к ней еще и оплату работы над правками, которую требуют многие дизайнеры, то для некоторых заказчиков конечная стоимость станет и вовсе неподъемной.
Типография “Принт” предлагает сделать дизайн макета абсолютно бесплатно. За его основу может быть взят один из нескольких десятков готовых шаблонов, которые уже есть в нашей библиотеке. Мы постарались систематизировать эти шаблоны по темам и сферам применения, так что вам будет нетрудно найти необходимый именно для вас.
Лайфхак: некоторые наши шаблоны находятся сразу в нескольких конструкторах (с поправкой на размер и формат). Так, если вам потребуется сохранить единый фирменный стиль для визиток, листовок и наклеек, вы можете найти похожий шаблон в каждом из конструкторов и быстро сверстать полный набор полиграфии.
Помимо прочих плюсов использования нашего конструктора - то, что подготовка дизайн макетов к печати в типографии “Принт” будет выполнена автоматически и тратить на нее дополнительное время наших сотрудников не придется. А значит, ваш заказ быстрее попадет в печать (конечно, в том случае, если вы решите сразу же напечатать свое произведение искусства, а не сохранить его на потом).
Ну, кажется, обо всех формальностях мы уже рассказали, пора приступать к самому интересному - верстке дизайн макета.
Виды дизайн макетов
В зависимости от того, какой именно вы собираетесь заказать дизайн макета, требования к его оформлению и стилистике будут отличаться. На наш взгляд, все макеты можно разделить по следующим категориям:
Личные. Их главная цель - рассказать о своем обладателе. Как минимум это должны быть Имя и Фамилия, как максимум - в макете необходимо предусмотреть место для фотографии. Такие шаблоны у нас тоже имеются.
Художественные - пожалуй, самые нестандартные из всех. Создать такие в нашем конструкторе будет несколько проблематично. Все-таки шаблон есть шаблон и даже при большом старании его невозможно превратить в уникальное произведение искусства. Если вам нужно что-то действительно сверхвыдающееся, стоит обратиться к дизайнеру или даже иллюстратору.
К счастью, дизайн макетов Екатеринбург и другие талантливые города породили уже немало. Некоторые из них выглядят довольно специфически и подходят не под все задачи. Другие - напротив, очень универсальны и отлично будут смотреться почти всегда - неважно, будет это личный или деловой макет. Поэтому вы можете быть уверены на 100%, что вам удастся найти практически готовый дизайн макет почти на любой случай жизни, не покидая нашего сайта. Стоимость разработки дизайн макета при таком развитии событий будет равна нулю.
Неужели есть дизайнеры, которые готовы работать бесплатно? Такие тоже встречаются, но скорее всего когда-то и кто-то наверняка заплатил дизайнеру за эту работу, но “срок годности” для нее уже давно истек и теперь шаблоном могут пользоваться все желающие. Но не бойтесь обвинений в плагиате - наша программа для создания макета дизайна позволяет очень тщательно переработать и изменить верстку. Так, что даже сам автор не поймет, что данный дизайн оригинал макета создан на основе его работы.
Делаем рекламный дизайн макет
Дизайн макета рекламы требует от создателя особо пристального внимания, ведь он предназначен для эффективного продвижения товара или услуги. А значит, должен быть оригинальным, привлекательным, информативным, продающим и не слишком дорогим. Ведь его главная цель - увеличить прибыль компании , а не продавать себе в убыток. Поскольку наш конструктор работает бесплатно, то себестоимость вашей рекламы будет уже ниже, чем могла. Остается только продумать дизайн и дело в шляпе.
Разработка полиграфического дизайна в данном случае требует не только ярких креативных идей, но и осмысленности.
Чтобы все вложения в рекламу окупились, попробуйте назвать главные цели своей будущей полиграфической продукции раньше, чем откроете редактор макетов. Сформулируйте, а еще лучше, напишите на бумаге - чего вы ждете от этой рекламы, как на нее должны реагировать люди , продумайте наиболее эффективный для вас сценарий (должны ли люди забирать рекламную продукцию с собой, хранить ее или тут же обменивать на товар и тд). Даже личность промоутеров, которые будут раздавать ваши рекламки, может оказать влияние на будущий макет. Не бойтесь потратить время на этом этапе. В дальнейшем вы легко его наверстаете, ведь чем продуманнее будет ваш план, тем меньше размышлений потребуется в процессе его реализации.
Можно сказать, что графический дизайн макетов для рекламной продукции должен быть максимально утилитарным , выполняющим определенные задачи, а не воплощением творческих замыслов автора без оглядки на практичность. Только так вы сможете считать свою рекламную кампанию эффективной.
Урок дизайна макетов
Если до сих пор вам казалось, что сделать дизайн макет своими руками очень трудно, спешим вас уверить в обратном. Мы прекрасно понимаем, как сложно с чистого листа освоить дизайнерское мастерство, разобраться во всех хитросплетениях и тонкостях верстки и при этом еще нужно как-то умудриться продолжать выполнять свою непосредственную работу, заниматься семьей, отдыхать. Нам захотелось освободить вас от лишних забот, поэтому мы постарались максимально упростить свой редактор.
Теперь, создавая дизайн макетов онлайн, вам не придется заботиться и пытаться разобраться в таких узко специализированных категориях как отступы, допуски, форматы и прочее прочее. Все сложные требования к дизайн макетам мы уже учли изначально. Забудьте о них раз и навсегда! Вам остается лишь открыть наш бесплатный редактор макетов и приступить к самой приятной части разработки - продумыванию деталей. Позвольте дать вам несколько простых, но очень полезных советов.
Берем пример с опытных верстальщиков:
Попробуйте выполнить дизайн макетов для полиграфии в нескольких вариантах. У вас есть бесконечное число попыток для того, чтобы создать идеальный макет. Так зачем же останавливаться на первом? Оптимальным будет сделать около трех - пяти вариантов дизайн макета и провести импровизированную фокус-группу среди коллег и специалистов - какой из них лучше. Посторонний взгляд, кстати, поможет и вовремя избавиться от возможных опечаток и недоработок. Ведь даже самые лучшие глаза имеют свойство “замыливаться” и не замечать очевидных недостатков.
С техническими характеристиками, которые использует наша программа подготовка дизайн макета к печати пройдет незаметно для вас. Поэтому не стоит выносить изображение за указанные нами линии безопасности, если вы на 100% не уверены в том, что делаете это правильно.
Если есть такая возможность, не отправляйте макет в печать сразу же после того, как его сделаете. Лучше всего еще раз осмотреть готовую работу утром, или хотя бы несколько часов переключиться и позаниматься чем-нибудь другим. Так вы сможете увидеть свой макет “свежим взглядом”. Скорее всего, вам захочется внести какие-то дополнительные правки.
При соблюдении этих простых советов вам не придется краснеть за свою работу. Думаем, что знакомые будут просить контакты того классного дизайнера, который сделал для вас эти отличные макеты. А вы сможете небрежно ответить: да я сам, “на коленке” нарисовал. Прекрасная перспектива, не так ли?
Как возникают лучшие дизайн макеты
Многие ошибочно полагают, что хороший макет - это макет красивый. Или тот, за который много заплатили. Или тот, который нарисовал очень крутой дизайнер. Все это очень далеко от истины. Самое главное качество - это эффективность. Спросите себя: выполняет ли мой макет поставленные перед ним цели? И если вы ответите “да” - поздравляем! Вы проделали хорошую работу.
Как понять, по силам ли вам разработка макета?
Мы уже не раз повторили, а вы наверняка запомнили, что способы создания дизайн макета могут отличаться в зависимости от целей, финансовых возможностей, уровня сложности и прочих условий. Если вам нужен дизайн макет - сначала проанализируйте, каким он должен быть, и можете ли вы сделать все, что задумали? Кажется, это безнадежно? Откройте наш редактор и попробуйте его в деле. Можете не относиться к этому занятию очень серьезно. Скорее даже наоборот, попытайтесь создать что-нибудь смешное и забавное. Например - визитную карточку знаменитого Ждуна.
Уже через несколько минут упражнений вы почувствуете себя уверенно и поймете, что совсем не обязательно тратиться на услуги по разработке дизайна. В ваших силах справиться с этой задачей без посторонней поддержки.
Разумеется, бывает и по-другому. Вы можете быть абсолютно уверены в том, что легко освоите наш конструктор, но окажется, что в нем нет необходимых для вас функций. В таком случае лучше сначала посоветоваться с нашим менеджером (вдруг вы просто не заметили нужную кнопку или не знаете, как ее использовать). И уж если наш специалист не сможет вам помочь, придется присмотреться к сторонним дизайнерам.
Последний довод “за”:
Онлайн редактор макетов способен сильно облегчить вашу жизнь , а онлайн редактор макетов бесплатно - еще и сэкономит ваши деньги. Сотрудники типографии “Принт” очень любят делать и то, и другое. Поэтому мы будем очень рады, если вы оцените наш конструктор по достоинству. Попробуйте использовать наш конструктор прямо сейчас. Надеемся, он вам так понравится, что необходимость верстать макеты больше никогда не будет вашей головной болью, а превратится в еще одно дело, которым вы занимаетесь с удовольствием.
Как сделать макет без недостатков
Спешим разуверить тех, кто считает, что выгоднее и быстрее купить макет, чем сделать его самому. В реальности создание макетов за деньги или бесплатно имеет мало различий. Вы с одинаковой долей вероятности можете обнаружить шедевральный макет онлайн или получить жалкую халтуру за свои кровные.
Бесплатные макеты из конструктора типографии “Принт” когда-то тоже создавались профессиональными дизайнерами. Кроме того - их качество уже подтверждено специалистами нашей типографии, а все необходимые для печати технические требования строго соблюдены. И напротив - изготовление макетов у стороннего дизайнера может обернуться непредвиденными проблемами.
Почему так случается?
Дело в том, что далеко не все профессиональные дизайнеры специализируются на печати. Ваш исполнитель может быть невероятно талантливым и творческим человеком, но не знать при этом элементарных требований к предпечатной подготовке. Выполненный им макет будет потрясать оригинальной идеей и совершенством деталей, но быть совершенно бесполезным для типографии. Можно сказать, что иногда наш простенький редактор графики знает о печати больше, чем опытный дизайнер с высшим образованием.
Кроме того, чтобы выполнить работу качественно, необходимо несколько лет потратить возьмется либо студент, у которого по определению большого опыта нет; либо человек, не только на обучение, но и на наработку опыта. Вряд ли вы готовы оплачивать довольно примитивную работу по высшему разряду. Значит, за ее изготовление который не захочет тратить много времени и сил, чтобы получить минимальную оплату. Велика вероятность того, что он сделает работу “спустя рукава”.
Поэтому мы очень рекомендуем хотя бы попробовать создать макет бесплатно прежде, чем обращаться к другим специалистам за помощью. Если же вы все-таки решите, что эта работа вам не по зубам, то воспользуйтесь нашими советами, чтобы выбрать хорошего дизайнера.
Признаки хорошего дизайнера:
У дизайнера должен быть опыт работы с полиграфией. У всех типографий примерно одни требования, поэтому будет достаточно, если ваш наемный специалист успел разработать хотя бы пару макетов в той категории, которая вас интересует.
У дизайнера есть свое портфолио, и он не стесняется его показывать. Прежде чем доверять специалисту свой заказ изучите его предыдущие работы. Хорошо, если это будут графические изображения. Еще лучше, если он сможет вам показать их воплощение в реальности (так называемый, “авторский экземпляр”)
Если дизайнер даже не пытается задавать уточняющие вопросы о том, чего бы вы хотели, чем занимается ваша компания, какие макеты вы считаете удачными, а какие не очень - есть вероятность, что ему совершенно наплевать на то, каким будет результат. С таким подходом очень сложно выполнить работу качественно.
Надеемся, эта информация поможет вам сделать правильный выбор.
Как сделать макет своими руками
Онлайн-редактор полиграфических макетов на нашем сайте устроен таким образом, чтобы справиться с ним смогли люди самого разного уровня образования и с минимальными дизайнерскими навыками. Разработка макета происходит пошагово , все пункты, которые необходимо выполнить в процессе четко обозначены. Поэтому, если вы будете следовать за нашими подсказками, то сможете без труда создать макет онлайн за считанные минуты.
Обратите внимание! Чтобы вам было проще делать макеты своими руками схемы все стандартизированы и приведены к единому размеру и формату. Так что вы легко можете заменить шаблон прямо в процессе работы, если вдруг решите, что другой более полно выражает ваш творческий замысел. При этом уже напечатанный на шаблоне текст не пострадает, даже если его большая часть введена. Останется только лишь скорректировать его месторасположение - ведь графические элементы не всегда совпадают и могут перекрывать текст.
Мы с полной уверенностью можем сказать, что онлайн конструктор полиграфический макетов, существующий на нашем сайте, - один из лучших редакторов этого типа. Но если вдруг у вас есть примеры еще более качественных разработок - дайте нам знать. Возможно, мы возьмем чужой опыт на вооружение и сделаем наш конструктор еще совершеннее.
Если вдруг у вас остались какие-то вопросы, вы можете поискать на них ответы в на нашем сайте или обратиться в чат.
Любой макет создается с учетом определенных технических требований. Для макетов печатных материалов и макетов для сайтов они совершено разные. Многие начинающие дизайнеры не учитывают это и начинают творить, что душе угодно.В этой статье я напишу как сделать все грамотно (и укажу частые ошибки), что повысит производительность у дизайнера и снимет головные боли frontend программиста.
Тезисы
Сначала я изложу основные тезисы. Многие из них претендуют на труды небезызвестного персонажа по кличке K. O., но тем не менее, не все об этом знают.- Верстают в программах для верстки
- Правильно создайте документ
- Используйте сетку
- Используйте функционал шаблонизирования
- Учитывайте не статичность сайтов
- Вы работаете с рыбой, реальные тексты будут другие
- Подготовите материалы для верстки
Верстают в программах для верстки
Я часто слышу о том, что дизайн пытаются делать в photoshop"e.Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах (ну на сколько я знаю) раскладывают все верно:
- Для дизайна есть InDesign (ну или QuarkXPress).
- Для рисования есть Illustrator (ну или CorelDRAW).
- Для редактирования фотографий есть Photoshop. (ну Gimp и еще миллион программ). Ну и только в веб-дизайне он еще используется для сохранения картинок.
Одна из моих теорий на этот счет, это незнание заказчика. Думаю, что все рисуется в photoshop"e заказчик говорит «Мне нужен макет в psd, завтра в 6:34 и что бы от него пахло настоящим дизайном».
Не бойтесь объяснить заказчику, что макеты делаются не в photoshop"e и завтра ровно в 6:34 он получит макет в PDF.
Правильно создайте документ
При создании документа многие не читают диалог и сразу жмут «ОК». Но тут есть что настроить. Пример верной настройки:
Назначение: Web - Это переведет все размеры в пиксели. В вебе мы работает с ними и только с ними, никаких «подвинь на 1 сантиметр».
Размер страницы: 960 это стандартный размер. Если не уверены и в первый раз делаете веб-дизайн берите, не думайте. Но конечно он может быть любым. Главное правильно не забывать о том, что полоса прокрутки съест ширину, так что не берите ширину абсолютно равную какому нибудь разрешению экрана, берите немного меньше.
Ах и да, ширина должна быть кратной двум. Один раз я встретил сайт шириной 1227 пикселя.
Про сетку я расскажу в следующем разделе, ее всегда можно поменять в Layout->Margins and columns.
Хинт: многие даже опытные дизайнеры не знают, что высоту (впрочем как и ширину) можно выставлять индивидуально для каждой страницы внизу закладки pages самый первый значек. Когда презентуешь макет в PDF длиннющие белые хвосты внизу страницах незачем.
Используйте сетку
Что бы макет выглядел хорошо, все элементы должны быть систематизированы. Тут речь не только о сайтах, но и о любых макетах в принципе.Сетка это основа любого макета. От нее и пляшут. Поэтому ее выбор очень важен. Но я не буду тут расписывать ее «графические» свойства. Для нас важны технические требования.
1 - margin, 2 - ширина колонки, 3 - gutter, 4 - стандартный отступ
Все размеры сетки должны быть целочисленными и желательно кратными двум.Вот список параметров:
- Ширина макета
- Ширина внешних отступов (margin)
- Число колонок
- Отступы между колонками (Gutter)
Ширина макета = margin*2 + x*Число колонок + gutter*(Число колонок-1)
Например для документа созданного выше в примере это будет
960 = 10*2 + х*6 + 14*5
х = 145
х (ширина колонки) получилась целочисленной, значит все в порядке, если нет, поменяйте отступы.
И еще один момент, бывают макеты, где margin нулевые. И вам говорят «а зачем они, все отлично смотрится без них». Да это утверждение верно для компьютеров, где еще всяко будет пустое место на экране, но на мобильных устройствах сайт будет шириной ровно в экран и прилипший к краю шрифт будет смотреться ужасно.
Так же на забудьте указать, как я называю его «стандартный отступ». Не нужен будет ломать голову какой отступ делать. Разумеется отступ может быть и двойным. А так же вертикальный отступ может отличаться от горизонтального.
И не забывайте собственно использовать сетку, все элементы крепите по ней.
Дизайнеру в общем то без разницы где стоит элемент, но программист крепит элементы именно к сетке, так что для него крайне важно, что бы элементы никуда из нее не выползали.
Используйте функционал шаблонизирования
На сайтах различные элементы интерфейса и самое главное общий шаблон остается одинаковым на всех страницах.Поэтому его надо хранить в master pages. Вопросов «а какая из этих страниц верный макет» больше не будет.
Тоже самое касается и цветов. Все цвета используем только через swatches. Это позволит не плодить кучу цветов и менять их везде одним кликом.
Учитывайте не статичность сайтов
В отличии от печатной продукции, сайт это динамический объект. Не забывайте в макетах создавать элементы в разных стадиях (например просто ссылка, ссылка на которую навели, активная ссылка).Вы работаете с рыбой, реальные тексты будут другие
У многих дизайнеров которые раньше работали с печатной продукцией остались привычки обращать внимание на мелочи форматирования текста.Я имею в виду такие вещи, как отсутствие коротких слов в конце строки или использование переноса только в одном определенном длинном слове.
У вас статический контент, вы можете контролировать каждую букву и каждый пробел в отдельности.
Конечно это правильно и явный признак профессионализма, когда речь идет например о журнале, но в сайте вы не сможете контролировать пользовательский контент.
Так что не забывайте указывать максимально возможную длину для заголовков и тому подобные вещи.
Подготовите материалы для верстки
Прежде всего спросите frontend программиста, какие элементы ему понадобиться в картинках.Многие опытные дизайнеры уже знают, что это окошко программист нарисует border-radius"ом с box-shadow (я не говорю, что нужно знать названия свойств, просто со временем откладывается, что многие даже достаточно сложные фигуры и эффекты рисуются на css)
Но если вы новичок в этом дело спросите конкретно «что надо?».
Немного о сохранении картинок.
Все надо сохранять не просто через save в photoshope, а через save for web.
Небольшие элементы, элементы требующие прозрачность или содержащие шрифты сохраняем в png-24.
Графику, картинки и фоны jpeg. Следите за размером файла делайте максимально маленькими, пока визуально не сильно видно отличие.
Предоставьте список используемых цветов в HEX формате.
На забудьте дать все шрифты используемые в макете.
И наконец обсудите с программистом все устно, это полезно всем.
Теги: дизайн сайтов, верстка сайтов, frontend, пособие, turtorial
Рис.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).
Рис.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).
При создании сайта в фотошопе используйте линейку - это черные штучки с цифрами, это они и есть. И горячая клавиша “ ⌘;” , чтобы скрыть и показать направляющие. Т.е. давайте на скриншоте на примере, я открываю линейки и просто перетаскиваю из углов направляющие, опять же направляющие нужны, чтобы ваш макет выглядел ровно, чтобы вы могли по этим направляющим ваши текстовые блоки, картинки и фигуры уметь выровнять. И стоит еще здесь проверить, чтобы единица измерения была “пиксели”. Нужно просто нажать правой кнопкой мыши на линейке и установить пиксели(рис.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, откатываемся на предыдущее изменение.
Итак, мы рассмотрели дизайн сайта в фотошопе пошагово. И давайте на примере реального макета посмотрим вместе, как это работает.
