ДИЗАЙН
Yuri OrlovЭто мощный урок про типографику и верстку! Досмотри его до конца и поймешь многие свои ошибки, которые могли бы сделать твой дизайн дешевым, можешь даже выписать эти правила в отдельный блокнот, чтобы они лучше тебе запомнились.
Я не хочу изучать этот модуль, я буду делегировать!
Даже если ты собираешься делегировать дизайн изучи этот модуль, потому что он не большой, и такой концентрации знаний по дизайну ты нигде не найдешь. Когда ты будешь понимать правила дизайна тебе в 10 раз будет легче делегировать работу по дизайну. А еще ты будешь понимать почему та или иная работа низкого качества.
10 МИНУТ
ПРАКТИКИ!
Потренируйся в этом Google Slides документе в верстке и типографике. Для меня все, что связано с версткой и выставлением элементов — это автоматизм, который не тратит времени и сил. Ты тоже можешь добиться этого буквально за пару недель практики. Поэтому начинай сейчас!
Инструкции
- Зайди по ссылке в Google Slides
- Скопируй себе презу Файл Создать копию Вся презентация
- Исправь все ошибки типографики и верстки, если не видишь ошибку, пересмотри видео
Google Slides ПрезентацияИсправь ошибки
де взять фотошоп
- Купить Photoshop на официальном сайте за $20/мес
- Использовать бесплатный онлайн-аналог photopea.com
- Скачать с торрента бесплатную версию, а когда начнешь хорошо зарабатывать купишь платную
Полезные ссылки
photopea.comОнлайн-аналог Photoshop
Официальный сайт PhotoshopPhotoshop за $20/мес
Люди любят людей! Людям интересно смотреть на людей в упаковке бизнесов, в фильмах, в рекламе, в Инстаграме. Без людей дизайн не интересен. Поэтому тебе нужно научиться разрабатывать дизайн, в котором большую роль играют люди.
Научись вырезать людей из фона
Если у тебя возникают проблемы с вырезанием человека из фона в Photoshop, ты можешь поискать другие способы вырезания через другие программы или через другие инструменты Photoshop. В нем можно найти десяток работающих способов вырезать человека, я лишь показываю тебе самые простые из них.
Полезные ссылки
vyrezat-cheloveka.psdФайл с картинками для задания
Научись сохранять фотографии для сайтов нужного качества. Не слишком маленькие и не слишком большие. Маленькие изображения — брак. Большие — долго грузятся.
ШИРИНА: 4000PX
Когда человек в метро или без скоростного интернета на улице, сайты с большими изображениями могут грузится слишком долго (более 3 секунд). Сайты без картинок скучные, человек может составить впечатление о сайте и уйти с него до того, как дождется загрузки изображений.
ШИРИНА: 270PX
Когда из картинки «торчат пиксели» складывается эффект дешевого продукта. Упаковка бизнеса становится «колхозного» уровня. Такие картинки свойственны дешевым бизнесам, у которых нет денег на дизайнера.
ШИРИНА: 750PX
Советую .png изображения людей на первом экране делать от 700px до 1000px, чтобы было не сильно размыто и не сильно много весило изображение.
Полезные ссылки
TinyPngСжатие без потерь для .jpg и .png файлов
Картинки в бизнесе это все! Поэтому этот урок получился не маленьким, пожалуйста запомни все правила из этого видео и у тебя не будет шанса создать дешево выглядящую упаковку бизнеса.
Правила картинок
- Цвет текста — цвет текста может быть либо черным либо белым, в зависимости от тона фона, текст должен быть контрастным
- Единство — все элементы композиции, должны быть одного цвета, либо черного либо белого
- Конраст на картинке — чаще всего на картинках используется белый цвет текста, потому что в основном картинки темные, светлых картинок мало
- Важные элементы всегда справа — оставляй пустое пространство на картинках слева для текста, а важные элементы должны быть справа
- Добавляй людей в композицию — люди делают любую работу интересной и дорогой
- Не растягивай изображения — НЕЕЕЕЕЕЕЕЕТ!!!!!!!!
- Заполни композиционный квадрат — старайся правильно заполнять правое пространство для картинки
- Не раскрывай магию — не отрывай обрезанные картинки от "пола"
- Тщательно выбирай фон — не все картинки хорошо смотрятся с любым фоном
- Можешь играться с цветом кнопки — протестируй много вариантов и выбери самый органичный
- Продумывай «WOW-эффекты» — Анимации ты можешь создавать в Тильде или брать с giphy.com
- Визуал должен соответствовать офферу — если за первую секунду не понятно, о чем сайт это не сильная работа упаковщика, который зарабатывает от 100,000 рублей в месяц
- Не используй гифку больше 1МБ — средний размер быстро загружающегося сайта 400КБ - 1МБ. 2-4МБ — уже много
- Не плоди цвета — чем больше ярких цветов в обложке, логотипе и кнопках тем мусорнее работа, в идеале на сайте должно быть 3 цвета - белый, черный и акцентный, цвета на картинке не считаются, но если на ней также будет и акцентный цвет, тогда работа получает +100 к крутости
- Чем больше деталей на фоне, тем сильнее фильтр — большое количество деталей затрудняет чтение текста, ставь сильнее фильт, чтобы текст было легче читать
- Темный фильтр делает фотку не стильной — старайся затемнять зону под текстом градиентом, если фотка пестрая, сплошной темный фильтр делает фотку не стильной
- Кнопка может быть скругленной либо круглой — Все остальные стили кнопки тяжело сделать крутыми
В этом видео ты узнаешь дополнительных функциях Photoshop, которые я использую почти на каждом проекте.
- Кривые
- Заплатка
- Раздельное тонирование
- Размытие фона
Мой любимый способ создания логотипа: создать его из шрифта, либо скачать с Creative Market или ShutterStock. Важность логотипа сегодня не большая, поэтому не нужно тратить много дней на его создание, я создаю их за 30-60 мин.
Полезные ссылки
Simple Image ServiceКартинки по 40 руб за шт. с ShutterStock
Где брать картинки
Я специально не делюсь больши количеством ресурсов, где можно достать бесплатные картинки. 3 сайта этого достаточно, если на них нет нужной тебе картинки придется покупать с ShutterStock
Полезные ссылки
Simple Image ServiceКартинки по 40 руб за шт. с ShutterStock
Домашнее задание
Задача: Создай 5 первых экранов в Google Slides
- Обязательные требования:Тебе нужно сделать работу не отличимую от дизайнерской
- Если тебе до этого сложно давался дизайн, то сейчас тебе нужно превзойти все, что тебе приходилось создавать до этого
- Я или куратор должны сказать: «Вау! У тебя был до этого опыт работы графическим дизайнером?»
- Нужно соблюдать ВСЕ правила верстки текста и дизайна, о которых я рассказывал
- Делай в Google Slides, в Tilda дизайн делается дольше, здесь задача увидеть, как ты работаешь с текстом и картинками
- В работах должно быть:Логотип kozyon или свой (более рискованно)
- Осмысленный заголовок, подзаголовок
- Самостоятельно качественно вырезанный в Photoshop человек
- С 1-ой секунды должно быть понятно, что за ниша даже без чтения заголовка (показать через человека или через фон за человеком)
- Хотя бы на одном первом экране должен быть вау-эффект с гиф-анимацией — она должна быть осмысленной
Полезные ссылки
Шаблоны Google SlidesТемный и белый первый экран
Картинки с людьмиНайди среди них, кого можно вырезать
Люди Kozyon