Максим Солдаткин в дизайне с 2007 года. Выпускник Британской высшей школы дизайна, Яндекса, курсов Бюро Горбунова. Проекты для Кока-колы, Яндекса, Альфа-банка. Посетил 40+ стран, полтора года жил в Азии.
Сейчас вы, наверное, думаете: «Что здесь могут мне предложить? В сети уже столько этих уроков, везде одно и то же!»
Что ж, на этой странице вас ждет как минимум два преимущества:
1. Множество видео-уроков собраны на одном ресурсе – их уже не надо искать.
2. Все видео – авторские, поэтому, скорее всего, вы не видели их на других ресурсах.
Следовательно, только что вы получили целую подборку свежего и полезного материала по
теме: «Уроки веб-дизайна». И это далеко не все :)
Если вы ну совсем новичок в этом деле, то рекомендую попробовать обучение web дизайну с нуля.
Как выбрать курсы веб-дизайна и пройти обучение
Пройти обучение на веб-дизайнера с нуля можно и самостоятельно в сети. Это не так эффективно, как прийти на видеокурс по дизайну сайтов и познавать веб дизайн под руководством опытного наставника. И все же, при должном старании вы можете освоить профессиональный веб дизайн самостоятельно.
Одним из важнейших критериев для этого является правильная подача материала. Думаю, многие из вас видели сайты, где видеоуроки по веб дизайну даются хаотично, без надлежащей системы. Каждое видео по-отдельности закрывает как-то вопрос, но в целом они
не дают общей картины. В итоге вы осваиваете отдельные приемы, но не можете эффективно применить их на практике.
Обычные бесплатные видео курсы по веб дизайну:
Могут быть собраны из случайных видео разных авторов, из-за чего не имеют общей
системы;
Часто в подборках попадаются морально устаревшие видео;
Много теории без применения ее на практике;
Много специфических приемов без целостной картины – новичкам сложно вникнуть.
Онлайн школа веб дизайна Максима Солдаткина
Видео уроки web дизайна построены так, чтобы можно было обучаться с нуля – от простого к сложному. Просто посмотрите наши видео уроки по обучению веб дизайну с нуля;
Максимально концентрируемся на ключевых аспектах и программах, учимся быстро и эффективно;
Только авторские видео – актуальная информация, ничего лишнего;
Автор курса – практикующий веб дизайнер с 10 летним стажем и опытом работы с серьезными компаниями: Lipton, Coca-Cola, Альфа-Банк, Яндекс и пр.
Как видите, у собранных здесь видео много преимуществ. Сейчас я не буду рекламировать свои платные курсы в онлайн школе веб-дизайна – лучше вы сами посмотрите размещенные на этой странице материалы (совершенно бесплатно) и примете решение.
Если захотите обучаться со мной на платной основе (выполняя задания и получая детальную
обратную связь), знайте – я всегда рад научить вас всему, что знаю сам.
А пока продолжаем.
Уроки web дизайна – видео для дизайнеров с опытом
Некоторые видео на этой странице предназначены для опытных дизайнеров. Вы легко отличите их по темам и заголовкам. Специалистам, уже некоторое время работающим в сфере веб дизайна, будет полезно посмотреть уроки web дизайна
Как зарабатывать на фрилансе больше, чем в офисе, и где искать денежных клиентов;
В каких случаях умение работать в графических редакторах может вам помешать;
Как вырасти из обычного дизайнера в арт-директора;
Как презентовать себя заказчикам;
…и многое другое.
Уроки веб-дизайнера от школа веб-дизайна Максима Солдаткина – для тех, кто
превращает мечты в реальность
А теперь я хочу поговорить с вами лично. Не как дизайнер с дизайнером, а просто как двое людей, у которых есть свои мечты.
Знаете, когда я был начинающим дизайнером из Ярославля, я хотел путешествовать. Ездить по континентам, видеть другие страны, познавать мир во всем его многообразии. Профессия дизайнера помогла сделать эту мечту реальностью. Когда я вышел на новый уровень, у меня стало достаточно денег для путешествий.
Более того, я мог работать удаленно, из любой точки мира, в любое удобное для меня время. Сейчас я живу так, как всегда хотел. Каждый свой день рождения отмечаю в новой стране, постоянно перемещаюсь и наслаждаюсь потоком впечатлений. Не так давно я полтора года жил в Азии, не возвращаясь на Родину – чтобы прочувствовать местный колорит, а заодно
понять, могу ли я действительно работать удаленно. Оказалось, что могу. Более того, это было легко и комфортно.
К чему я все это говорю?
Путь веб дизайнера – это ваша личная свобода распоряжаться собой, своим временем, энергией, талантом. Это один из гарантированных способов построить свою жизнь так, как вы всегда хотели.
Поэтому я всегда рад, когда люди приходят ко мне в школу веб-дизайна осваивать профессию веб дизайнера.
Если вы пришли за этим, я сделаю все, чтобы вы уже через 30-60 дней смогли выйти на заработок от 60 000 руб в месяц.
Это более чем реально.
Посмотрите мой бесплатный мастер-класс о профессии веб-дизайнера.
Как выравнивать текст в блоках и сами блоки, если сайт полностью резиновый? Не получится сделать так, чтобы все элементы всегда были выравнены относительно друг друга. Что-то рассчитано на растяжение, что-то фиксировано. Я расскажу и покажу, что такое адаптивный дизайн. Также вы можете записаться на мой видео-курс по веб-дизайну.
Во-первых, давайте для начала разберемся для чего вообще нужно ТЗ на дизайн сайта.
Стоит ли для работы в веб-дизайне изучать html/css и заниматься версткой?
У меня есть для вас два примера.
Эти две картины (рис.1) нарисованы только карандашом, они черно-белые, выполнены в определенной стилистике. При их рисовании использовался один лишь инструмент – карандаш. И они обе прекрасны. То есть пользуясь только одним инструментом можно делать удивительные вещи.
Разработка сайта — это командная, многоэтапная работа. Однако, часто дизайнер не выполняет обязательные шаги по оптимизации макета сайта для верстки (рис.1). Это заставляет верстальщика делать двойную работу, затрачивать большее количество времени, неэффективно его тратить и тихо вас ненавидеть в результате.
Стоит ли его убеждать и как вообще с такими заказчиками быть.
Во-первых дизайн не меряется количеством вариантов, он меряется удовлетворенностью клиента и итоговым результатом.
Читать далее Как делать только 1 вариант дизайна. Почему клиент хочет несколько вариантов?
Перед тем как рассказать, что такое флэт стилистика, стоит вспомнить, что такое скевоморфизм.
Скевоморфизм – это использование в дизайне внешнего вида предметов из физического мира. Подобные сходства позволяют людям быстрее приспосабливаться к новой для них технологии. То есть, когда компьютеры только появлялись, это было для людей очень ново. Нужно было как-то пояснить как это работает. На примере (рис.1) калькулятор изображен в виде реального калькулятора.
Будь это забавные обновления состояния, плавные движения значков или сложные переходы, анимация окружает нас повсюду. Когда-то она была эстетической роскошью, но сейчас ее широкое применение в веб-дизайне и мобильных приложениях повлекло за собой появление целых веб-сайтов, посвященных различным шаблонам анимации.
Помимо того, что анимация может иметь сильный визуальный посыл, она также делает работу в приложении интуитивно понятной и запоминающейся. Анимация способна сделать приложение более подвижным и отзывчивым, обеспечивая все действия пользователя обратной связью. Поэтому все чаще создание правильной анимации входит в обязанности дизайнера.
Как правило, для создания элементарной движущейся картинки дизайнеру приходится с нуля изучать сложные инструменты для анимации. В последние годы, такие программы соперничают за внимание пользователей. К ним можно отнести Framer, Origami, Pixate и не стоит забывать про классический Adobe After Effects.
Однако, я считаю, что они слишком сложные и громоздкие. Мне, как дизайнеру интерфейсов, нужен быстрый, легкий в освоении и понятный инструмент для анимирования своих работ. Наша команда работает над разными проектами и мне необходимо быстро создавать анимацию. Потрясающим бонусом была бы возможность тесной интеграции программы с другими продуктами, которые я использую в своей работе (в основном, это Sketch и Photoshop).
В поисках инструмента, который бы соответствовал моим требованиям, я наткнулся на программу,давно пылящуюся у меня на компьютере — Apple Keynote.
Большинство пользователей знают Apple Keynote, как аналог PowerPoint для операционной системы Mac OS X — программы для создания презентаций. Это правда, но мало кто знает, что с помощью Keynote можно создавать качественную анимацию. Кстати, многие сотрудники компаний Google и Apple в ежедневной работе используют Keynote для создания интерфейсов, анимаций и различных прототипов.
В прошлом году Эндрю Хаскин, проектировщик взаимодействий в компании Frog, показал всем насколько мощным может быть Keynote, полностью воссоздав в нем материальный дизайн от Google.
Keynote очень легок в освоении, потому что многие люди часто используют то или иное приложение для создания презентаций. Если вы работали в PowerPoint, то Keynote покажется вам знакомым и вы немедленно сможете приступить к созданию слайдов. В Keynote нет кода, сложной временной шкалы с ключевыми кадрами и ненужных для дизайнера функций. Львиная доля всей работы с анимацией выполняется с помощью эффекта перехода Magic Move. Для его применения вам всего лишь нужны первый и последний слайды, а все, что находится между ними, настраивается с помощью дополнительных опций (масштаб, положение, поворот и т.д.). О всех просветах Keynote позаботится сам, создав бесшовные переходы от одного слайда к другому.
Magic Move сохранит вам тонну времени, а создание сложных анимаций в Keynote занимает считанные секунды.
Чтобы продемонстрировать вам, как можно использовать Keynote, я создал простой прототип модели взаимодействия, популяризированной благодаря Tinder: анимацию свайпа влево и вправо. Загрузить исходники проекта (ссылка).
Основная задача заключается в том, чтобы создать начальный и конечный кадры анимации. О переходах между ними позаботится Keynote с помощью функции Magic Move.
Создаем пустую презентацию. По умолчанию, Keynote создает слайд размером 1024х768 пикселей. Давайте изменим размер под iPhone.
Переходим на вкладку Document в верхней правой части программы. В разделе Slide Size переходим в Custom Slide Size и вводим размер 350 (ширина) х 667 (высота) пикселей.
Теперь импортируем изображения. Просто перетаскиваем файлы из папки в окно программы Keynote.
Добавив картинки, визуально размещаем их на рабочем пространстве. При перемещении активируются вспомогательные линии, которые помогут вам аккуратно разместить все элементы дизайна.
В соответствии с тем, в каком порядке был импортирован каждый элемент, к привязывается определенный z-индекс. В программе нет панели слоев. В случае, если вам нужно изменить порядок стеков, вам нужно всего лишь выделить элемент, кликнуть по нему правой кнопкой мыши (Cmd + клик), чтобы открыть меню, и выбрать Bring to Front.
Если вам необходимо разместить элементы точно пиксель к пикселю, переходим Format — Align и вводим нужное цифровое значение.
Следующий экран будет последним кадром анимации. Поворачиваем верхнее изображение и переносим его за пределы экрана — это и будет конечный кадр анимации.
Для начала вы должны дублировать первый слайд, с которым мы работаем. На правой панели кликаем по изображению и выбираем Duplicate.
Давайте начнем с поворота верхней картинки. Для этого зажимаем клавишу Cmd, кликаем по узлу и поворачиваем, двигая курсор-стрелку в нужную сторону.
Размещаем изображение за пределами экрана.
Закончив настраивать первый и последний кадры анимации, начнем анимировать их.
Выделяем первый слайд и переходим на вкладку Animate в левой части экрана. В разделе Transitions находим Add an Effect и в выпадающем списке выбираем Magic Move.
Magic Move — это эффект перехода, который перемещает расположение объекта с одного слайда на другой. Таким образом, с помощью перемещения, затухания и масштабирования аккуратно заполняются пустые промежутки между слайдами.
Magic Move имеет только две настройки — продолжительность и ускорение, которые действительно помогают сделать анимацию качественной насколько это возможно.
Настройка продолжительности говорит сама за себя — она отвечает за время, а подходящее значение меняется от случая к случаю. Золотая середина для анимации интерфейса, как правило, между 0.7 и 1.5 секундами.
Настройка ускорения имеет четыре параметра:
“none”: Стабильная скорость на протяжении всей анимации
“ease out”: Начало медленное, к концу ускоряется
“ease out”: Начало быстрое, к концу замедляется
“ease out and ease in”: Начинается медленно, затем ускоряется и далее снова замедляется
В данном примере я использую 0.90 секунд для продолжительности и “ease out and ease in” для ускорения.
Ниже находится готовая анимация с несколькими дополнительными эффектами. По ссылке вы можете скачать Keynote-файл (ссылка).
Конечно, это очень простой пример. Я всего лишь показал каплю из того, что можно сделать с помощью Keynote. Magic Move — это самая простая техника. Для более детальной проработки вы можете использовать Сборку (Build In) и Разборку (Build Out).
Сборка отвечает за то, как объект выглядит в первый раз, а Разборка отвечает за этап, когда анимация исчезает с экрана. Эти два типа анимации работают на основе объекта, в отличии от Magic Move, который работает на основе слайдов. Другими словами, каждый элемент может иметь свою собственную анимацию.
Например, если вы хотите анимировать масштабирование и легкий отскок, то воспользуйтесь встроенным эффектом “Pop”. Если вы хотите, чтобы объект плавно исчезал, то воспользуйтесь встроенным эффектом “Dissolve”.
Чтобы применить эффекты сборки или разборки, выделите на экране любой объект и перейдите на вкладку Animate. Там должны появиться три раздела: Build In, Actions и Build Out.
Анимация сборки имеет несколько опций. Большую часть времени я использую один и тот же набор эффектов:
Сложные анимации могут иметь множество эффектов сборки и разборки, а время их появления имеет очень большое значение. Откройте меню Build Order в нижней части вкладки Animate и попробуйте настроить время.
Keynote хорошо интегрируется во множество дизайнерских сред работы. Импортировать из Photoshop, Sketch или Illustrator так же легко, как и копировать/вставить что-то в Keynote. Я часто создаю объекты в Sketch, а затем добавляю их в Keynote, чтобы быстро анимировать.
Несколько советов. Копируйте/вставляйте слой за слоем, иначе Keynote их объединит, а зачастую это крайне нежелательно, особенно, если вы анимируете отдельные элементы.
Также при копировании/вставке текста его параметры не сохраняются и вы больше не сможете его редактировать. Поэтому, работая с текстом, убедитесь, что внесли все необходимые изменения или у вас есть возможность быстро воссоздать его с нуля.
Также вы можете создать прототип и добавить его в свое устройство, используя приложение Keynote для iOS. Ниже я разместил ролик с примером дизайна приложения, анимированного в Kenyote.
Предоставляя прототипы клиентам и заинтересованным лицам, вы можете экспортировать их как HTML, который можно открыть в браузере. Но учтите, что такой файл не годится в качестве финального варианта, для этого вам придется воссоздать прототип заново.
Неважно кто вы — дизайнер, менеджер по продукту или разработчик — Keynote отличный инструмент для быстрого аккумулирования всех идей. Скорость работы, легкость в освоении и качество финального результата сделают Keynote незаменимым инструментом в вашем арсенале.
Суммируем полученные знания. Magic Move — самый простой и быстрый способ анимации в Keynote; он используется между начальным и конечным слайдами. Build In, Actions и Build Out используются для отдельных объектов слайда; они отвечают за то, как объект появляется впервые и как исчезает за пределами экрана.
Имея достаточно опыта, вы сможете создать любую анимацию в Keynote. Многие примеры показывают, насколько продуктивно использовать Keynote для создания качественных прототипов.
Keynote поставляется бесплатно вместе с Mac OS X Yosemite и выше. Попробуйте его и удачного анимирования!
Оригинал: http://www.smashingmagazine.com/2015/08/animating-in-keynote/
Если вы хотите освоить Adobe Photoshop, то я рекомендую вам не тратить время на самостоятельно изучение, а найти хорошие курсы Фотошопа.
Вообще, стоит сказать, что изучение Фотошопа с нуля может занять у вас несколько месяцев, а может быть и лет, если вы не знаете одного простого секрета. А секрет в том, что в Фотошопе есть определенный набор функций, изучив которые вы уже сможете сделать свой первый сайт, даже абсолютно с нуля. И сегодня я о них расскажу и покажу, как сделать дизайн сайта в Фотошопе пошагово. На самом-то деле, секрет в том, что сайт состоит из фигур, текста и картинок. Дальше вы делаете с этими объектами какие-то манипуляции. В принципе, все базовые вещи необходимые для быстрого старта работы в Фотошопе с нуля, которые мы сегодня и обсудим.
Во-первых, поговорим про настройку фотошопа для веб-дизайна, про простые фигуры, текст, картинки, простые манипуляции с объектами, про разметку, про экспорт, про горячие клавиши и еще несколько фишек (рис.1). Также вы можете записаться на мой видео-курс по веб-дизайну
Рис.1 Быстрый старт в Фотошоп
Поехали!
Для начала, это настройка рабочей области. Прежде всего, стоит зайти во вкладку “Window” в верхней панели и отключить все лишнее и включить все нужное. Во-первых — это “Character” — символы, цвета, слои, “Options” — опции и “Tools”- инструменты. Просто поставьте эти галочки, дальше мы чуть подробнее про каждый инструмент поговорим. Просто бывает частая ошибка — очень много всего включено, на рабочей области бардак и совет такой — отключите все лишнее, включите вот только это, действительно необходимые инструменты (рис.2).
Рис.2 Настройка рабочей области
В фотошопе при создании дизайна сайта мы создаем макет (рис.3), где горячая клавиша ⌘N (Command N), вот таким образом я буду обозначать горячую клавишу в презентации — ⌘N на Mac-е, если вы пользуетесь Windows — то это CTRL+N (Control N). То есть вот этот вот “цветочек”- это CTRL на Windows. Стоит установить единицу измерения пиксели, разрешение — 72 пикселя на дюйм, режим цвета (цветовая палитра) — RGB 8 bit.
Рис.3 Настройка макета
Обязательно посмотрите мой видеоуроки, где я подробно рассказываю о настройках Фотошоп.
Фигуры. Горячая клавиша “U”. Фигуры — это прямоугольник, прямоугольник с округленными углами, эллипс, многоугольник, прямая и фигура произвольной формы (рис.4).
Рис.4 Фигуры
Этот инструмент часто применяется в photoshop при создании дизайна сайта, и находится он на панели инструментов, да, вот он выделен, горячая клавиша “U”. С формами, с фигурами можно производить трансформации, мы сейчас это рассмотрим на примере фигур, то же самое можно делать и с картинками. Горячая клавиша ⌘Т — свободная трансформация (рис.5), т.е. мы двигаем объект, он у нас свободно изменяет свои размеры. Если мы нажимаем тоже ⌘Т и берем за краешек и двигаем с SHIFT-ом (вот такой вот стрелочкой я буду обозначать нажатую клавишу SHIFT), мы видим, что размер, точнее пропорция объекта сохраняется.
Рис.5 Трансформация
У нас был квадрат, он остается квадратом. Прямоугольник с округленными углами (рис.6,7) так ресайтить нельзя, нельзя так трансформировать, потому что радиусы округления, мы видим, что при трансформации они нарушаются.
Рис.6 Прямоугольник с округленными углами (неправильно)
Рис.7 Прямоугольник с округленными углами (правильно)
При дизайне сайта в фотошопе прямоугольник с округленными углами правильно трансформировать по точкам. Это горячая клавиша “А”. Мы выделяем точки и дальше уже начинаем их двигать стрелочками SHIFT-ом. В общем, стоит запомнить, что прямоугольник с округленными углами нельзя просто так взять и трансформировать, его нужно трансформировать по точкам.
Выделение, перемещение. Вообще, для выделения объекта — горячая клавиша “V” для выделения и перемещения она называется move to и есть клавиша “А” для точечного перемещения (рис.8). В предыдущем примере мы видели, когда я выделял точки в прямоугольнике с округленными углами, вот я как раз нажимал эту горячую клавишу “А”, выделял точки и с ним уже дальше работал.
Рис.8 Выделение, перемещение
Копирование. Вот этот значок “⌥” — это на Mac-е “option” , если вы работаете на Windows, то это клавиша Alt (рис.9).
Рис.9 Копирование
Там нажимаете Alt и начинаете перетаскивать объект. Видим, как курсор изменяется, становится два курсорчика, сейчас будет видно, анимация пройдет… вот, я наживаю Alt, начинаю двигать и мы видим, что курсор меняется, если курсор поменялся, значит, объект будет копироваться. Для того, чтобы понять, как правильно проводится создание сайта в Фотошоп, нужно понять все эти фигуры.
Прозрачность. Клавишами от 1 до 0 мы можем изменять прозрачность объекта, “opacity” , так называемая. Вот я сейчас просто нажимаю сейчас будет 1 — это 10, 2 — 20, 30 и так далее и так до 100, т.е. 0 — это 100% прозрачности (рис.10).
Рис.10 Прозрачность
Текст. Работа с текстом — горячая клавиша “Т”. Вот так в панели инструментов выглядит сам инструмент работы с текстом — шрифт, размер там и так далее. Вообще есть два варианта работы с текстом в фотошопе при создании дизайна сайта — текстовой блок и текстовая строка. Текстовой блок — это когда мы задаем размер этого блока и текст автоматически в этом блоке переносится, перемещается, заполняет все это пространство. В строку, в бесконечно длинную строку придется вот эти переносы на следующую строку делать вручную, т.е. ставить курсор, нажимать Enter и переносить. В тексте можем просто потянуть и изменить размер и текст сам подстроится под размер блока. Вообще удобнее для параграфов, т.е. для набора использовать текстовой блок. Текстовую строку удобно использовать для (давайте еще раз ее включу) каких-то очень коротких слов — либо одно слово, либо два слова, либо три слова и так далее, т.е. для каких-то коротких вещей. Та же самая горячая клавиша “Т” (рис.11,12).
Рис.11 Текст
Рис.12 Текст
При создании сайтов в Photoshop большую роль имеет выравнивание. Если у вас есть несколько объектов хаотичных, мы можем их выделить и выровнять. Сейчас я еще раз покажу, как это делается. Т.е. я выделяю все объекты, нажимаю “выровнять по верхнему краю” и равномерно распределить, беря за размер, за точку отсчета центр изображения. Т.е. по верхнему краю, посередине, по нижнему, то же самое по вертикали и так далее — это чтобы равномерно распределить объекты по, ну то есть равномерно распределить от первого к последнему (рис.13).
Рис.13 Выравнивание
Дальше группы слоев еще есть (рис.14). “ ⌘G” — сгруппировать, “ ⌘ SHIFT G” — разгруппировать.
Рис.14 Группа слоев
Давайте продолжим создание сайта в фотошопе с нуля. Есть несколько эллипсов, несколько объектов, я их выделяю и группирую, они у меня находятся в папочке все. Можно группы в группы заносить, можно создавать папку из нескольких папок и так далее. Горячая клавиша “⌘ G”.
Цвет. Палитра с цветами, стоит установить цветовые координаты Hue, Saturation, Brightness , т.е. тон, насыщенность и яркость в палитре, в инструменте вот эта маленькая кнопочка, маленькая иконочка, нажмите на нее и установите HSB Sliders (рис.15).
Рис.15 Цвет
Вот эти цветовые координаты HSB, просто удобнее с ними обращаться, т.е. в чем здесь прелесть? Вы сначала устанавливаете тон, сначала определяете цвет, который вам нужен, а потом этот цвет подстраиваете по насыщенности и по яркости. С остальными работать гораздо сложнее, потому что там все-таки перемещение цветов идет. Попереключайте, посмотрите, как они работают. В общем, рекомендую установить цветовые координаты — тон, насыщенность и яркость.
Картинки и смарт-объекты. Что важно сказать про это — смарт-объект не теряет в качестве при изменении размера, растровая картинка превращается в пятно (рис.16,17).
Рис.16 Картинки и смарт-объекты
Рис.17 Картинки и смарт-объекты
Давайте еще раз закрепим важные пункты о дизайне сайта в Фотошопе из прошедшей части урока. Я просто изменяю размер, смарт-объект, растровая картинка, увеличиваю, видим цветовое пятно. Смарт-объекты не теряют в качестве после уменьшения размера и последующего увеличения, т.е. можно спокойно их трансформировать и ресайдить. Картинки в дизайне сайта автоматически импортируются в Фотошоп как смарт-объекты, т.е. если вы добавляете картинку в Фотошоп, она превращается в смарт-объект. Особенность в том, что смарт-объекты нельзя редактировать. Имею ввиду, кисточкой что-то подтереть, подретушировать смарт-объекты не получится. Нужно либо заходить внутрь смарт-объекта, т.е. двойным кликом, либо просто, самый простой варинт — это кликнуть “растризовать”, кликнуть по изображению правой кнопкой мыши в слоях “Rastrize” и “Convert to smart oject”. Видим, когда “Растр” — это у нас просто изображение, когда “Smart object”, здесь появляется такая маленькая икононочка, надеюсь, вам видно. Нет иконочки, смарт-объект — есть иконочка.
Маски. Alt click между слоями, т.е. мы наживаем Alt и кликаем между слоями(рис.18).
Рис.18 Маски
Рис.19 Маски
И просто поймите сейчас, как это работает, на следующем слайде я покажу в чем суть. Т.е. у нас есть два слоя, есть эллипс, есть картинка. Мы наводим курсор, нажимаем Alt, появляется вот такая вот стрелочка и просто кликаем. Вот как это работает.
Давайте далее рассмотрим дизайн сайта в photoshop по шагам. Опять же эллипс, картинка, давайте я на паузу поставлю, когда мы превращаем эллипс в маску, у нас верхняя картинка заполняет форму этого эллипса. Соответственно, когда вы хотите сделать что-то похожее, внизу у вас должен быть, как бы, родительский объект, тот объект, формы которого вы хотите заимствовать, а сверху уже накладываете картинку, которая будет его перекрывать. Это очень распространено в фотографиях, т.е. как сделать фотографию в круге? Очень просто! Нужно сделать несколько кружочков, наложить на них фотографии и включить маску.
Направляющие. Горячая клавиша “⌘R”, чтобы скрыть и показать линейки (рис.20).
Рис.20 Направляющие
При создании сайта в фотошопе используйте линейку — это черные штучки с цифрами, это они и есть. И горячая клавиша “ ⌘;” , чтобы скрыть и показать направляющие. Т.е. давайте на скриншоте на примере, я открываю линейки и просто перетаскиваю из углов направляющие, опять же направляющие нужны, чтобы ваш макет выглядел ровно, чтобы вы могли по этим направляющим ваши текстовые блоки, картинки и фигуры уметь выровнять. И стоит еще здесь проверить, чтобы единица измерения была “пиксели”. Нужно просто нажать правой кнопкой мыши на линейке и установить пиксели(рис.21). У нас везде все в пикселях должно быть.
Рис.21 Направляющие
Для экспорта мы заходим — “Файл”, “save for web”(сохранить для веб) и сохраняйте ваш макет, если вы делаете сайты, проще всего, самый простой формат, который не требует настроек дополнительных — это “PNG 24” (рис.22).
Рис.22 Экспорт файла
В чем его прелесть? Т.е. в чем минус GPEG-а , все знаем, что картинки принято хранить в GPEG-е. GPEG — ломает шрифты, т.е. если у вас макет сайта, где много шрифтов, много текста, в GPEG-е шрифты будут размываться, шрифты будут, так называемыми артефактами. Если мы сохраняем в PNG 24, то картинка выглядит гораздо чище. Она может занимать чуть больше места, но на первых порах, на первых этапах , чтобы не перегрузить себя какими-то настройками , ставьте PNG 24 и смело сохраняйте ваши макеты в этом формате.
И я напомню про горячие клавиши (рис.23).
Горячие клавиши в photoshop значительно ускорят работу при создании дизайна сайта.
“U” — прямоугольник, эллипс, фигуры.
“Т” — это текст.
“В” — выделение, перемещение объекта.
Клавиша “А” — для точечного выделения, помним про прямоугольник с округленными углами.
Alt с перемещением, т.е. мы копируем объект, зажимаем Alt и начинаем его двигать, он начинает копироваться.
Alt clic между слоями — мы превращаем слои в маску, нижний слой становится маской, верхний слой на него накладывается.
“⌘Т” — трансформация, изменение размера.
“ ⌘G”, “ ⌘ SHIFT G” — группировка, разгруппировка в папки.
“ ⌘R” — скрыть и показать линейки.
“ ⌘;” — скрыть и показать направляющие.
И, думаю, всем известная клавиша “ ⌘Z” — отменить предыдущее действие и если мы зажимаем “Option” или “Alt” на Windows , ALT+Z — мы можем шагать назад по нашей истории изменений, а если мы зажимаем ⌘SHIFT и нажимаем Z, то мы делаем шаг вперед. Т.е. с ALT-ом мы двигаемся назад, с SHIFT-ом мы можем сделать вперед, потом снова назад, вперед. Нажимаем ⌘Z, откатываемся на предыдущее изменение.
Итак, мы рассмотрели дизайн сайта в фотошопе пошагово. И давайте на примере реального макета посмотрим вместе, как это работает.
Существует вопрос о : ”Как понимать достаточно ли широка полоса текста в макете и хватит ли этой величины текста чтобы он был читаем? Как вообще обращаться с междустрочным расстоянием, шрифтами, какие размеры брать и т.д.?”. Тут важна типографика и микротипографика.
Во-первых, существуют рекомендуемые значения для текстового блока.
Идеальный текстовой блок – это:
Существует соотношение:
Вообще 1.6 и 0.6 — это цифры, которые идут из пропорции золотого сечения. Это относится не только к шрифтам, но и к различным размерам блоков и т.д.В данном случае мы говорим про шрифты. Как подобрать размер шрифта. Выберите размер для заголовка, допустим он будет 20, поделите на 1.6 (или умножьте на 0.6), получите размер шрифта для основного текста, также и наоборот.
Рис.1. Пример
Идеальный интерлиньяж для основного текста.
Опять же существует несколько цифр, которые можно запомнить и использовать в работе (рис.2).
Рис.2 Идеальный интерлиньяж для основного текста
И всякий раз, когда вы проектируете дизайн. На этапе уже проработки деталей, когда макет уже готов, очень полезно бывает проверить, посчитать по цифрам, все ли там сходится.
Общий принцип такой: «Цифры – не закон, а рекомендация. В итоге, оптика побеждает математику.»
То есть если вы построили макет, подобрали шрифты, но взглядом (оптикой) вам кажется что что-то не то , чего-то не хватает, тогда лучше поверить своему взгляду и пододвинуть так , как вы считаете нужным. Опять же этот взгляд приходит с опытом, изначально проще ориентироваться на математику и немножко подправлять.
Вообще вопрос в том, какой размер экрана для адаптивной верстки стоит учитывать при создании интерфейса мобильного приложения.
Существует огромное количество размеров экранов мобильных телефонов и планшетов (рис.1). У них разные диагонали, разное PPI (плотность пикселей), это все несет ряд проблем дизайнерам и разработчикам.
Рис.1 Размеры экранов и PPI
Но есть пропорции у всех этих разрешений. И как раз от пропорций мы можем отталкиваться. И в первую очередь стоит определить для себя какое соотношение сторон будет у вашего приложения (рис.2).
Рис.2 Пропорции экрана
Строго говоря, вам нужно взять размеры для адаптивного дизайна по следующем списку:
Если мы говорим про iOS, то самое большое разрешение сейчас у iPhone 8 plus — 1920х1080, самое маленькое iPhone 4. И вы обязательно должны это в дизайне учитывать. Обязательно нарисовать четвертый iPhone посмотреть, какой у него размер, и прикинуть, как будет выглядеть дизайн на уменьшенном размере экрана (рис.3).
Рис.3 Размеры экрана iPhone
Если мы говорим про Андроид, в том числе про Samsung, то сейчас в топе серия Galaxy, у Ace размер экрана 480х320 и тоже будет интересно посмотреть, как будет смотреться дизайн в маленьком разрешении.
Рис.4 Размеры экрана Samsung
Тестировать картинки удобно через Дропбокс (рис.5)
Рис.5 Дропбокс
То есть у нас есть рабочая панель, папка с проектами (картинками) и она очень просто переносится вам в телефон по облаку (рис.6). Дальше мы кликаем в картинку и если она нарисована для нашего разрешения, то мы можем видеть в реальном времени как это все выглядит. Есть разумеется хитрые программы, которые позволяют это делать. На мой взгляд это самый простой и быстрый способ посмотреть как ваш дизайн выглядит на мобильных устройствах. Их можно перекинуть, можно очень быстро с ними работать. Вы только сохранили файл и он уже доступен в вашем айфоне. И это бесплатно. Разумеется это может быть не только Дропбокс, но и любой другой облачный сервис ( mail,yandex и т.д.).
Рис.6 Работа с Дропбокс ( dropbox.com)
И какое здесь правило, принцип?
Дизайн, которые вы делаете, должен на новых устройствах выглядеть идеально, на старых — работоспособно. Исходя из этого и вычисляйте размеры экранов для адаптивной верстки.
