Как сделать дизайн в фотошопе
Flat-дизайн это относительно новое направление в разработке веб-интерфейсов. iOS и даже Windows постепенно адаптируются под этот стиль, и, в скором времени, почти все (если вообще не все) веб-сайты переймут данный подход.
Однажды, проснувшись утром и открыв свой любимый сайт, вы будете удивлены тем, что его внешний вид также flat-дизайн ! И вы немедленно броситесь перерабатывать свой собственный блог или сайт, чтобы быть в тренде.
Исходя из вышесказанного, вопрос напрашивается сам собой: « Почему бы не начать переработку интерфейса уже сегодня »? Так вы сможете быть на шаг впереди остальных!
Вы можете подумать, « С чего же мне начать? » Конечно, реконструкция дизайна сайта это адский труд. Данная статья как раз и посвящена этому – она будет вашей рукой помощи в этом нелегком деле.
Хорошим первым шагом в деле переработки скевоморфного дизайна вашего сайта будет изменение изображений, используемых в элементах интерфейса, в стиле flat-дизайна. Это, возможно самый простой шаг, потому что он практически не требует переработки кода.
Все, что вам нужно, это креативность и знание графических программ. Скорее всего, на вашем сайте достаточно много иконок, которые нужно привести flat-виду. Это может отнять много времени. Разумеется, в первую очередь необходимо переработать самые важные из них: те, которые появляются на всех страницах. Можно начать с логотипа или, что еще лучше, иконок навигации.
В данной статье, я постараюсь облегчить решение задачи переработки дизайна и рассказать о том, каким образом создаются иконки навигации во flat-стиле. Я буду использовать графический пакет Adobe Photoshop CS6 (но вы можете без проблем использовать более ранние версии). Приготовьтесь – мы начинаем.
Вот наш конечный результат:
Откройте Photoshop. Создайте новый файл, использовав пресет « Фото » (Photo) ( 10x8 inch, 300 DPI, прозрачный фон, цветовая схема RGB ).
На данном этапе вы уже можете сохранить и использовать изображение. Оно уже достаточно неплохо напоминает иконку домашней страницы во flat-стиле. Но стоит пройти еще пару шагов и добавить длинную тень.
Отправьте тень на самую нижнюю позицию и растрируйте этот слой. Используя инструмент « Волшебная палочка » (Magic wand tool), создайте выделение на слое с большим прямоугольником с закругленными углами, внутри которого находится наш домик, а затем инвертируйте выделенную область (можно использовать сочетание клавиш CMD/CTRL+Shift+I ). Не снимая выделения, выберите слой с тенью и нажмите кнопку « delete ».
Иконка готова. Чтобы сохранить её, нажмите « Файл>Сохранить для веб и устройств.. » (File>Save for Web) (горячая клавиша CTRL + Shift + ALT + S ). Сохраните иконку в формате PNG-24 с включенной прозрачностью.
Мы хотим, чтобы все сохранилось в формате PNG-24 с поддержкой прозрачности.
Теперь, займемся иконкой Post :
Ниже вы можете видеть иконки About Me и Contact Me :
Все иконки можно скачать тут .
Надеюсь, что после прочтения данного руководства, вы начнете переделывать свои веб-сайты. Как я уже говорил, это очень трудоемкий процесс, но он неизбежен, поэтому не стоит этому сопротивляться.
Кроме того, flat-дизайн разработан не только для того, чтобы радовать глаз, он еще и полезен с практической точки зрения. Поэтому, можно убить сразу нескольких зайцев разом.
Напоминаю, что это всего лишь руководство. Рекомендую хорошенько поэкспериментировать с данным материалом. Постарайтесь быть настолько креативным, насколько это возможно.
Ограничением может быть лишь ваш ум. Вы не знаете, насколько далеко можете зайти, если освободитесь от ограничений.
Создание привлекательных и функциональных веб-макетов – неотъемлемая часть жизни веб-дизайнера. В этом уроке мы будем создавать профессиональный макет сайта с нуля. В процессе урока Вы узнаете некоторые полезные трюки при создании дизайна.
Ресурсы урока:
Шаг 1. Mockup
Прежде, чем мы начнем создавать макет сайта, нужно создать план-эскиз будущего макета, на котором будет видна его функциональность и приблизительный внешний вид.
Шаг 2. Создаем документ.
Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.
Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).
Перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.
Установите направляющие точно по границам выделения.
Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.
Установите направляющие по новому выделению:
Шаг 3. Создаем шапку сайта.
Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.
Залейте выделение серым цветом, а в дальнейшем используйте стили слоя, чтобы применять цвета и градиенты.
К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.
Теперь шапка будет выглядеть так:
Создайте на шапке выделение в 110 пикселов.
Нажмите клавишу Delete, чтобы удалить выделенную часть.
Слой с подсветкой сожмите по вертикали (Ctrl + T).
Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).
Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:
Примените новый слой с маской, которую залейте только что созданным градиентом.
Шаг 4. Создаем узор
Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование – Определить узор) (Edit > Define Pattern):
Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.
После добавления текстуры шапка выглядит так:
Шаг 5. Добавляем логотип
К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).
Шаг 6. Навигация
Добавьте текст для навигации.
Нарисуйте кнопку навигации, используя инструмент Прямоугольная область выделения (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.
К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).
Шаг 7. Слайдер для контента
Создайте выделение размером 580х295 пикселов.
Залейте выделение любым оттенком серого.
Поместите изображение. Закрепите его со слоем, который создали ранее.
Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N), выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:
Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).
Выделите нижнюю половину тени и удалите (Delete).
Поместите слой с тенью над слайдером:
Сожмите слой с тенью за средний маркер (Ctrl + T), а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).
Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.
Уменьшите непрозрачность слоя с кнопками до 50%.
Добавьте фигуру стрелки на кнопки слайдера:
Уменьшите непрозрачность слоя с полосой до 50%.
На эту полосу добавьте описание Вашего проекта:
Шаг 8. Добавляем текст с приветствием
Напишите текст с приветствием:
Шаг 9. Завершаем работу над шапкой сайта
Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).
Оставьте между тенью и заголовком пропуск в 1 пиксел.
Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.
Шаг 10. Добавляем кнопки для слайдера
Нарисуйте кнопки смены слайдов.
К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J).
Шаг 12. Создаем разделитель для контента
Добавьте к слою с линией маску и при помощи градиента сделайте плавный переход на краях.
Шаг 13. Добавляем контент
Пришло время добавить области под контент. Область контента будет разделена на 3 колонки с равным отступом. Между каждой колонкой будет отступ в 25 пикселов.
Добавьте направляющие по обеим сторонам колонок.
Добавьте в колонки список услуг. Украсьте текст с услугами иконками.
Нарисуйте кнопку «Read More» при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме слой-фигуры.
К слою с кнопкой примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).
Дублируйте слой с кнопкой (Ctrl + J).
В нижней части этих трех колонок нарисуйте серые прямоугольники и добавьте к ним стиль Обводка (Stroke), размером в 3 пиксела.
Добавьте изображения в эти серые области:
Создайте тень, как делали это ранее и поместите ее под области с фотографиями:
Добавьте описание проекта:
Поместите в одну из колонок иконку Twitter.
Нарисуйте кнопку More Tweets.
Примените к этой кнопке стили слоя:
Шаг 14. Создаем футер
Создайте выделение в нижней части макета – это будет область под футер, и залейте выделение серым цветом.
Примените к этой области стиль слоя Наложение цвета (Color Overlay).
Начнем с макета страницы, а затем перейдем к разработке ее отдельных элементов. Результатом будет современный макет веб-страницы, готовый к верстке:
Его ключевыми особенностями являются горизонтальные полосы для разделения контента, красочный заголовок, портфолио, двухрядный основной макет и подвал со ссылками:
Перед тем, как создать сайт в Фотошопе , лучше сделать наброски основных контуров на бумаге:
Проектирование макета также помогает разработать структуру и получить представление о лучших позициях для ключевых элементов дизайна:
Создавая новый документ в Adobe Photoshop , я делаю макет размером, соответствующим распространенному широкоформатному монитору, чтобы дать хорошее представление общего вида сайта:
Отмерьте направляющими ширину в 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы:
Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте « Наложение градиента » ( Gradient Overlay ) с вертикальным переходом от серого цвета к белому:
Далее нарисуем область основного заголовка, где будет размещен избранный материал. На новом слое сделайте выделение, затем примените к нему стиль « Наложение градиента » с двумя цветами. Также добавьте неброскую внутреннюю тень, чтобы придать эскизу глубины:
Выделив область заголовка с маской, нажмите CTRL+SHIFT+C , чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум , чтобы создать простую текстуру, затем установите режим наложения « Умножение » и снизьте прозрачность до подходящего значения:
Далее продолжаем делать сайт в Фотошоп , вставив логотип компании и расположив его в сетке. Добавьте стиль « Наложение градиента » с настройками, соответствующими цветам заголовка, затем создайте мягкую внутреннюю тень:
Используйте инструмент « Текст » для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:
Заголовок – это отличное место, чтобы представить сайт. С ярким фоном он привлекает основное внимание пользователя. Используйте это пространство, чтобы поместить привлекательный вступительный заголовок с индивидуальным шрифтом, который соответствует имиджу компании:
Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica , чтобы текст можно было поместить в html без замены изображений:
Перед тем, как сделать сайт в Фотошопе до конца, расположите изображение ноутбука посередине. Это хорошо согласуется с образом выдуманной компании, и создает отличное тематическое пространство для отображения примеров работ на экране компьютера:
Подчеркните эту область радиальным градиентом, исходящим из-за компьютера. Этот дополнительный штрих поможет возвысить элемент над страницей:
Под основным заголовком создайте другое выделение и заполните его бело-серым градиентом:
Разделите среднюю часть страницы на две колонки с направляющими, привязанными к линиям сетки. Слева у нас будет главная панель контента, а правая будет содержать тонкую боковую панель. Используйте инструмент « Текст », чтобы добавить текст для примера:
Ниже область основного контента может содержать место для отображения последних записей блога. Разделите этот столбец еще на две колонки и набросайте примеры записей. Ссылки заголовков должны расцениваться пользователями как кликабельные, поэтому измените их цвет, чтобы дать визуальную подсказку:
При создании сайта с нуля в Фотошопе и верстке используем инструмент « Прямоугольник со скругленными углами », чтобы нарисовать прямоугольник на боковой панели. Первоначальный цвет не имеет значения, так как мы будем менять его стиль в следующем шаге:
Дважды щелкните по слою и добавьте ряд стилей слоя, в том числе серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень:
Используйте эту боковую панель, чтобы разработать секцию Featured Project ( Рекомендуемый проект ). Ее элементы могут включать в себя небольшие снимки и отрывки текста:
Нарисуйте еще один прямоугольник, чтобы использовать его как кнопку. Добавьте пару стилей слоя, таких как « Наложение градиента » и « Обводка », чтобы стиль кнопки соответствовал общей серой теме:
Создайте короткую и содержательную надпись для кнопки, побуждающую пользователя пройтись по сайту, чтобы посмотреть будущие проекты:
Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:
Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T , чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:
Расположите тень по центру экрана, затем удалите лишнее пространство над подвалом. В результате получится тонкая тень, которая « приподнимает » главную страницу, добавив дизайну немного деталей:
Подвал является отличным местом для отображения второстепенных элементов страницы. Например, формы для авторизации пользователей. Доработайте дизайн с помощью инструмента « Текст », а затем нарисуйте пару полей для ввода. Дополните поля мягкой внутренней тенью:
Добавьте контактную информацию в нижний правый угол. Так эти данные будут всегда под рукой у пользователей. Выделите наиболее важные аспекты с помощью размера и большей толщины или цвета:
Итоговый дизайн сайта в Фотошопе искусно сочетает все необходимые элементы на странице, которые выравнены по базовой сетке. В результате мы получили структурированный макет с разными оттенками серого цвета. Такая цветовая гамма используется для подчеркивания предметных областей и важного контента.
Приложение Adobe Comp больше не будет доступно для загрузки в App Store и Google Play с 15 февраля 2022 года. Существующие пользователи приложения будут получать официальную техническую поддержку до 29 апреля 2022 года. Подробные сведения приведены на странице Окончание поддержки Adobe Comp.
Начните работать с потрясающими новыми функциями для дизайна. Создавайте проекты для различных экранов и устройств, для печати и графического дизайна — на одном бесконечном холсте Прочитайте подробнее об отдельных возможностях из целого ряда новых функций Photoshop для дизайна.
Быстро создавайте проекты
Создавая документ в Photoshop, вместо чистого холста можно выбрать любой шаблон из большой коллекции в Adobe Stock. Шаблоны содержат ресурсы Stock и иллюстрации, используя которые можно оформить проект.
В дополнение к шаблонам также можно создать документ, выбрав один из многочисленных наборов, доступных в Photoshop, или создать свои собственные заказные размеры. Можно также сохранять свои собственные наборы для последующего использования.
Библиотеки Creative Cloud Libraries
Библиотеки Creative Cloud на основе технологии Adobe CreativeSync предоставляют доступ к избранным ресурсам где и когда угодно на любом устройстве.
Открывайте общий доступ к библиотекам и работайте в них с любыми пользователями, у которых есть учетная запись Creative Cloud. При добавлении соавторов в библиотеку выберите, какой уровень доступа вы им предоставляете. Можно также создавать библиотеки, на которые другие пользователи могут подписываться для получения обновлений.
Шрифты SVG
В Photoshop поддерживаются шрифты SVG, включая эмодзи. Можно создать композицию из нескольких символов шрифта эмодзи SVG для создания новых глифов. Например, можно создать флаги стран или изменить цвет кожи для глифов, изображающих одного человека.
Работа с Adobe XD
Добавляйте свои ресурсы Photoshop прямо в Adobe XD, новый универсальный инструмент для разработки дизайна и прототипирования пользовательского интерфейса веб-сайтов и мобильных приложений.
Монтажные области
Монтажные области — это идеальное решение для разработки адаптивных дизайнов для нескольких экранов, так как они позволяют создавать несколько макетов разного размера и размещать их в одном документе для одновременного просмотра. Можно экспортировать несколько монтажных областей одновременно или переносить их по отдельности. Теперь можно создавать дубликаты слоя или группы слоев в других монтажных областях, быстро менять фоны монтажных областей и просматривать монтажные области с прозрачным фоном.
Новые параметры экспорта
Теперь можно экспортировать монтажные области, слои, группы слоев или документы Photoshop как графические ресурсы JPEG, GIF, PNG, PNG-8 или SVG. Использование команд быстрого экспорта позволяет создавать материалы в часто используемых графических ресурсах одним щелчком. Внедряйте цветовые профили в файлы PNG или JPG. Настроить все параметры экспорта для удобной работы можно в меню «Установки».
Среда выделения и маскирования
Создавать выделения и маски точной формы в Photoshop стало еще проще и быстрее. Для этого была специально создана новая рабочая среда. С помощью таких инструментов, как кисть «Уточнить край» можно четко разделять элементы переднего и заднего плана, а также выполнять многие другие операции.
Подбор шрифта
Подбирайте конкретные шрифты и позвольте Photoshop выполнить за вас самую сложную работу. Благодаря интеллектуальному анализу изображений Photoshop может на основе внешнего вида латиницы автоматически определить тип шрифта и подобрать аналогичный лицензированный шрифт на компьютере или в Adobe Fonts.
Интеграция с Adobe Stock
Теперь при работе с ресурсами на веб-сайте Adobe Stock можно открывать выбранные ресурсы в Photoshop непосредственно с веб-сайта. Кроме того, в любую библиотеку можно добавить материалы с водяными знаками для предварительного просмотра или лицензированные шаблонные изображения. Затем такие изображения можно использовать в документах Photoshop как ресурсы, связанные с библиотекой.
Новый поиск с фильтрацией на сайте Adobe Stock и в ресурсах из вашей библиотеки значительно упрощает поиск нужных ресурсов. Кроме того, лицензированные ресурсы Adobe Stock помечаются значком для удобства, а видеоресурсы теперь имеют связанные предпросмотры.
Постоянный доступ к Photoshop
Такие приложения для мобильных устройств, как Photoshop для iPad, Adobe Fresco, Adobe Comp и Adobe Capture, расширяют возможности Photoshop, обеспечивая доступ к этому ПО на любом устройстве и позволяя создавать великолепные дизайны без доступа к настольному компьютеру. Попробуйте создать что-нибудь новое! Например, используйте Capture на мобильном устройстве для преобразования любого изображения в узор. Сохраните его в библиотеку Creative Cloud, а затем используйте в качестве узора или узорной заливки в проектах Photoshop.
Быстро создавайте творческие проекты с использованием большой коллекции шаблонов из Adobe Stock и чистых наборов.
Впервые реализовано в версии Adobe Photoshop 2017
Создавая документ в Photoshop, вместо чистого холста можно выбрать любой шаблон из большой коллекции в Adobe Stock. Шаблоны содержат ресурсы и иллюстрации, используя которые можно оформить проект. Можно открыть шаблон в Photoshop и работать с ним так же, как с любым другим документом (. psd ).
В дополнение к шаблонам также можно создать документ, выбрав один из многочисленных наборов, доступных в Photoshop, или создать свои собственные заказные размеры. Можно также сохранять свои собственные наборы для последующего использования.
обеспечат источник вдохновения и предоставят готовые элементы для использования в документах. Можно загружать шаблоны из Adobe Stock, которые включают качественную графику и иллюстрации прямо через Photoshop. Затем на основе этих шаблонов можно без труда создавать документы с общими настройками и элементами дизайна. Шаблоны открываются как файлы psd в Photoshop и обычно включают несколько монтажных областей.
Пустые наборы настроек документов
— это пустые документы с предварительно определенными размерами и настройками. Наборы упрощают разработку контента для устройств с конкретным форм-фактором или для конкретных сценариев использования. Например, можно использовать набор настроек, чтобы быстро приступить к работе над проектом для iPad Pro. В пустых наборах настроек документа предварительно заданы размер, цветовой режим, единицы измерения, ориентацию, позиционирование и разрешение. Эти настройки можно изменить перед созданием документа с использованием набора.
Шаблоны и наборы настроек делятся на следующие категории:
- Фото
- Печать
- Графика и иллюстрации
- Интернет
- Мобильные телефоны
- Фильмы и видео
Выполните одно из следующих действий.
- Используйте следующее сочетание клавиш.
- (Mac) Cmd+N
- (Windows) Ctrl+N
Обзор: диалоговое окно «Новый документ»
В диалоговом окне «Новый документ» можно выполнять следующие задачи:
- Создавайте документы с использованием выбранных шаблонов из Adobe Stock в разных категориях: Фото , Печать , Графика и иллюстрации , Интернет , Мобильные телефоны и Фильмы и видео .
- Находите дополнительные шаблоны и создавайте с их помощью документы. См. раздел Поиск других шаблонов на Adobe Stock.
- Быстро открывайте файлы, шаблоны и недавно использованные элементы (вкладка Недавние ).
- Сохраняйте собственные наборы настроек для последующего использования и быстро находите их в дальнейшем (вкладка Сохраненные ).
- Создавайте документы с использованием Пустых наборов настроек документов для самых разных категорий форм-факторов устройств. Перед открытием наборов можно изменить их настройки.
В диалоговом окне Новый документ выберите вкладку нужной категории: Фото , Печать , Графика и иллюстрации , Интернет , Мобильные телефоны и Фильмы и видео .
Выберите набор настроек.
Также можно изменить настройки для выбранного набора на панели Сведения о наборе настроек справа. Подробные сведения см. в разделе Изменение наборов настроек.
Изменение наборов настроек
Прежде чем открывать документ с использованием набора, можно изменить его настройки на панели справа.
Укажите имя файла для нового документа.
Укажите следующие параметры для выбранного набора настроек:
Ширина и Высота : укажите размер документа. Выберите единицу измерения во всплывающем меню.
Ориентация : укажите ориентацию страницы для документа: альбомная или книжная.
Монтажная область : выберите этот параметр, если нужно, чтобы в документе были монтажные области. Photoshop добавляет монтажную область в процессе создания документа.
Цветовой режим : укажите цветовой режим для документа. Если изменить цветовой режим, содержимое выбранного профиля нового документа, используемое по умолчанию, будет преобразовано в новый цвет.
Разрешение : укажите степень детализации растрового изображения, измеряемая в пикселях на дюйм или на сантиметр.
Содержимое фона : задайте цвет фона для документа.
Чтобы задать следующие дополнительные параметры, щелкните Дополнительные параметры.
Цветовой профиль : укажите цветовой профиль документа из широкого диапазона параметров.
Попиксельная пропорция : задайте соотношение ширины и высоты одного пикселя кадра.
Читайте также: