Как сделать референсы для сайта
Все кричат, что для креативщика насмотренность — залог успеха. Чем больше крутых работ увидишь, тем круче будешь делать сам. Поэтому мы сохраняем красивые картинки в пинтересте и кидаем интересные проекты в закладки. Чтобы потом никогда не открыть.
Мы собрали семь не-пинтерест-сервисов, где удобно упорядочивать свои креативные референсы (визуальные и не только), а заодно смотреть чужие сохранёнки.
Это самый молодой конкурент пинтереста — Google запустил его в июне 2020 года. Разработчики хотели создать сервис, который сэкономит время на поиск нужного контента — и использовали алгоритмы машинного обучения.
Работает это так: после регистрации создаешь тематическую папку (здесь они называются keen), вводишь название и выбираешь подходящие поисковые запросы из списка, который предложит сервис.
Искусственный интеллект проанализирует ссылки, которые ты добавишь в подборку. Как только в сети появится что-то похожее на то, что тебе нравится, алгоритм выдаст это в рекомендациях. Чем больше ссылок сохранишь, тем точнее ИИ будет подбирать контент.
Подборки других пользователей открыты. Насматривай не хочу.
Savee
Savee — минималистичный сервис для поиска и хранения картинок.
После регистрации там открывается лента чужих сохранёнок. Внешний вид борда можно настроить под себя: ползунок Size отвечает за размер картинок, а Padding — за расстояние между ними. Так легко менять количество изображений на экране:
По аналогии с пинтерестовскими досками в Savee есть коллекции. Кликнув на изображение, сразу видишь, какие пользователи сохранили его себе. Их профили, подписки и коллекции тоже открыты. На этом все, ничего лишнего.
Designspiration
Designspiration — аналог пинтереста, заточенный под дизайнеров. Здесь тоже удобно искать картинки по темам, объединять их в подборки, публиковать свои работы и следить за профилями других людей. Но, по сравнению с пинтерестом, у Designspiration более прокачанный поисковик (есть даже поиск по цветовой гамме) и отборный контент (никаких банальных картинок — только реально крутой вижуал):
Базовые функции сервиса доступны бесплатно. Премиум-аккаунт стоит $5 в месяц и убирает всю рекламу.
А еще у Designspiration прикольная инста с примерами шрифтов и леттеринга, которые тоже могут стать референсами.
Are.na
В Are.na легко собирать и упорядочивать не только изображения, но и другие типы контента. Пользователи создают каналы (аналог досок в пинтересте), куда добавляют фото, видео, тексты, ссылки и скрины.
Так как рекомендаций в сервисе нет, все нужно искать вручную. Зато за личные данные можно не волноваться.
References.design
References.design — десктопный органайзер изображений для тех, кто не хочет захламлять свой список закладок в браузере. Кроме картинок из интернета, в библиотеку References.design легко добавлять файлы с компьютера. Так все онлайн- и офлайн-референсы будут в одном месте — и ничего не потеряется.
Сохранёнки удобно сортировать по папкам, можно добавлять ярлыки. Обученный искусственный интеллект автоматически определяет стили, цвета и формы загруженных изображений:
Еще одна полезная фича — кнопка Inspire Me!. Если выбрать несколько картинок и кликнуть на нее, программа использует их как референсы и найдет похожие.
У References.design есть бесплатный пробный период (15 дней). Если понравится — можно купить программу за $8 (примерно).
ColorsWall
ColorsWall — хранилище палитр. Здесь есть и готовые цветовые комбинации, и генератор палитр.
В каталоге ColorsWall 68+ тыс. палеток с HEX-кодами цветов. Например, есть палитра человеческой кожи, спектр оттенков захода солнца, палитра цветов Netflix и профилактики на ТВ.
Еще есть вкладка с 30 самыми популярными цветами за все время существования сервиса. Забавно, но все 30 — разные оттенки черного и белого.
В самом начале мы обещали не ограничиваться визуальными референсами. Держим слово. Следующий сервис, Soundsnap, — библиотека звуков.
Загружать свои звуки в Soundsnap нельзя, и профили других пользователей скрыты. Зато там собрано 280+ тыс. звуковых эффектов от профессиональных звукорежиссеров и саунд-дизайнеров — от симфонии Баха на рингтоне до звука закрывающейся дверцы платяного шкафа.
Звуковые дорожки разбиты по категориям, тегам и локациям. Прослушивание бесплатное, а вот скачивание — нет. Это плата за работу саунд-дизайнеров. Пакет на пять загрузок стоит $15, на 20 — $29. Еще один вариант — оформить годовую подписку за $199 и качать звуки без ограничений.
Стильное изображение в рекламе – 70% успеха в борьбе за пользователя. Нужно создать настоящую картину с авангардными линиями и сочными цветами, чтобы привлечь искушенного зрителя. Безусловно, в рекламе необходим комплексный подход: красивая картинка без текста не сможет сделать всю работу. Но изображение привлекает и мотивирует кликнуть на объявление.
Сегодня рассказываем, где живет муза наших дизайнеров. Покажем 5 сервисов, которыми пользуемся в работе, чтобы создать рекламу с высокой конверсией. Черпайте вдохновение вместе с нами и создавайте только красивые креативы.
Да хранит Господь всемогущий Pinterest за его подборки, доски и пины. Это бездонная впадина, на каждом сантиметре которой крутые идеи и сочные краски. Круто, что лента подстраивается под интересы пользователя. Если вы часто ищете референсы для интернет-проектов, то сервис будет ежедневно выдавать порцию похожих идей и подталкивать вас к чему-то действительно шедевральному.
Также на площадке есть добрые люди, которые создают доски с подходящей проекту тематикой. Например, здесь собрано 228 идей по SMM-дизайну от максима Кузнецова. Вдохновляйтесь и действуйте!
Dribbble
Behance
Нужны новые идеи? OMG! Они уже на Behance. Проект от компании Adobe, на котором собраны визуалы, созданные с помощью фирменного программного обеспечения. Знакомьтесь с мокапами и макетами, пробуйте идеи на своих творениях и получайте настоящие шедевры.
Приятный бонус сервиса – стримы от дизайнеров. Профессионалы показывают процесс работы над визуалом, пошагово рассказывая о своих действиях. Правда эфиры в основном на английском языке: вооружайтесь словарем и вперед к новым знаниям!
by Denis Gonchar
Придумали сюжет, но не можете подобрать текстуру? Тогда знакомьтесь с Lost and Taken. Здесь легко подобрать фон для любого фото, видео или анимации. Текстуры разделены по категориям – вы быстро разберетесь с минималистичным интерфейсом. Желаем удачи в поисках :)
Unsplash
А вот на Unsplash ни в чем себе не отказывайте – скачивайте и используйте. Перед вами бесплатный фотосток: нетривиальный и приятный. Вставляйте фотографии в макеты, преобразуйте или используйте в исходном виде. И помните: изображение с бесплатного фотостока всегда лучше, чем картинка из гугл поиска.
Бонус!
Хочется отдельно поговорить о шрифтах. Текст, одетый в Times New Roman, остался в 2000-х, но не все про это знают. Рассказываем: даже стандартный перечень в графическом редакторе предлагает варианты, которые могут изменит макет до неузнаваемости. Также в интернете существует изобилие бесплатных шрифтов.
Например, чтобы поздравить участников сообщества уральского каршеринга URAмобиль с Новым Годом, мы использовали шрифт Black Diamond. Текст выглядит написанным от руки, но мы с вами знаем, что это не так :)
Финал
Вместо заключения
Делимся работами, которые показали себя с хорошей стороны – привлекли лиды и повысили эффективность рекламных кампаний. Надеемся, что теперь и ваша реклама будет работать на полную мощность :)
3 секрета как использовать референс в веб-дизайне и не спалиться
Всем привет! Сегодня я решил затронуть очень интересную тему, актуальную не только для дизайнеров, а и для любой творческой профессии. Что слышали про референсы? Если вы художник, иллюстратор, или дизайнер, первые несколько лет работы — это первое что должно быть у вас под рукой.
Даже если вы супер крутой специалист, с многолетним стажем и блестящими востребованными проектами, это не стыдно пользоваться референсами, а вот почему.
Если бы общество плохо относилось к копированию, и наказывало всех, кого в этом уличили, некоторые проекты вовсе бы не существовали (Вконтакте), а остальные бы не развивались в силу отсутствия конкуренции. Если разработка или проект имеют успех, нужно внести свою уникальную лепту и внедрять.
Помимо этого, если ваши работы копируют – вы на правильном пути. Это самая высокая оценка работы создателей. Поверьте, если оригинальную идею скопировали, через пару десятков лет никто не вспомнит про его многочисленных последователей – вспомнят имя оригинала. Лучшая мотивация обойти конкурентов – стать копируемым.
Все хотят быть похожими, но немного разными. В дизайне проект, который намного отличается от установленных рамок и тенденций, рискует быть непонятым и обречен на провал. Поэтому, большинство дизайнерских работ схожи между собой, при этом имеют свои особенности.
Короче говоря, приведу на примере.
Один мой хороший знакомый решил сделать оригинальную обложку своего профиля в социальной сети. Задумка такая: впереди фотография, на заднем фоне безпилотник. Такая себе идея, но все же воплотить в жизнь прошлось мне.
Первое
Второе
Затем ищу фотографии по заданной тематике на стоках Дриббл и Шаттерсток.
Третье
Ищу подходящий референс стиля. На этом этапе форма уже готова. Осталось добавить отличительные элементы: блики, матовость, детали, тени. Кстати выигрышно смотрятся объекты, которые имеют не только матовую, но и одновременно глянцевую форму.
Моего опыта уже хватает, чтобы самостоятельно представить, как должен выглядеть нужный мне графический элемент. Слой с такими изображениями называю ref_detail. Тут собран один бред, но ничего, прорвемся.
Я исходил из того, что безпилотник должен иметь меньший визуальный вес, чем фотография профиля, поэтому выбрал лайн-арт с тенями цвета контура объекта.
Подводя итог хочу сказать, что получился своеобразный фарш из форм, стиля и определенных элементов. Я пропустил все это через свою особенную сетку в мясорубке, которая имеет отверстия согласно моих дизайнерских наработок. На выходе получаем неповторимое изображение.
Теперь вам никто не скажет что это с3,14зжено, ну а ели скажет бейте в бороду. Интересных вам проектов, вдохновения и успехов в творчестве!
Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!
ЧТО МОЖЕТ БЫТЬ РЕФЕРЕНСОМ?
-
Полное изображение персонажа
Начиная работу над иллюстрацией, мы имеем конкретную цель.
Даже если это просто вдохновение - вы прокачиваете собственные навыки и эти навыки конкретны, так как референс обуславливает выбор материала и возможности стилизации. К примеру, референс для акварели далеко не тоже самое, что референс для графических скетчей. Для акварели, вы, возможно выберете что-то более многоцветное, гармоничное по цветовым сочетаниям, с интересным освещением. Словом, то, что хорошо можно обыграть красками в сочетании с водой. Для графики имеет смысл выбрать даже черно-белый референс, что упрощает передачу объема. Но говоря сейчас об акварели и графике, я имею в виду именно фото.
Таким образом, копирование чужой художественной работы - это ваш опыт, тренировка, проба техники, но не ваше достояние.
Если вы собираетесь выложить эту копию в соцсетях, обязательно отметьте автора и укажите в тексте, что работа является копией и не несет под собой цели продать ее.
По части референсов для персонажей существует тонкая грань этики использования чужих фото. По сути, выкладывая свое фото в интернет, вы уже даете согласие, на то, что фото могут использовать в сторонних источниках. Но с другой стороны, правильней будет при публикации своей иллюстрации, указывать человека, которого вы рисовали. При использовании этой работы на стоках, сайт попросит вас указать согласие модели на публикацию вашей работы с ней (аналогично фото с человеком). И тем более, если ваша работа является коммерческой и вы рисуете популярную личность в рекламных целях без согласия на то человека, это является грубейшей ошибкой, нарушающей права человека.Также обратите внимание и на позитивную сторону вопроса - если вы рисуете медийную персону, которая активна с соцсетях, она может сделать репост вашей публикации с ссылкой на вас, что даст вам дополнительный прирост аудитории.
Референсами называют фотографии, иллюстрации, картинки, рисунки, к которым обращается дизайнер, начиная новый проект. Это вспомогательный рабочий материал, который использует дизайнер , чтобы начать и настроиться на нужный лад.
Для чего нужны референсы
Задачи, которые в процессе работы решает дизайнер, вряд ли можно назвать уникальными. На 100% уникальных задач в современном мире осталось немного. Например, дизайнеру надо на баннерах нарисовать осьминога для рекламной кампании магазина морепродуктов.
Нетрудно предположить, что кем-то подобная задача уже решалась и не раз. Осьминога изображали сотни дизайнеров для рекламных объявлений, для логотипов, для сайтов. Художники его рисовали для детских книжек, мультиков, комиксов. Фотографы его фотографировали с самых разных ракурсов.
Поэтому логично, что на старте нового проекта дизайнер обращается к работам своих предшественников. И совсем не для того, чтобы просто скопировать.
Где брать картинки?
Картинки можно брать в Google, Яндексе.
Можно воспользоваться фотостоками. Их очень много. Есть платные, есть бесплатные. Ниже приведены несколько бесплатных фотостоков.
Рисунки можно найти на этих ресурсах: Dribbble, Pinterest, Behance.
Какая конкретная польза от референсов
Дизайнеры изучают референсы:
- чтобы понять строение, составные части, функционал, форму объекта,
- чтобы вникнуть в детали объекта,
- чтобы найти выигрышные ракурсы,
- чтобы выбрать художественную технику,
- чтобы подобрать стилистические приёмы,
- чтобы определиться с цветовой палитрой,
- чтобы выбрать оптимальное сочетания цветов,
- чтобы выбрать угол позиционирования и определить эмоциональный настрой.
Как работают с референсами
Мудборд включает все визуальные составляющие проекта:
- фотографии, картинки, иллюстрации;
- цветовую палитру;
- набор шрифтов;
- разные текстуры материалов;
- заголовки, слоганы;
- логотип компании, кнопки, иконки.
Мудборд представляют в виде коллажа, который разъясняет концепцию проекта и передает стиль и настроение. Это своеобразный рассказ о проекте с помощью картинок и графических элементов.
Мудбордов обычно составляют несколько, чтобы у заказчика была возможность выбрать наиболее удачный вариант.
Мудборд очень удобный инструмент для эффективного взаимодействия заказчика и дизайнера. Для его составления дизайнеру не требуется много времени.
А заказчик получает лаконичную информацию в сжатом и концентрированном виде, которая позволяет ему быстро понять основную идею проекта, настроение, увидеть картинки, преобладающие цвета, шрифты, кнопки. И при необходимости внести корректировки.
Сервисы для создания мудбордов
Мудборды можно создавать в:
- Photoshop;
- Canva;
- Adobe Spark.
Можно воспользоваться специальными сервисами:
- Niice — простой инструмент для создания мудбордов.
- Realtime Board — можно создать платный и бесплатные аккаунты.
- Sampleboard — можно загружать свои изображения.
- Moodboard — можно составлять свой мудборд, можно взять готовый
Вывод
Мудборды помогают выработать концепцию, сформулировать идею, подобрать подходящие инструменты, а также способствуют эффективному общения как с заказчиком, так и внутри команд.
Читайте также: