Заманчивое предложение
Телеграм - Три мема внутривенно
Телеграм - Три мема внутривенно
Это до какой степени просветления нужно дойти, чтобы на морде сайта для, на минуточку, помощи психически нестабильным людям, разместить элемент, выглядящий как трещина экрана. Прочем это чудо остается на месте при прокрутке.
Хотя возможно человеку за работу не доплатили, тогда это троллинг 80+ левела
Пруф в первом комменте
Я Web дизайнер и гид экскурсовод по совместительству)
Я веб-дизайнер и мое рабочее место находится прямо напротив спального)
Не обращайте внимания на голые стены - ремонт в процессе (уже который год).
Всем успехов в рабочей деятельности!
В предыдущей части мы подробно рассматривали основные источники для поиска или генерации фото-контента для сайта и требования, предъявляемые к ним с учетом современного сайтостроения. В этой статье и последующих мы разберем наиболее интересные из них, а начнем с разработки изображений — самого сложного способа получения графического контента.
Иллюстрация — это изображение, которое всегда используется в контексте с текстовым описанием и служит пояснением. С иллюстрациями работает иллюстратор. В принципе, иллюстрацией можно назвать и фото, и гравюру, и рисунок: что угодно. Но мы рассмотрим именно векторные иллюстрации.
1. Окружающий текст тяжело отождествлять с готовым фото, купленным на стоке, например. Из определения следует, что основная задача иллюстрации — это помощь в восприятии окружающей текстовой информации. А значит, иллюстрация должна либо ассоциироваться с текстом рядом, либо прямо ему соответствовать. Когда мы говорим об одиночной странице с несколькими иллюстрациями, то задачу, в принципе, несложно решить с помощью фотостока. Но что если таких страниц — целый сайт. В рамках одного веб-ресурса мы должны придерживаться однообразия, а, значит, найти множество стилистически схожих изображений. А это уже задача незаурядная.
2. Текст в рамках одной страницы сложно структурирован, разнообразен или просто специфический. Подбирать готовые изображения для такого текста крайне сложно. А даже если и удастся, то не факт, что это станет понятным для всех пользователей, следовательно, иллюстрация не выполнит своей задачи.
3. Необходима строгая стилистика или точное соответствие фирменному стилю. К примеру, если речь идет о банковской сфере, страховании, юридических или бухгалтерских услугах или, вообще, сайт правительственный или государственный.
Выполненные в едином стиле монохромные иллюстрации курсов Яндекс Практикума отражают суть изучаемых навыков. Источник: https://practicum.yandex.ru/catalog/programming/
Абстрактные иллюстрации на reg.ru схематично показывают, что получит клиент. Источник: https://www.reg.ru/
На сайте «ДОДО ПИЦЦА» рассказ о компании сопровождается иллюстрациями-комиксами, выполненными в фирменных цветах. Источник: https://dodopizza.ru/moscow/about
Сайт канадского авиаперевозчика Porter украшают рисунки с маскотом — енотом. Источник: https://www.flyporter.com/en-ca/
Красочные иллюстрации сервиса по подбору профессий KPMI привлекают внимание, логично дополняют текст и задают настроение. Источник: https://kpmi.ru/
На сайте «1С:БухОбслуживания» изображения персонажей гармонично вписаны в рисованный фон. Источник: https://1cbo.ru/
Милые котики на сайте VPN-сервиса hideme.name наглядно иллюстрируют предоставляемые услуги. Кстати, такой персонаж может считаться маскотом? Источник: https://hidemy.name/ru/
1. Главное достоинство привлечения иллюстратора — это точное соответствие изображения окружающему тексту. Иллюстрации разрабатываются под уже готовый текст, который фактически служит готовым техническим заданием. Хорошая иллюстрация способна абсолютно точно визуализировать любой даже самый сложный текст.
2. Однообразие. Разрабатываемые изображения могут создаваться в точном соответствии с фирменным стилем компании. В том числе в одной цветовой гамме.
3. Брендирование. В создаваемые иллюстрации можно легко интегрировать логотип или любые другие элементы. Это дает и дополнительное преимущество — такие изображения тяжело своровать и использовать в ином контексте на других сайтах.
4. Возможность включения в иллюстрации фирменного персонажа — маскота. В некоторых компаниях вместе с брендбуком разрабатывают персонажей. Иллюстрациях — отличный способ задействовать персонажа на сайте.
5. Уникальность. Такие изображения будут разрабатываться индивидуально под требования и будут абсолютно уникальными. А значит никаких проблем с соблюдением авторских прав.
При разработке нашего сайта wintramedia.ru мы столкнулись со всеми сложностями, описанными выше. И единственно правильным решениям для себя выбрали именно создание фирменных иллюстраций. На каждой странице сайта векторное изображение дополняет окружающий текст и отлично вписывается в стилистику сайта.
Согласны, что такие иллюстрации смотрятся интереснее и солиднее однообразных мокапов и тем более растиражированных по всему интернету картинок с улыбающимися менеджерами? Будем рады узнать ваше мнение. И если понадобятся иллюстрации — дайте знать, разработаем индивидуальные изображения и для вас!
При разработке сайта мы всегда стараемся придерживаться фирменного стиля, цветовой гаммы и прочих элементов брендбука компании. На этапе дизайн-макета у дизайнера нет реальных фото от заказчика и мы используем картинки-заглушки или временные решения для презентации. На презентации сайт с грамотно подобранными картинками выглядит естественно, органично.
И вот настает момент истины. Мы запрашиваем реальный контент от заказчика и встречаемся с распространенной сложностью: на макете все было красиво, но в реальности — где брать такие изображения, да еще и в таком количестве?
Наши требования к контенту, предоставляемому заказчиком:
Естественно, стилистика. Если мы рассматриваем сайт для коллегии адвокатов, то логично предположить, что нам оптимально подойдут изображения, соответствующие корпоративной стилистике организации.
Размер. Это, казалось бы, мелочь, но 70% предоставляемых изображений отметаются именно по причине неподходящего размера. Сайты сегодня адаптивны, они должны корректно показываться и на широкоформатных компьютерных мониторах, и на экранах смартфонов, коих стало бесчисленное количество. И изображение должно быть универсальным: на широких форматах и на узких экранах смартфонов одно и тоже изображение должно уметь масштабироваться, а при необходимости — обрезаться. Поэтому квадратное фото сотрудника крупным планом не подойдет, например, для использования в слайдере размером 1920 на 600 пк. А панорамное изображение офиса обрежется по краям при масштабировании. А еще есть такие вещи, как генерация preview (картинки анонса) для статейных блоков или, например, создание изображения для Open Graph разметки og:image (вы видите эту картинку, когда добавляете ссылку на страницу сайта в мессенджер или соцсети) . Важно все это учесть.
Цветность. Единый фирменный стиль и соответствие цветовой гамме требуют использования изображений в определенных контентных блоках. Зачастую это блоки, где текст накладывается поверх изображения. Поэтому если спроектированный блок подразумевает, что текст будет белым на темном, то изображение не должно иметь белый фон. Конечно, можно обработать изображение в фоторедакторе, но изначально корректное фото — залог успеха.
Контекст и уместность. Пожалуй, самый сложный момент. Чаще всего, мы используем изображения в окружении какого-то текста. И в зависимости от его сути необходимо использовать максимально отвечающее контексту изображение. Это заставляет долго подбирать подходящее изображение, которое будет уместным именно в этом блоке. И хорошо, если есть из чего выбрать…
Легальность. Конечно же, легальность. Один из самых широко обсуждаемых моментов в последнее время. Мы подробно описали этот момент и последствия для бизнеса, если вы все еще смотрите на решение этой задачи с помощью Яндекс. Картинок, например. Сегодня за это можно получить иск на круглую сумму. Закон об интеллектуальной собственности строго стоит на страже авторских прав, чем пользуются меркантильные юристы, жаждущие легкой добычи. Изображения должны быть либо уникальными (принадлежащими заказчику) , либо легально приобретенными.
Итак, нам нужны изображения: уникальные/легальные, в одной стилистике, определенной цветности, нужного размера и пропорции, отвечающие сути окружающего текста, да еще и штук 40. Согласитесь, задача, мягко говоря, непростая. И поверьте, только у 1 из 10 заказчиков находится коллекция изображений, отвечающих всем требованиям. Остальные же упираются в эту стену, и проект начинает «буксовать». Мы в «Винтре» очень хорошо знаем об этой проблеме и при ее возникновении находим оптимальное решение, учитывая тематику бизнеса и тип разрабатываемого сайта.
Забегая вперед скажем, что, в дальнейшем мы подробно опишем каждый способ в отдельной статье. Сейчас же просто перечислим основные варианты в порядке сложности создания и стоимости:
Стоковые сервисы. На сегодня это один из самых доступных способов получения изображений. Существует множество площадок: от предлагающих свободно распространяемый контент (условно-бесплатных) до платных, российских и зарубежных. У каждого сервиса свои условия. Среди них: тип лицензии, определяющий варианты законного использования, оплата через расчетный счет (обязательно) , подпись-ссылка на источник, тираж, возможные места публикации и многие другие.
Есть и способы снизить стоимость за счет использования пакетных предложений. Помимо приемлемой цены, есть и самый главный плюс использования стоков: серии изображений и автоматический подбор похожих. Использование коллекций решает вопрос единой стилистики и схожести. Зачастую один фотограф создает коллекцию, делая фотосессию на определенную тему.
Изображение из фотобанка Shutterstock. Источник: https://www.shutterstock.com/ru/image-vector/cartoon-illustr...
Более дорогой и сложный момент — это проведение собственной фотосессии. В зависимости от тематики бизнеса нам потребуются разные фотографы с разным оборудованием. Если предстоит создать меню для ресторана, вам нужен фотограф специализирующийся на предметной съемке. Для интерьеров есть свои особенности, например, необходимость склейка фото или создание панорамы. С людьми работает, как правило, портретный фотограф. Ну а если нам необходим общий вид снаружи, то можно задействовать и фотосъемку с квадрокоптера.
При изучении этого вопроса может показаться, что стоимость услуг профессионального фотографа высока, но при правильно спланированной фотосессии, наличии отработанного сценария, четкого плана и грамотного технического задания на выходе мы получим огромный набор качественных фотографий, в полной мере удовлетворяющих нашим требования. Зачастую бывает так, что отснятого материала с лихвой хватает не только на нужды разрабатываемого сайта, но и на дальнейшее применение при создании полиграфии, рекламы, постов для соцсетей и прочего визуального сопровождения.
Предметная съемка. Стоматологическое оборудование в клинике PROident. Источник: https://proident.ru/
Самый сложный, дорогой и длительный способ — это разработка изображений. Здесь нам на помощь приходят иллюстраторы, аниматоры, 3D-дизайнеры и другие профессионалы в сфере производства цифрового контента. Суть работы заключается в том, что специалист создает изображения по нашим требованиям с нуля. К примеру, нам нужен фасад дома, но он есть только на чертеже — его заменит его 3D-рендер. Или необходимо показать, как будет выглядеть грузовой подъемник в разрезе шахты между 2-м и 3-м этажами. И дизайн интерьера относится сюда же.
Большинство рекламы, в которой в качестве ключевых объектов выступают продукты питания — это не фото. Попробуйте сфотографировать пачку чипсов так, чтобы она выглядела как в рекламе – никогда не выйдет. Все это 3D-макеты, отрисованные графическими дизайнерами. Мы, например, создавали так целую серию изображений для фабрики Сам-По.
Безусловными плюсами такого метода получения графического контента является тот факт, что создаваемые изображения полностью отвечают всем требованиям. Специалист рисует изображение так, как ему необходимо, и может влиять на все факторы. А наличие исходника позволяет генерировать разные изображения просто перемещая, к примеру, виртуально камеру или поворачивая объект в плоскости.
3D-рендер ЖК SamaRanta. Источник: https://townhouse-samaranta.ru/#3d
Мы в «Винтре» столкнулись с теми же проблемами. Нам нужно было использовать несколько изображений на одной странице сайта. При этом они должны были соответствовать смыслу окружающего текста. Нам не подходила ни покупка изображений, ни разработка mockup-ов.
На помощь пришла ручная отрисовка иллюстраций.
Загляните к нам на сайт wintramedia. ru и посмотрите сами на результат.
Для всех поклонников футбола Hisense подготовил крутой конкурс в соцсетях. Попытайте удачу, чтобы получить классный мерч и технику от глобального партнера чемпионата.
А если не любите полагаться на случай и сразу отправляетесь за техникой Hisense, не прячьте далеко чек. Загрузите на сайт и получите подписку на Wink на 3 месяца в подарок.
Реклама ООО «Горенье БТ», ИНН: 7704722037
В продолжении серии наших статей про визуальный контент для сайтов расскажем про 3D-изображения. Это самый сложный в создании, и потому дорогой вид графики. Но иногда такие картинки незаменимы.
Мы живем в трехмерной реальности. Ее можно запечатлеть различными способами: с помощью фотографии или картины с перспективой. А в случае генерации изображений на компьютере для этого используется 3D-графика. Она создается в специальных программах, которые позволяют моделировать трехмерное пространство и любые предметы в нем.
Результатом работы с трехмерной компьютерной графикой может быть что угодно: от фотореалистичного изображения существующего объекта до мультяшного персонажа из фэнтези. Содержание, цвета, формы, текстура генерируемого контента ограничиваются только условиями технического задания или воображением дизайнера.
При этом любую 3D-модель на дисплее компьютера мы видим так же, как обычный предмет в реальном мире. Правда, такое отображение трехмерного объекта требует значительных вычислительных ресурсов. К тому же для сайтов в большинстве случаев нужны статичные изображения. Поэтому для практического применения трехмерную графику обычно превращают в стандартные растровые изображения.
Этот процесс, называемый 3D-рендерингом, можно сравнить с фотографированием. Как и при создании обычного фото, специалист выбирает направление и интенсивность освещения, ракурс, если нужно — добавляет спецэффекты. Причем 3D-графика дает значительно больше возможностей, так как не имеет характерных для физического мира ограничений. В результате создаются картинки — рендеры, которые могут минимально отличаться от реальных фотографий или профессиональных рисунков.
Кроме того, технология 3D-рендеринга позволяет на основе разово созданной модели впоследствии в любое время генерировать любое количество самых разных изображений объекта путем простого изменения настроек графического редактора.
Подобным образом создаются анимированные ролики с 3D-объектами, имитирующие видеосъемку. Но это — тема для отдельной статьи.
В отличие от фотографий, получаемые с использованием технологии трехмерной компьютерной графики изображения позволяют показать:
то, что еще не существует, например, будущий жилой комплекс;
вид с необычного ракурса, в том числе технически недостижимого при съемке реального объекта;
то, что скрыто от невооруженного глаза, например, внутренние элементы механизма;
любую желаемую обстановку;
нужное положение подвижного объекта.
И такие практически неограниченные возможности в 3D-рендерах сочетаются с высокой фотореалистичностью. Смоделированные объекты кажутся «настоящими», «осязаемыми», а потому выглядят привлекательнее обычных иллюстраций.
Изображения, созданные на основе трехмерных моделей, оптимально использовать в случаях:
когда фотографию нужного объекта сделать или приобрести невозможно или очень сложно;
когда необходимо получить выделяющийся визуальный контент, требования к которому превосходят возможности обычной 2D-иллюстрации.
Так, 3D-рендеры очень часто используют при создании изображений для рекламы и продвижения товаров. С помощью компьютера относительно просто нарисовать красивое объемное изображение упаковки так, чтобы были видны все важные надписи, логотип и «вкусная» картинка продукта. Добиться аналогичного эффекта с помощью фотографии зачастую невозможно.
Для sam-po.ru мы разработали трехмерные изображения упаковки для каждого мороженого.
Трехмерная графика также незаменима при желании показать:
1. Продукцию, изготавливаемую на заказ, и поэтому имеющую множество вариаций, которых нет в наличии.
Такие 3D-рендеры подъемников на https://www.lift-prom.ru/ используются в качестве изображений в карточках товаров.
2. Объекты, для которых затруднительно организовать фотосессию, например, из-за их местоположения.
Сфотографировать со всех сторон судно, которое обычно находится или на верфи или на воде — невозможно, а вот нарисовать 3D-модели в «воздухе» — несложно.
3. Важные свойства продуктов, которые нельзя передать с помощью фото из-за конструктивных особенностей.
3D-рендер, на котором изображена глухая шахта в разрезе, наглядно показывает устройство подъемника на странице
4. Результаты находящихся в разработке долгосрочных проектов, таких как строительство недвижимости.
Трехмерная графика показывает, как будет выглядеть внутри и снаружи пока еще только строящийся жилой комплекс https://vira-atmosfera.ru/.
Созданные на основе 3D-моделей изображения можно дополнять интерактивными элементами, чтобы объединить графический контент с текстовым и за счет этого сделать сайт более информативным и удобным.
На сайте https://gal63.ru/ при наведении на этажи торгового центра выводится список организаций и ссылка на страницу с подробной информацией о них.
Рендеры 3D-моделей могут использоваться и для демонстрации продукта в целом, и в качестве изображений для карточек товаров, и для оформления фона сайта.
Да, создание трехмерной графики обходится дороже фотосессий и отрисовки 2D-иллюстраций, требует больших затрат труда и времени. Но эти минусы с лихвой перекрываются возможностями 3D-графики по решению самых сложных задач в области визуального оформления сайтов и промо-материалов.