Размеры беханс: Какую ширину для презентации на Беханс лучше использовать и почему. | by Andrii Tonkonogov | Go Design

Какую ширину для презентации на Беханс лучше использовать и почему. | by Andrii Tonkonogov | Go Design

Image by Ales Nesetril

Спойлер для тех, кому лень читать — ширина должна быть 1920px. Ниже, мои соображения почему.

Сделав проект на беханс на Mac 21 в максимальные для презентации размере 1400 px я открыл ее MacBook Retina 15`и… картинка не вызвала у меня никаких эмоций. Размытые и нечеткие пиксели, заблюренные шрифты, все как полагается. Я начала искать выход из ситуации.

Самое легкое решение было на поверхности, зайти в Image Size и просто увеличить макет в 2 раза.

Вопрос с тем, что растянется все. что не смартобьект и не шрифт, больше чем на 100% я был готов решать ценой своего времени.

Когда макет был готов, Я разрезал его на 25 ровных кусков и выдав через Save For Web (PNG) загрузил в презентацию. Презентация выглядела круто, перфектпиксельно, но, грузилась очень долго, да и дергалась сильно при прокрутке, а комп местами начинал гудеть как при запуске ракеты.

Итог

Картинка крутая, но я бы ушел со страницы не докрутив ее до конца из-за повисания прокрутки в некоторых местах и ожидания.

Я ранее сжимал картинки этим софтом и поначалу думал что все будет круто, Панда сожмет работу на 70–80%, макеты станут грузиться быстро и плавно и все проблемы уйдут…

Панда не помогла. Сначала долго «вылавливал» артефакты, как следствие сжатия рисунка (сильно заблюреные тени, битые пиксели, изменения цвета бекграунда!(минимально, но на стыках частей было очень заметно) и другие мелочи). Потом, когда я все поправив загрузил презентацию, меня ожидало разочарование — ничего существенно не изменилось: макет долго грузится; проблема при прокрутке; гул турбин ноута.

Итог

Панду я решил не юзать, т.к. долго вылавливать косяки, да и результата ощутимого она не дала. А из-за большого размера изображения последствия ужима стали заметны невооруженным глазом.

Я решил почерпнуть опыта у других авторов и посмотреть в каком размере выкладывают они. Стандарт — ширина 1400, много делают 1920, а есть и такие которые выкладывают работы шириной более 4000 пикселей. Я подумал что математическое вычисление поможет мне понять что все же таки лучше.

Вводим понятие «Размер макета Беханс» что означает следующее: при разной ширине экрана монитора Беханс сужает или растягивает ваш макет. От 100% (1400) и ниже. Выделил красным.

На чем исследую?

Исследования я провожу на мониторе 15′ с разрешением 2880 px.

Что исследую?

Узнаю насколько по теоретической формуле растягивается мой макет при просмотре на ретине. Выделено красным в таблице

Теоретическая формула

(Размер макета на Бехансе*(разрешение экрана/ширину экрана))/ширину исходника) = % того на сколько растягивается изображение, за счет чего появляется размытость и нечеткость.

Константы

Я беру за основу что ширина окна браузера 100% ширины экрана.
Формула построена на том, что разрешение экрана я меняю через сеттингс (учитывая константу №1) Иду от стандартного 1440 вверх к 1680 и 1920 и также и в низ к 1280.

! Важная деталь к таблице…

Если я отойду от константы — браузера на 100% и на разрешении 1440 просто потяну экран браузера влево достигнув ширины 1280, то моя формула даст результаты — 132%(1400), 96%(1920),65%(2800)

Как читать таблицу (пример)

При ширине экрана 1440 px (на ретине) ширина отображаемого макета на Бехансе будет 1060 px и исходник шириной 1400 px будет растянут на 151%.

В дальнейшем при работе над кейсом беханса я буду работать над макетом шириной в 1920 px.

…и не буду использовать TinyPNG

т.к. на ширине 1920 и 2800 оно не повлияло на скорость загрузки ощутимо (для меня) и только наштамповало артефактов.

…и буду резать макет на меньшее кол-во кусков

в процессе исследования пришел к выводу что меньшее кол-во кусков грузится также быстро, как и большее кол-во (для понимания в макете в 22000 px я отсекал каждые 1400 px высоты), но при меньшем количестве ты реже видишь загрузку очередного холста.

…и буду экспортировать в JPG

в процессе исследования в погоне за меньшим размером попробовал экспортировать не в PNG, а в JPEG (96–97% quality). Получил размер в 2 раза меньше, изменения между PNG и JPEG не заметил. Работал через Save for Web.

Буду рад комментариям, другим точкам зрения и ссылочкам на подобные исследования (сам я их не искал). Исcледования в Behance проводил на кейсе про Метро и кейсе про Экстремального Рыбака.

Как правильно оформлять кейсы на Behance

Любой уважающий себя дизайнер, имеющий портфолио на сайте Behance, наверное, хотя бы раз задумывался о том, как же красиво оформить свою работу, чтобы она зашла публике.

У вас было такое? А давайте мы с вами сейчас подумаем, как же можно подать свою работу, чтобы у зрителя глаза на лоб полезли от красоты ее оформления.

Обложка

Думаю, вы со мной согласитесь – обложка, возможно, играет самую главную роль в том, кликнет ли на кейс ваш потенциальный зритель. Давайте проведем небольшой анализ топовых работ, а затем сделаем выводы о том, как нужно правильно оформлять обложки для кейсов на Behance.

Открываем вкладку «Лучшие» в Behance. Что же мы видим?

Ага, значит, в топах одни рисунки. Дизайнеров здесь не очень ценят, что ли?

Давайте сфокусируемся на кейсах дизайнов упаковок, логотипов, всяческой продукции и, конечно же, визиток. Мы же тут все-таки дизайнеры, а не художники и скульпторы.

Я отобрал самые привлекательные кейсы, которые увидел во вкладке лучших работ. Итак…

Кейс с дизайном упаковки шоколада. Помимо яркой и очень красивой упаковки самого шоколада, мы можем наблюдать лаконичную и строгую презентацию самого проекта. Согласитесь, ведь это банальные три шоколадки, лежащие на белой плоскости, но насколько же красиво и лаконично это выглядит. Хочется открыть и просмотреть весь кейс! Возьмем столь действенный прием себе на заметку.

Еще один кейс с дизайном упаковок, и я просто не смог пройти мимо – эти сочетания цветов, минимализм в дизайне, ах… Визуально привлекательные цвета обложки тоже учтем.

Здесь я окончательно растаял. До чего же сильно выбивается данный кейс из всей массы работ одной лишь яркостью обложки. Вы замечаете сначала то, что обложка яркая, а уже затем разглядываете ее и понимаете, что кейс-то на самом деле крайне интересный. Яркие цвета… Это тоже запишем.

Минималистичный дизайн визитки. Да, здесь ничего выдающегося нет, однако презентация работы буквально кричит тебе о том, что на нее просто необходимо кликнуть и насладиться следующими слайдами, которые будут столь же гармонично выглядеть за счет подбора цветов. Запишем про цвета, но учтем при этом однотонность самого проекта – она выбивает проект из общей массы, ведь здесь не просто один цвет, он еще и очень красивый…

Последняя работа для нашего с вами анализа. Думал, добавлять ее или нет, однако поймал себя на мысли, что при третьем просмотре топа мне опять бросается в глаза данный кейс. И все по-прежнему – интересные цвета, минимализм, но… Неужели меня серьезно привлекло такое количество деталей? Хорошо, это тоже запишем, но на всякий случай.

Теперь давайте создадим с вами формулу идеальной обложки кейса для Behance, исходя из направления самой работы.

Если вы разработали лаконичный и строгий дизайн упаковки/визитки (без ярких цветов и столь же ярких иллюстраций, серьезный и пафосный), то вы можете сделать обложку с мокапом на монохромном фоне. Здесь очень важна композиция и расположение элементов.

Если вы разработали минималистичный, но яркий дизайн упаковки/визитки, то вы можете расположить на обложке не так много элементов, но при этом либо сделать белый фон, либо выбрать какой-нибудь яркий или пастельный цвет. Главное тут – сочетание и гармония элементов.

Если вы разработали логотип, то вы можете либо представить красивую и яркую композицию на белом фоне, либо пойти по пути меньшего сопротивления и просто насыпать ваших лого на яркий фон (если ваш кейс заключается в представлении большого количества логотипов).

Если вы разработали оформление для соцсети или макет сайта, то вы можете заключить основные элементы (к примеру, аватарку или главную страницу) в красивую и цветастую композицию. В этом случае гармония элементов максимально важна!

Так, с обложкой вроде закончили. Зритель уже открыл наш кейс. Теперь важно не наломать дров и подарить ему визуальное наслаждение, от которого его курсор сам потянется к кнопке лайка. Давайте разбираться, как этого достичь.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Наполнение кейса

Думаю, вы и так понимаете, что дизайн кейса надо делать в гармонии с обложкой. Чтобы она не выбивалась из общей композиции вашего кейса. Для этого требуется соблюдать цветовую схему, примерную суть расположения элементов и шрифты. Но что насчет самого наполнения? Что же еще добавить в кейс? Давайте вспомним отобранные кейсы и посмотрим их содержание. Для начала возьмем кейс дизайна упаковки шоколада.

В нем очень много слайдов, поэтому я постараюсь вкратце описать содержание данного кейса (посмотреть его вы можете тут).

Сначала идет перечень лиц, участвовавших в процессе появления этого чуда на свет, а также история самой компании. Далее коллаж из паттернов, множество вариантов упаковки, а затем… История создания логотипа в виде огромного коллажа! На слайде рассказывается о том, как из одного логотипа и пары паттернов выжали огроменный кейс. Это действительно интересно читать!

Давайте составим примерный список вариантов наполнения слайдов, а вы почерпнете все возможное отсюда и гармонично замиксуете в своем кейсе. Договорились?

Вариации дизайна, к примеру, если вы сделали много вариантов логотипа или упаковки. Покажите их, а затем расскажите, что именно выбрал ваш клиент.

История создания работы – как пришла идея, промежуточные варианты и все в этом духе.

История компании вашего клиента: на производстве чего она базируется, в каком году основана и прочее.

Можете прикрепить слайд с техзаданием вашего клиента, чтобы и другие могли оценить, как хорошо вы с ним справились.

Цветовая палитра вашей работы (желательно вместе с HEX-кодами).

Ресурсы, потраченные на работу, тоже можно прикрепить отдельным слайдом.

Живые примеры вашей работы: например, дизайн упаковок на готовом продукте, логотип, сделанный вами на вывеске. Вдохновение можете черпать у студии Лебедева.

Различные уместные GIF и видео. К примеру, в одном из своих кейсов я разместил короткий видеоролик с процессом создания проекта. Вы же можете поместить в кейс все, что считаете нужным и что связано с вашим проектом.

Сводка о шрифтах, использованных в работе.

Финальные штрихи: название и теги

Ого, мы уже на финишной прямой! Все почти готово, остались лишь последние штрихи – название вашего кейса и теги. Давайте в последний раз обратимся к нашим отобранным из топа работам.

Название

Раз уж мы начали с дизайна упаковок и айдентики бренда, то давайте на них и смотреть. Зачастую дизайнеры просто пишут название компании, изредка добавляя что-то вроде «visual identity» или «branding». Решайте сами, название особой роли тут не играет (только не переборщите).

Теги

Здесь все просто – вы можете вручную ввести 10 категорий, однако вам никто не запрещает позаимствовать теги у чужих работ.

Вот мы и разработали формулу хорошего кейса на Behance.

Желаю вашим работам чаще взлетать и попадать в курируемые галереи. Спасибо за внимание!

Руководство по размерам изображений в социальных сетях в 2023 году

Если вы когда-либо загружали фотографию в свою ленту в социальной сети и обнаруживали, что качество изображения не так хорошо, как вам хотелось бы, вы не один. Большинство сайтов, которые позволяют загружать изображения, будут использовать собственный набор параметров для изменения размера и сжатия загруженных изображений, чтобы сэкономить место в файле и пропускную способность.

Это может быть хорошо в том смысле, что избавляет вас от работы по изменению размера и оптимизации изображений для онлайн-просмотра. Это также может быть плохо по тем же самым причинам. Последнее связано с тем, что эти параметры изменения размера/оптимизации на основе сервера сайта часто настраиваются для максимальной эффективности хост-системы, а не для вывода изображения наилучшего качества.

Если вы довольны тем, как выглядят ваши изображения, когда вы их публикуете, вы можете перестать читать сейчас, и это нормально. Тем не менее, вы можете попробовать использовать приведенное ниже руководство по изменению размера, чтобы подготовить изображения в рекомендуемых размерах для сайта или сайтов, на которые вы загружаете фотографии. Может быть, они в конечном итоге выглядят лучше.

Содержание

Оптимальные размеры изображений для популярных сайтов социальных сетей

Ниже приведен список размеров изображений, обычно используемых некоторыми популярными сайтами социальных сетей. Изменяя размер ваших изображений до рекомендуемых размеров в пикселях, вы можете избежать или, по крайней мере, свести к минимуму снижение качества, которое часто происходит при загрузке изображений на эти сайты.

Имейте в виду, что настройки и параметры, используемые этими сайтами, могут измениться в любое время. Это также верно для самих рекомендаций по размеру, перечисленных ниже. Мы сделаем все возможное, чтобы обновлять эту страницу в будущем, поэтому добавьте эту страницу в закладки, если хотите быть в курсе этих настроек.

Примечание : Важно отметить, что ваши изображения часто могут не соответствовать точным пропорциям рекомендованных ниже размеров. В этих случаях я бы рекомендовал изменить размер на основе более длинных измерений и позволить более коротким падать там, где они будут.

Размеры изображений Facebook

Facebook предлагает широкий выбор размеров изображений, которые используются на его сайте в зависимости от местоположения и использования. Приведенные ниже списки являются рекомендациями в соответствии с Руководством Meta for Business и собственным Справочным центром Facebook.

Изображения канала : 1080 x 1350 пикселей
Изображение профиля страницы : 170×170 (самое большое)
Фото обложки страницы : 851 x 39 для загрузки0037
Изображения Marketplace : 1200 x 1200 пикселей
Истории : 1080 x 1920

Размеры изображений Instagram

900 изображений отображаются в Instagram самая широкая с максимальной высотой 1350 пикселей ( неудивительно, что это то же самое, что и в новостной ленте Facebook). Лично я делаю свои изображения квадратными, обрезая их в соотношении 1:1 и позволяя заполнить дополнительное пространство черным, белым или цветом, который хорошо сочетается с изображением. Таким образом, при отображении изображений в «сетке» в моем профиле не отрезаются ни головы, ни ноги. Эта информация взята из справки Instagram, а также находится в Руководстве по мета для бизнеса.

Изображения профиля : 320 x 320 пикселей
Изображения канала : 1080 x 1350 пикселей

Размеры изображений YouTube

3 неподвижные изображения используются в интерфейс ютуба. Онлайновая справочная система предоставила следующую информацию о различных способах использования неподвижных изображений. Однако не все они были найдены вместе, поэтому я мог не найти «все» варианты использования неподвижных изображений.

Изображение профиля : 800 x 800 пикселей
Размер миниатюры видео : 1280 x 720 пикселей
Изображение обложки канала : 2560 x 904 пикселей 023 Медийная реклама : 300 x 250 пикселей
Оверлейная реклама : 480 x 60 пикселей
Сопутствующая баннерная реклама : 300 x 250 пикселей

Размеры изображений в Twitter

В справочном центре Twitter есть рекомендуемые размеры изображений для профилей и заголовков, но я не смог найти что-нибудь конкретное для подачи изображений там. Некоторые исследования и эксперименты для подтверждения показали, что изображения «in-stream» отображаются с разрешением 600 x 335 пикселей, но их можно щелкнуть и просмотреть в размере до 1200 x 675 пикселей.

Изображения профиля : 400 x 400 пикселей
Изображения заголовков : 1 500 x 500 пикселей
Изображения In-Stream : 1 209 9 0 0347 пикселей Размеры изображений LinkedIn
Я очень ценю поддержку, чтобы упростить поиск набора рекомендуемых размеров изображений. Следующее взято из онлайн-справки компании.
- Изображение логотипа : 268 x 268 пикселей
- Изображение обложки : 128 x 191 пикселей
- Основное изображение : 1128 x 376 пикселей
- Пользовательские модули : 502 x 282 пикселей
- Фотографии компании