Большой список сайтов, по получению основных цветов из картинки или просто подбору подходящей палитры
Предисловие:
Как-то в интернете я увидел картинку, на которой была фотография и рядом прямоугольники с основными, ключевыми цветами фотографии. Мне очень понравился такой "эффект", уж очень гармонично выглядят сочетающиеся цвета. Там в посте была ссылка на один сервис, который позволяет получить такие прямоугольники из фотографии. Я предположил, что нет какого-то общего алгоритма, по извлечению "ключевых" цветов или оттенков из картинки и поэтому должны быть еще сервисы, которые могут разложить картинку на палитру, начал искать и понеслось... Результат вы видите ниже.
Если вы хотите получить подобную палитру на основе картинки оффлайн, то, думаю, самый простой способ сделать это - провести "пикселизацию" картинки. В Adobe Photoshop это делается с помощью инструмента "Мозаика" (пункт Фильтр > Оформление > Мозаика).
Я много гуглил и собрал воедино ссылки на сервисы, которые позволяют получить палитру "основных" цветов картинки, сервисы с палитрами, сервисы с подборками гармоничных цветов и т.д. Ниже будут заголовки категорий, по которым я сгруппировал сервисы, а потом уже ссылки.
Естественно все сайты я нашел не напрямую из поисковой выдачи, а из других статей в которых тоже делались сборки подобных сервисов. Внизу я оставил ссылки на источники, там вы можете найти описание и, возможно, сравнение и скриншоты некоторых из перечисленных здесь сервисов.
Есть еще приложения для разных ОС, в том числе и на смартфоны, которые тоже позволяют создавать палитру основных цветов по фотографии или просто подбирать гамму цветов, но приложения это не универсальное решение, т.к. не все могут получить к ним доступ ввиду возможного отсутствия нужной ОС.
Список сайтов получился очень внушительный, некоторые сайты совмещают в себе несколько категорий, поэтому имена некоторых доменов вы можете увидеть здесь несколько раз. Тем не менее я не считаю этот список самым полным, скорее всего есть еще сайты (или появятся в будущем) о которых я ничего не знаю и которые подпадают под представленные категории.
Так же некоторые из этих сайтов-сервисов позволяют сгенерировать css, для выбранной палитры или скачать цвета в файл ASE, ACO или в картинку png или jpg. Некоторые принимают только .jpg картинки, а некоторые даже .gif. Некоторые позволяют создать аккаунт и сохранять подборки цветов, другие не имеют такого сервиса. Различий, функций и критериев очень много, надеюсь вы найдете то, что вам поможет.
Категории:
Сайты для генерации палитры основных цветов по картинке
Сайты по поиску картинок определенного оттенка или цвета
Сайты для генерации палитры основных цветов определенного сайта
Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.
Палитры с подобранными цветами Material Design и динамическими макетами Android приложения
Мультифункциональные сайты с разными инструментами для цвета
Сайты с картинками и готовыми палитрами цветов к ним
Сайты с просто подборками гармоничных цветов
Источники
Сайты для генерации палитры основных цветов по картинке:
http://patorjk.com/color-palette-generator/
https://www.degraeve.com/color-palette/
https://lokeshdhakar.com/projects/color-thief/
https://www.colourlovers.com/photocopa
https://www.aminus3.com/color/scheme-generator/
https://www.imgonline.com.ua/get-dominant-colors.php
https://www.generateit.net/color-palette-generator/
http://www.cssdrive.com/imagepalette/index.php
http://colrd.com/create/image-dna/
https://bighugelabs.com/colors.php
http://materialmixer.co/#image
http://colorexplorer.com/imageimport.aspx
https://www.wisegeek.com/how-can-i-find-the-average-color-in...
Сайты по поиску картинок определенного оттенка или цвета:
https://services.tineye.com/MulticolorEngine
https://www.aminus3.com/color/
Сайты для генерации палитры основных цветов определенного сайта:
https://www.colorcombos.com/grabcolors.html
Сайты с палитрами для выбора цвета в RGB, CMYK, HSL, HEX и т.д.:
http://colorexplorer.com/colorpicker.aspx
http://www.ficml.org/jemimap/style/color/wheel.html
http://colrd.com/create/color/
https://meyerweb.com/eric/tools/color-blend/
https://www.sessions.edu/color-calculator/
http://colory.ru/colorgenerator
http://colory.ru/colorgenerator2
http://materialmixer.co/#color
https://www.materialpalette.com/colors
http://www.workwithcolor.com/hsl-color-picker-01.htm
http://www.workwithcolor.com/mm-color-blender-01.htm
http://www.workwithcolor.com/hsl-color-schemer-01.htm
http://www.workwithcolor.com/color-converter-01.htm
Палитры с подобранными цветами Material Design и динамическими макетами Android приложения:
(Там гармоничные, сочетающиеся цвета, но в основном эти сайты для Android UX дизайнеров)
https://www.materialpalette.com/
https://codecrafted.net/randommaterial/
Мультифункциональные сайты с разными инструментами для цвета:
(На этих сайтах есть инструменты не только подбора цвета в виде обычной палитры, но и для генерации градиента, паттерна или чего-нибудь еще)
Сайты с картинками и готовыми палитрами цветов к ним:
(Поможет, если вдруг не хватает фантазии)
https://www.aminus3.com/color/
Сайты с просто подборками гармоничных цветов:
https://coolors.co/browser/latest/1
http://www.colormunki.com/pantone
http://www.colormunki.com/munsell
https://colorup.tikkurila.com/index.html#/l/ru/6/8/colors
https://www.colorcombos.com/popular-color-combinations
Источники:
http://www.dejurka.ru/articless/color-swatches/
https://designshack.net/articles/inspiration/developing-a-co...
https://tin-liva.livejournal.com/89084.html
http://do.esprezo.ru/color-picking
https://vgrafike.ru/ochetaniya-cvetov-onlajn/
http://www.nautical.dorisyershova-design.ru/2014/07/14/%D1%8...
Если кто-то знает сайты из схожей тематики, но которые я не указал - обязательно пишите их в комментариях.
Мелочи для жизни дизайнеров, фотографов и программистов часть №2
Многим читателям Пикабу понравилась моя прошлая статья с ссылками на хорошие источники для дизайнеров и фотографов, сложно было собрать еще больше полезных сайтов, но вроде бы получилось! Спасибо вам что читаете, пишите в комментариях свои сайты и я их учту!
Самые лучшие гайды для web-дизайнеров и разработчиков яблоко и гугл
alfabank.ru - Дизайн Альфа-Банка
kontur.ru - Контур.Гайды
Блоги
disbiz.ru - блог веб-дизайнера
nicothin.pro - блог о веб-разработке
projectorat.ru - блог прототипографа
Для работы с вдохновением
dribbble.com - для вдохновения и размещения портфолио
behance.net - для вдохновения и размещения портфолио
freebbble.com - тут все что есть бесплатное в dribbble
dribe.org - Накрутка лайков на dribbble, behance, medium, artstation
tympanus.net - для вдохновения дизайнера и программиста
Работа с форматами, картинками, цветами
wallhaven.cc - обои и картинки
cutepdf.com - редакторы PDF
pdfescape.com - Богатые бесплатные редакторы PDF
pngtree.com - иллюстрации и png
icons8.com – иконки
coolors.co – палитры
codelove.de - оптимизатор jpg
webgradients.com - градиенты и цвета
undraw.co - иллюстрации
squoosh.app - сайт по сжатию графики и конвертации
webhostinghub.com - сет векторных иконок.
Конструкторы логотипов
Релакс
radiooooo.com - можно выбрать любое десятилетие и страну и слушать музыку
cc-fan.tv – куча мультиков (когда устал от работы)
mynoise.net - шум моря и не только
Еще много хорошего
habr.com - 400 потрясающих бесплатных сервисов
habr.com - 300 потрясающих бесплатных сервисов
Уроки по 3d графике
Облегчим жизнь верстальщикам
zeplin.io – PSD to CSS
avocode.com - PSD to CSS
pixlr.com - GIMP в web
Редакторы диаграмм
В помощь программистам и всем, кто в web и it
devdocs.io - шпаргалка для web разработчика
nisnom.com - сборник HTML, CSS, JavaScript/jQuery компонентов
zilore.com — пока еще бесплатный anycast dns-хостинг с гео
themelock.com - сайт с шаблонами бесплатно
startbootstrap.com - еще Bootstrap шаблоны бесплатно
bplaced.net - бесплатный немецкий хостинг
wobzip.org - распаковать архив онлайн
sqlfiddle.com - поиграть с SQL запросами
regexpal.com - поиграть с регэкспами
mega.nz - облако до 50 гигов
toggl.com - тайм-трекер
halocoder.ilost.ru - онлайн редактор и файл-менеджер
mailchimp.com – сервис для e-mail рассылок
keys.so – аналитика конкурентных сайтов
Мелочи для жизни дизайнеров и фотографов
Привет! Я web-дизайнер (и еще немного фотографирую) мне за долгое время работы было очень сложно порой найти нужный ресурс, решил облегчить жизнь юным дизайнерам, да и просто тем, кто любит красивые картинки на рабочий стол, собрал большинство ресурсов, которыми пользуюсь сам, для работы, заработка в интернете и упрощения жизни, надеюсь тебе будет полезно мой юный друг, который тянется к знаниям!
Блоги и статьи для дизайнеров, можно найти что почитать и чему поучиться:
Хорошие обои на рабочий стол и jpg, иногда с лицензией на использование в работе:
fuzzyaxolotl.com (осторожно, много голых теть)
PNG – все сразу и без фона, подойдёт для фотохудожников и web-дизайнеров
Psd и Mockups – тем кто ленится делать все ручками
Подбор цвета \ цветовой круг
Шрифты, наборы, пользуюсь сам и советую другим
Icon и шрифтовые иконки
Требования к PSD-макетам. Знать такое надо любому web- дизайнеру:
Биржи фриланса \ Заработок в интернете
work-zilla_com
fl_ru
Временный файлообменник
Где учится html и css + js
Конструкторы сайтов (все ущербно, но для быстрого тяп-ляпа сойдет)
Спасибо за внимание, надеюсь статья была полезна хотя бы одной ссылкой!
P.S.
Учитесь и тянитесь к знаниям, ведь в наше время еще можно найти информацию в интернете!
Работа над ui. Как вам ?
Всем привет. Сегодня закончили крутую работу над ui. Прошу закидать тапками и дать вашу оценку данной работе.
Один день = Один экран вымышленного приложения
Всем привет:)
Я запустил небольшой личный челлендж. Каждый день я рисую 1 экран вымышленного мобильного приложения. Исходник каждого экрана можно скачать в формате Sketch, если экран с анимацией – исходник Principle тоже можно скачать.
Цель:
1) Собрать длинную страницу из дизайна iOs приложений разных тематик;
2) Практика в Sketch и Principle;
3) Разминка и небольшой отдых от основных проектов;
4) Тренировка скорости разработки, на прорисовку экрана я планирую тратить не более 40 минут времени;
Заканчивается первая неделя эксперимента и я хочу поделиться с вами результатом, а вы дайте обратную связь в комментариях и идеи для новых экранов:)
#1. Экран поиска посуточного жилья
04.02.2018
#2. Экран ожидания такси
05.02.2018
#3. Магазин наручных часов
06.02.2018
К этому экрану я заснял небольшое видео с анимацией интерфейса:
#4. Список задач на сегодня
07.02.2018
#5. Оформление заказа в интернет-магазине
08.02.2018
#6. Личный портфель криптовалют
09.02.2018
К этому экрану тоже есть видео:
Ребят, у меня уже заканчиваются идеи для экранов, осталось идей на полторы недели.
Есть идеи для приложения? напишите в комментариях, я буду отрисовывать интересные идеи.
Спасибо за внимание, если будет интересно, могу выкладывать каждую неделю пост с экранами:)
Для Windows готовят крупнейшее изменение пользовательского интерфейса со времён Windows 95
Новый интерфейс будет основан на вкладках, когда в одном и том же окне можно запускать несколько различных приложений. Скорее всего, такая оболочка предназначена для UWP приложений, но Microsoft может добавить некоторые "простые" программы, например Notepad.
Ниже представлено видео, показывающее принципы работы данного интерфейса.
Немного о работе с текстом
«Священная корова» типографики
В своих предыдущих постах я уже писал о выравнивании текстовых блоков, но этот вопрос требует более детального рассмотрения. Типографика — это способ организации букв, если не вдаваться в обширные подробности. Эффективная коммуникация и немного радости.
При работе с текстом оперируйте блоками. Думайте блоками.
Обратите внимание — вертикально текст выровнен относительно блока, в который входит весь текст, а не относительно какой-либо строки. Важно помнить, что типографика — не наука, и в ней нет точных рецептов. Любое выравнивание строится на ощущении, что так будет лучше, пусть даже эти ощущения подтверждены многолетней практикой.
Сравните два блока текста ниже. Который из них выглядит более сбалансированным?
Для моих глаз правый вариант предпочтительнее — излишне большой отрыв от линии выравнивания в заголовке компенсирован обратным отступом.
Используйте шрифты, у которых есть как минимум четыре начертания.
Используйте контрасты.
Чтобы создать визуальную иерархию, пользуйтесь различными начертаниями.
Cомневаетесь? Делите на два!
Будьте внимательны к межстрочным интервалам.
Наиболее органично выглядит текст с межстрочными интервалами 1,2х-1,5х от размера кегля шрифта. Смотрите:
Урезайте длину строк.
Дальнейшая информация — для фанатов своего дела.
Дефис используется в сложносоставных словах.
- – —
Короткое тире используется для обозначения диапазона или расстояния.
- – —
Длинное тире прекрасно заменяет запятые, скобки и двоеточия.
- – —
И самое главное, не забывайте о кернинге.
При подготовке материала использована статья Pierrick Calvez: https://medium.muz.li/typography-that-sacred-cow-ea7a5909ca7...
Спасибо, что дочитали!
Не знаю, мои уважаемые подписчики, о чём вам ещё было бы интересно почитать, поэтому предлагайте.
Оптические эффекты в пользовательском интерфейсе, ч.3
Всем привет!
Спасибо всем, кто подписался на меня, продолжаем статью.
Первая часть тут: https://pikabu.ru/story/opticheskie_yeffektyi_v_polzovatelsk...
Вторая часть тут: https://pikabu.ru/story/opticheskie_yeffektyi_v_polzovatelsk...
Если вы не дизайнер и вам неинтересно — смело проходите мимо.
3. Оптическое скругление угла
Что может быть более круглым, чем круг? Раньше я думал, что ничего. Но, как я сказал в самом начале, наши глаза иногда воспринимают вещи не так, как мы ожидаем. Итак, какой круг на рисунке ниже выглядит более плавным?
Люди, которых я спрашивал, выбирали между вариантами 3 и 4. Варианты 1 и 2, безусловно, слишком угловатые, 5 — уже близок к квадрату. Если мы совместим третий и четвёртый варианты — геометрический и исправленный круги, то узнаем, что второй чуть больше первого и, следовательно, более округлый для наших глаз.
Чтобы продемонстрировать, что именно я имею в виду, я взял буквы «О» из трёх известных геометрических шрифтов — Futura, Circe и Geometria. Учитывая, что высококачественные шрифты построены на основе визуального восприятия человека и используют сложную систему оптической конструкции, я полагаю, что их круговые формы выглядят более округлыми, чем геометрические. Разве эти буквы не приятны для глаз?
Давайте накладывать на них геометрические круги. Даже «О» шрифта Futura, что ближе всех к геометрической форме круга, больше. Буквы шрифтов Circle и Geometria шире, чем геометрические круги.
Таким образом, исправленный оптически (справа) может выглядеть еще более округлым, чем геометрический (слева).
Как мы можем использовать это? Для скругления угла, конечно! Если вы используете встроенную функцию скругления в популярных графических редакторах — Photoshop, Illustrator или Sketch — оптически результат не будет хорошим.
Глаз человека моментально обнаруживает точки, где прямая линия превращается в кривую. И это скругление не выглядит естественным.
Я исправил эту проблему с учётом зрительного восприятия.
У такого скругления есть дополнительная область за геометрическим кругом, что делает точки, где линия переходит в кривую, незаметными.
Просто посмотрите на разницу между этими методами скругления.
Теперь мы можем применить этот подход к округлым кнопкам.
Думаю, вы заметили, что кнопки справа имеют более плавный угол скругления и это более приятно для глаз.
Та же история с иконками приложений. Для достижения идеального результата не используйте стандартное скругление углов. Но прежде чем мы погрузимся в эту тему, давайте взглянем на две фигуры со скруглёнными углами.
Первая фигура — это квадрат со скруглёнными углами, который я создал в Sketch. Вторая фигура — суперэллипс, также известный как кривая Ламе. Эти кривые были открыты французским математиком Габриэлем Ламе (Gabriel Lamé) и, в зависимости от используемой формулы, могли варьироваться от чего-то вроде четырехконечной звезды до фигуры, которая выглядит как округлый квадрат.
Марк Эдвардс (разработчик эксклюзивных приложений для Mac) предложил формулу кривых Ламе, которая приводит к гладкой и оптически совершенной форме. Начиная с iOS 7 иконки создаются на этой основе.
Позднее эта форма была изменена. Для дизайнерских гайдов добавили пропорции золотого сечения и сетку, но это уже другая история.
Основное преимущество использования суперэллипса — его более круглая и гладкая форма. С другой стороны, эти нестандартные формы трудно вставить в реальный интерфейс. Нужно либо объединить несколько SVG-файлов, либо подключить специальные формулы или скрипты в код, или использовать PNG-маски, как это делает Apple для своих иконок.
Что касается самого дизайна, то существует простой способ исправить скругление углов. Необходимо перейти в режим редактирования формы и вручную переместить маркеры управления точками кривых ближе друг к другу.
Разница еще заметнее для скруглённых острых углов, что важно для рисования оптически правильных дорожных схем или схем метро.
ВАЖНО ПОМНИТЬ
Геометрически скруглённые углы выглядят искусственно, потому что можно легко увидеть точки, где прямая линия внезапно превращается в кривую.
Оптически правильное скругление угла требует специальных формул или ручной регулировки формы.
БОНУС
Иногда квадрат неидеальной геометрии выглядит более квадратно. Можно подумать «Что за бред?» Итак, что вы думаете о квадратах ниже? Какая форма выглядит более квадратной?
Если вы выбрали квадрат слева, вам удалось увидеть непредвзято, с точки зрения вашего оптического восприятия.
Я лично был удивлён, когда узнал, что наши глаза более чувствительны к высоте объекта, чем к его ширине. Это объясняет, почему даже в геометрических шрифтах буквы «О» всегда шире, чем геометрические круги, а вертикальные штрихи буквы «Н» всегда толще, чем горизонтальные.
При подготовке материала использована статья Славы Шестопалова (Optical Effects in User Interfaces (for True Nerds): https://medium.muz.li/optical-effects-9fca82b4cd9a
Спасибо, что дочитали! Дальше будет небольшая статья про текст
Оптические эффекты в пользовательском интерфейсе
Всем привет!
Расскажу вам немного про интерфейсы и занятные оптические приёмчики. Если интересно — накидаю ещё.
О чём этот пост? Если вы не дизайнер и вам неинтересно — смело проходите мимо. А я расскажу всем, кто остался о магии сбалансированных кнопок, правильном выравнивании фигур и идеальных углах скругления.
Наши глаза — странные органы, которые часто нам врут. Но если вы знаете особенности зрительного восприятия человека, вы можете создать более доступный и совершенный дизайн. Не только в типографии используют оптические приемы для создания удобочитаемых и сбалансированных шрифтов, эти хитрости помогают дизайнерам интерфейсов, создающим взаимодействие между пользователем и компьютером.
1. Точный и оптический размер
Что больше: 400-пиксельный квадрат или 400-пиксельный круг? Геометрически их ширина и высота равны. Но посмотрите на картинку ниже. Наши глаза сразу обнаружат, что квадрат внушительнее круга. Кстати, слова, связанные с весом или объёмом, больше всего подходят для описания оптических эффектов.
В случае, если вы не верите, что эти формы нарисованы точно, это версия с направляющими
и цифрами.
Давайте взглянем на ещё одну картинку с квадратом и кругом. С точки зрения визуального веса, кажутся ли они вам равными?
Для меня определённо они равны. По крайней мере, трудно сразу сказать, что одно перевешивает другое. Неудивительно — я увеличил диаметр круга на 50 пикселей.
Чтобы показать, почему это происходит, я перекрывал фигуры из первого примера (400-пиксельный квадрат и круг) и второго примера (400-пиксельный квадрат и 450-пиксельный круг). Как вы можете заметить ниже, квадрат «перевешивает» круг за счёт зон «а» в первом примере, в то время как во втором примере круг уравновешивает своё положение зонами «b».
То же самое происходит и с квадратами (ромбами) или треугольниками. Чтобы визуально сбалансировать квадраты, они должны быть больше.
Как использовать эту особенность в интерфейсах? Например, когда вы создаёте набор иконок, важно, чтобы все они были хорошо сбалансированы, чтобы значок не выделялся слишком сильно или не был слишком мал. Если непосредственно вписать значки в квадратные области, то более квадратные значки будут выглядеть больше.
Я рекомендую компенсировать вес разных форм иконок, визуально увеличивая небольшие иконки и уменьшая визуально тяжелые относительно среднего размера области.
Пример иконок, сбалансированных оптически.
Становится ясно, почему область значков всегда больше, чем тело значка — чтобы неквадратные значки вписывались и выглядели не меньше, чем квадратные.
Проще всего проверить визуальный баланс размытием. Если ваши значки превращаются в более-менее похожие пятна, они имеют одинаковый оптический вес.
Но иногда мы работаем с уже существующей графикой, например, логотипы соцсетей используются в качестве кнопок «поделиться» и «лайк». Иконки Facebook и Instagram квадратные, а Twitter — это силуэт птицы, Pinterest — литера «P» в круге. Вот почему иконки Twitter и Pinterest из одного набора немного больше — так они выглядят сбалансированными с иконками Facebook и Instagram.
Другим примером проблемы оптического баланса является текстовое поле, расположенное рядом с круглой кнопкой. Если диаметр кнопки равен высоте текстового поля, то кнопка кажется меньше, но если немного увеличить её, то вся конструкция станет более сбалансированной.
Но если вы измените стиль кнопки, увеличение не потребуется. На рисунке ниже кнопка и текстовое поле имеют высоту 80 пикселей, но кнопка справа не выглядит «потерянной» из-за контрастной черной заливки.
ВАЖНО ПОМНИТЬ
Оптический вес — это то, как человеческие глаза воспринимают размер и значение объекта, и он не обязательно равен его пиксельному размеру.
Круги, алмазы, треугольники и другие неквадратные формы должны быть больше, чтобы оптически сбалансировать их с квадратными формами.
Области для значков должны иметь некоторое пространство, зарезервированное для оптической балансировки. Это важно для наборов иконок, которые постоянно на виду.
Ну, на этом я закончу, а если будет интересно, то впереди будет ещё про выравнивание разилчных форм, текстовых блоков и прочее
Пост боли от кнопки F
Уважаемый @admin, на Youtube (и многих других видеохостингах) кнопка F разворачивает видео на полный экран (от слова Full Screen, видимо), что является традицией уже лет 10, наверно. Но на Pikabu рефлекторно нажимая кнопку F на самых интересных видео (пытаясь их развернуть на полный экран), мы скрываем просмотренные посты, включая пост с интересным видео. Сегодня, столкнувшись с проблемой в 1000-й раз, решил всё же спросить: может сменить на что-то другое? H, например, от слова Hide?
Современные инструменты Web & UI/UX дизайнера
Фотошоп — всё
Фотошоп изначально был заточен под работу с фотографией, в целом — растровой графикой, но не для работы с веб-интерфейсами: он имеет множество бесполезных функций, а необходимых, ускоряющих работу, удобных — не имеет. Да, несколько лет назад он был полноправным монополистом, а неловкие попытки поиска альтернатив (Иллюcтратор, Индизайн) не получали продолжения.
Сейчас ситуация кардинально изменилась и инструменты, заточенные под дизайн веб-интерфейсов, растут, как грибы после дождя.
1. Sketch
По моим субъективным ощущениям Скетч лидирует на профессиональном рынке. Если вы отправитесь на собеседование в значительную компанию, почти наверняка вас спросят, умеете ли вы в Скетч? Правда, для работы он использует встроенные функции iOS: на версию под Win уже никто особо не рассчитывает.
Скетч активно разрабатывается: из практических преимуществ, которые существуют на данный момент, можно выделить очень удобную работу с символами. Это что-то вроде смарт-объектов в фотошопе, но значительно функциональнее. Например, вы можете изменить контент внутри символа, не меняя сам символ. Предположим, у вас есть карточка товара. Чтобы создать бесконечное разнообразие карточек с разными товарами — вам хватит одного (!) символа.
Это небольшой и конкретный пример его превосходства над Figma и XD, о которых речь пойдет дальше. Если говорить о Фотошопе — Скетч превосходит его буквально во всём, что касается интерфейсов.
2. Figma
На данный момент самая удачная альтернатива Скетчу для win-юзеров. По сути, этот выбор за вас делает платформа.
Фигма тоже активно разрабатывается. Есть все надежды на то, что она ни в чём не будет уступать Скетчу, но уже сейчас у неё есть свои особенные фишечки, например, коллективная работа над документом — механика похожа на коллективную работу в GoogleDocs.
Можно брать.
3. Experience Design
Не то, что мне было что сказать о нём, но как дань былому величию Adobe; и XD, как надежде на хотя бы частичное его возвращение, думаю, стоит его упомянуть. Кто работает в XD, можете дополнить меня в комментариях.
На данный момент он очень сырой, но выглядит, тем не менее, перспективно. И, может быть субъективно, но в плане взаимодействия — приятнее Фигмы (потому что больше похож на Скетч).
Всё это здорово, но...
Всё это здорово, но если вернуться от теории к правде жизни, наверняка возникнут некоторые проблемы. Например,
Как быть с обработкой растровых изображений (ретушь, коррекция, сменить-фон-убрать-прыщи)?
Никак. Всему свои инструменты: для разработки интерфейсов — Sketch, Figma etc; для работы с растровыми изображениями — Фотошоп. Никого не смущает, что мы не обрабатываем фотографии с помощью HTML/CSS, к примеру, так почему должно смущать, что мы не делаем это с помощью Скетча?
Что делать, если заказчик панически боится любых исходников, не заканчивающихся на .psd?
Внедрение Sketch или Figma повышает качество и скорость работы, как со стороны дизайна, так и со стороны разработки.
Для работы с исходником не требуется установки, покупки, пиратства дополнительного софта. Файл .sketch выгружаем в Zeplin (бесплатный, есть веб-версия, есть аналоги); .fgm никуда не выгружаем — Figma сама по себе бесплатная и имеет веб-версию.
Может быть, не все люди пойдут на встречу, но это не повод обрекать себя на фотошоп-болото и отказываться от развития.
Разработчик отправит меня на х#й Как быть, если панически боится разработчик?
Прежде всего, это какой-то неправильный разработчик. В нашей сфере, если ты не развиваешься, то очень быстро оказываешься на обочине. По возможности избегайте этого.
Маловероятно, что такой вопрос в принципе возникнет. Как правило, преимущества Zeplin/Figma над psd-исходником, им (разработчикам) даже очевиднее, чем нам (дизайнерам) — достаточно минимальной демонстрации.
Спасибо!
Дружелюбные к пользователю способы ввести номер телефона
Gifx
Gifx
Gifx
И, бонусом, адрес
25 Бесплатных шрифтов премиум-класса
Все любят качественные шрифты. Особенно, когда они доступны совершенно бесплатно! А что насчет регулярных бесплатных шрифтов? Еще лучше, верно?!
FontBundles.net предлагает регулярные бесплатные шрифты премиум-класса стоимостью от $12-$16 каждую неделю. Прямо сейчас уже доступно 25 бесплатных шрифтов, которые можно использовать в любой программе. Забирайте!
Julia's Dream - Скачать
Habgost Script - Скачать
Lustinmal Script - Скачать
Tweety Sweety Script - Скачать
Brother Typography Script - Скачать
Amsterdam Script - Скачать
The Anomali - Скачать
Zombies - Скачать
Quentin Typeface - Скачать
Hot Deals - Скачать
Tragic Marker - Скачать
LudicrousSprightly - Скачать
Sprightly - Скачать
Cavorting - Скачать
BlowBrush - Скачать
Bajern Typeface - Скачать
ShellaHera Script Lite Version - Скачать
Sweety Donut - Fun Typo - Скачать
Naila Script Typeface - Скачать
Adilla and Rita Typeface - Скачать
Fanatic - Скачать
LaSpacino Typeface - Скачать
Loft Yian Script Typeface - Скачать
Qeyla Script - Скачать
Часть 1: Бесплатные полигональные бекграунды и текстуры
Полигональные бекграунды и текстуры довольно популярны среди веб-дизайнеров. Они добавляют многоуровневость и помогают почувствовать глубину дизайна. Большинство полигональных бекграундов выполнены в красочных цветах и они отлично смотрятся на сайте, листовке, постере и многом другом.
В этой статье мы собрали большой список полигональных бекграундов и текстур. Эти ресурсы безусловно помогут вам разработать классный дизайн.
Backgrounds
Бесплатные полигональные бекграунды (PSD, JPG, PAT)
Полигональные бекграунды для сайта и печати
20 Бесплатных высококачественных полигональный бекграундов
HD Полигональные бекграунды (JPG)
Бесплатные полигональные бекграунды (PSD)
Бесплатные полигональные бекграунды
Бесплатные бекграунды
Бесплатные полигональные бекграунды (PSD)Скачать
Бесплатные HD полигональные бекграунды
10 бесплатных векторых полигональные баннера бекграунда
Бесплатные полигональные бекграунды (PNG)
Бесплатные Темные полигональные бекграунды (PNG)
Бесплатные геометрические полигональные бекграунды (JPG)
7 Полигональных бекграундов
Бесплатные полигональные бекграунды (JPG)
Часть 2 | 50 потрясающих инструментов и ресурсов для веб-разработчиков
Часть 1 | 50 потрясающих инструментов и ресурсов для веб-разработчиков
Продолжение
Хостинг и браузер
26. PingDom’s Website Speed Test
Это онлайн Website Speed Test поможет вам проанализировать скорость загрузки ваших сайтов и поможет узнать, как сделать их быстрее. В итоге вы получите результат с углубленным и информативным анализом.
27. Domai.nr
С domai.nr вы можете проверить наличие доменного имени и получить предложения по похожими названиями. Работает очень хорошо и быстро.
28. Browser Shots
Browershots представляет собой интернет-инструмент, который имитирует как веб-страница выглядит в различных браузерах.
29. Piwik
Piwik это приложение, которое дает вам подробную информацию о пользователях и их поведение на вашем веб-сайте. Вы можете использовать это в дополнение к Google Analytics.
30. Responsinator
Responsinator помогает разработчикам сайта быстро получить представление о том, как их сайт будет выглядеть на самых популярных устройствах.
Обработка изображений
Это все еще находится в бета-версии, но все еще является отличным инструментом для создания иконок. Вместо того чтобы дать вам только одну базовую иконку, realfavicongenerator.net позволяет создавать конкретные иконки для каждой ОС.
33. Pixlr
Pixlr удивительный редактор изображений с богатой функциональностью. Он работает аналогично тому, как автономных редактор изображений, с той разницей, что это запускается прямо в браузере. Он по-прежнему один из лучших бесплатных онлайн редакторов изображений.
34. Place it
Placeit.net является инструментом для создания потрясающих мокапов для демонстрации вашего сайта, помещая их на экранах компьютеров и устройств на стоковых изображениях. Она включает в себя сотни классных дизайнов на выбор, и довольно проста в использовании.
35. Place hold
Placehold.it поможет вам создать фиктивные изображения в качестве заполнителей в дизайне. После выбора размера вашей картинке вы можете просто скопировать появившуюся ссылку и положил его в IMG тег.
36. Pic Resize
Picresize (.com) – он выходит за рамки того, что предполагает его название. Это прекрасное средство позволяет применять фильтры, обрезать и конвертировать формат файла изображения.
Инструменты совместной работы
37. Readonomy
Readonomy это сервис, который был запустили недавно. Общий сервис для всей команды – вы можете узнать, кто что читает в режиме реального времени, обменяться файлами обсудить все вопросы.
38. HipChat
С HipChat вы можете объединиться с коллегами в режиме реального времени. Поддержка обмена файлами, видео-чат и совместное использования экрана в режиме реального времени.
Git made version control accessible to the masses, and Github revolutionized the way developers collaborate. Github is the most popular repository hosting website in the world and gives you an unlimited number of public repositories for free. If you need to host your private repos for free, though, you can take a look at Bitbucket.
Расширения Chrome
40. Visual Event
Это расширение показывает все события, ограниченные на каждом DOM элемента. Может быть довольно полезным при работе с комплексами JavaScript.
Chrome приложение, которое дает вам подробную информацию о поисковой позиции нескольких сайтов в соответствии с ключевым словом.
44. ColorZilla
Firefox плагин, который был недавно представлен в Chrome. Он предлагает богатую функциональность, когда дело доходит до обработки цвета в браузере.
Учебные ресурсы
45. Tutorialzine
Tutorialzine сайт на котором каждую неделю публикуются удивительные учебники и статьи по веб-разработке.
46. Codecademy
Великолепное место для новичков в кодировании или людей, которые хотят выучить новый язык.
47. CodeSchool
Видео курсы по Ruby, Javascript, HTML/CSS and iOS. Есть уроки и упражнения для начальных и углубленных вещей.
Сайт на котором есть удивительное количество бесплатных электронных книг по языкам программирования.
Разное
50. Coding soundtrack
Нет ничего более успокаивающего, чем писать код под звуки дождя. Два наиболее популярных сайты Rainy Mood и Raining.fm. Последний сайт дает возможность контролировать интенсивность дождя и грома.
Часть 1 | 50 потрясающих инструментов и ресурсов для веб-разработчиков
В этой статье мы собрали для вас коллекцию из 50 самых необходимых инструментов и ресурсов, с помощью которых вы узнаете, как делать все быстрее и быть более продуктивным. Мы пропустили что-то очень важное, без чего веб-разработчик жить не может? Оставляйте все в комментариях. А вот и наша подборка, давайте начнем с нею знакомиться:
Дизайн
Удивительный ресурс для высококачественных текстурированных моделей. Много великих художников способствовали созданию коллекции действительно острых и разносторонних изображений. Ох, и просматривают их сайт даже довольно приятно.
2. Blokk Font
Blokk это специальный шрифт для демонстрационных макетов, он является отличной альтернативой Lorem Ipsum. Это может пригодиться в случае краю дизайнерского искусства, что не будет, как правило, хорошо перемешать с латинского на нем.
3. FreePik
Freepik предлагает колоссальную коллекцию векторных изображений, иллюстраций, SVGs, PSDs и стоковых фотографий. Весь материал совершенно бесплатный. Все разбито на аккуратные категории, так что у вас не возникнет никаких проблем с поиском того, что вы ищите, хотя, возможно, выбрать будет сложно, поскольку существует более 1.4 миллиона файлов.
Это одна бесценная коллекция фото материалов. В ней более 20 ресурсов – все из них бесплатные и с лицензией.
5. Google Fonts
Вы, наверное, знаете об этом сейчас, но мы не могли опустить это. Это библиотека шрифтов Google, которая на сегодняшний день является лучшим местом, для поиска дружественных шрифтов.
6. By People
ByPeople.com это сеть полезных, постоянно обновляемых ресурсов. ByPeople собирает красивые, чистые и обновленные графические халявы, фрагменты кода и полезные ресурсы, организовывая все это в списки, которые можно скачать напрямую с сайта.
7. Snipplr
Snippler предлагает своим пользователям возможность загружать куски полезного кода и делиться им с остальными. Есть тысячи фрагментовjavascript, php, css, ruby и другого языка.
8. HailPixel
Интересно использовать палитру цветов. Он обрабатывает выбранный цветовой тон, яркость и насыщенность цвета.
Удивительный онлайн-сервис с блестящей идеей. Color Thief позволяет загрузить изображение и получить цветовую палитру для него, а также узнать его доминирующий цвет. Очень полезно для принятия дизайнерских решений.
10. Dribbble
Dribbble это сообщество веб-дизайнеров, графических дизайнеров, иллюстраторов, дизайнеров иконок, логотипов и других творческих людей, которые делятся своими небольшими скриншотами, показывают свои работы. Великолепное место, чтобы исследовать новые дизайнерские идеи.
11. Bootstrap
Интерфейсная основа для созданию соответствующих веб-сайтов. Это делает ваши сайты отзывчивыми, они хорошо выглядят как на малых, так и на огромных экранах с хорошо сделанной системой сетки. Есть много дополнительных ресурсов и плагинов для начальной загрузки, а также альтернативные структуры, как фундамент.
12. Patternizer
Это приложение позволяет создавать простые в использовании шаблоны. Шаблоны могут быть сохранены и разделяют ни с кем, что позволяет сотрудничестве и ремиксов.
13. Project Parfait
Project Perfait является продуктом Adobe, что дает нам возможность получить важную информацию о PSD прямо в браузере. Тем не менее, он не поддерживает PSD editng (по крайней мере пока).
Кодинг
14. Emmet
Emmet это плагин для многих популярных текстовых редакторов, которых значительно повышает скорость, с которой вы пишете HTML код, позволяет очень быстро трансформировать CSS-как селекторы.
На jsbeautifier.org вы можете найти инструмент, который уменьшеньшит кусок JavaScript или HTML кода.
16. CodePen
CodePen вырос в платформу для демонстрации впечатляющих CSS3 и JS демок. Если вы в погоне за классными кнопками или просто ищете вдохновение, посетите CodePen.
17. W3 Validator
The Validator представляет собой бесплатный сервис по W3C, который помогает проверить правильность веб-документов. Он может обрабатывать документы, написанные на большинстве языков разметки и дать вам представление о том, что может быть не так с кодом. При поиске ошибок в коде вы в первую очередь должны воспользоваться данным инструментом.
18. mincss
MinCSS это инструмент, который при заданном URL загружает страницу и его CSS и сравнивает каждый селектор в CSS и выясняет, какие из них не используются. Результатом является копия оригинала CSS.
19. Koala App
Замечательное кросс-платформенное приложение, которое компилирует less/sass файлы автоматически.
20. jsfiddle
Jsfiddle.net удивительное место для написания и распространения кода. К услугам гостей панели для написания CSS, HTML и сценарии вашего проекта. Jsfiddle также позволяет включать библиотеки, такие как JQuery, AngularJS и другие. После чего вы можете запустить код в само приложение или сохранить его и передать остальным.
21. Hurl
Это инструмент для тестирования APIs. Вы выбираете метод запроса, настраиваете заголовки и POST параметры, добавляете обычную или OAuth авторизацию учетных данных.
22. SublimeText
Sublime Text представляет собой сложный текстовый редактор, который позволяет вводить и играть с текстовым кодом.
23. Cloud9
Cloud9 является облачной средой разработки, что дает терминал на вашей собственной Ubuntu VM, среди других мощных функций. Альтернативы включают Nitrous.io, Codio and Code Anywhere и другие.
24. Heroku
Heroku был первым крупным игроком на платформе которые поражают разработчиков. Перед этим, мы опирались на дешевых хостинг-провайдеров с ужасной надежностью для размещения наших веб-сайтов (или создание собственных серверов).
25. Vagrant
Vagrant является инструментом для построения полных сред разработки. Vagrant снижает время разработки и установки среды. Существует еще один популярный способ для запуска виртуальных машин с другими операционными системами на компьютере – это VirtualBox.
Развиваем дизайнерское чутье
Эти советы я когда-то дал своему другу. Но решил, что они могут оказаться полезными для многих. Поэтому я написал эту статью.
Если бы я мог вернутся во времена, когда только начал заниматься дизайном, то я бы сказал прошлому себе всего одну вещь: развивай мое дизайнерское чутье, мое умение критиковать и возможность определить хороший дизайн.
Развитое чутье частенько может превзойти дизайнерские навыки. Но это не обязательно плохо. По факту, это значит что ваше чутье со временем поможет видеть в вашем дизайне места, которые можно улучшить.
Итак, вопрос в том, как вы развиваете ваше чутье?
Развивая свой вкус и способность видеть сильные и слабые стороны в дизайне вы в конечном итоге установите высокую планку для своей работы.
Простая стратегия
Вот несколько вещей, с помощью которых вы можете натренировать свое дизайнерское чутье.
Ищите вдохновляющий дизайн
Заведите папку (или документ со ссылками), в которую будете сохранять вдохновляющие вас проекты всю неделю. В конце недели просмотрите все проекты и ответьте на вопросы из списка. Не обязательно отвечать на все из них для каждого проекта, но держите их в памяти.
• Что вас заинтриговало в этом проекте когда вы его увидели? Вы по прежнему считаете его вдохновляющим?
• Какова цель дизайна? Как это отразилось на дизайне?
• Какие эмоции вызывает у вас этот дизайн?
• Какие виды работ были проделаны дизайнером?
• Что вы могли бы улучшить в этом дизайне?
Для поиска дизайна интерфейсов вы можете заглянуть на сайты Dribbble, Behance и Awwwards. Я захожу на эти сайты, чтобы посмотреть, как другие дизайнеры решили специфические задачи, и оставаться в курсе популярных шаблонов проектирования.
Просмотр исключительно интерфейсного дизайна изолирует вас от других сфер дизайна. Вы обязательно должны смотреть на другие носители: плакаты, журналы и книги. Часто лучшие примеры типографики и систем сеток можно найти за пределами области, в которой вы обычно работаете.
Кроме того, задумайтесь о изучении дизайна других культур. Примите во внимание культурный контекст и проанализируйте как это влияет на проекты. Это расширит ваш кругозор и позволит критически оценивать дизайн с разных точек зрения.
Практика созерцания
Есть множество упражнений, которые при постоянном повторении разовьют ваше дизайнерское чутье. Но вместо этого потратьте несколько минут в день на наблюдения и попытки понять огромный окружающий мир.
На протяжении дня вместо того, чтобы смотреть в телефон — я сам такой же — смотрите на дизайн вещей вокруг, на здания, мимо которых вы идете, на знаки, которые направляют вас и на природу. Используя мир в качестве инструмента для тренировки, имейте ввиду несколько вещей.
• Выясните, что бросилось вам в глаза и почему. Дизайн это всегда история о первом впечатлении.
• Какого рода визуальные иерархии вы встречаете вокруг?
• Как вы взаимодействуете с проектами вокруг себя?
• Какие цвета вы видите и как они между собой взаимодействуют?
Есть одна вещь, которая оказалась полезна для развития моего чутья — фотография. Фотография заставляет вас смотреть, придавать смысл миру. В хорошей фотографии есть все те же составляющие, что и в хорошем дизайне. В частности, фотография требует продуманной композиции, в которую входят визуальный баланс, работа с пространством, а так же игра цвета.
Обратная связь
И, наконец, для быстрого развития получайте обратную связь. Так часто, как только можете, просите других дизайнеров проанализировать вашу работу и дать по ней фидбэк. Опытные дизайнеры, в частности, укажут вам на частые недостатки, которые вы могли пропустить. Если вам укажут на проблему один раз, то вы быстрее и проще обнаружите ее в дальнейшем.
Просите обратную связь для ускорения собственного роста
Заключение
Если вы хотите улучшить свои проекты, то сперва усовершенствуйте свое чутье. И помните, любой человек может развить дизайнерский взгляд.
100 дневынй вызов дизайнерам
Решил принять участие в данном вызове. Суть его заключается в том, что бы каждый день рисовать по небольшому элементу интерфейса. Вот результаты первой недели
Что нужно для стриминга: гайд для начинающих
«Мы в эфире!». С этих слов началась карьера сотен известных и не очень молодых людей. Играть в видеоигры, параллельно говорить в микрофон, при этом даже ничего не монтируя — казалось бы, что тут особенного. Только успевай подставлять карманы под потоки денег с донатов. На самом деле все гораздо сложнее. В этом посте мы вместе с новой стриминговой платформой WASD.TV расскажем, что нужно, чтобы начать стримить.
Зачем стримить?
«А есть ли мне что сказать людям?» – первый вопрос, на который нужно ответить. Ведь сам стрим — это тот же стендап. Выходя к публике, вы должны четко понимать, зачем пришли на ту или иную площадку, какую мысль хотите донести, о каком конфликте поведать. Запустить потоковое вещание (или «поток») — просто, а вот стать популярным стримером с постоянными и лояльными зрителями уже сложнее.
Gifx
Если настрой крепкий, как костюм Тони Старка, — тогда вперед! Но важно помнить, что там, впереди, вас ждет много неудач, прямо как в играх FromSoftware, но финал того стоит. И чтобы добраться до этого финала, одной импровизации недостаточно — нужно планирование. Определитесь с жанром, ключевыми темами, решите вопрос с оборудованием, задайте себе вопрос: «В чем будет фишка моих стримов?». Для начала давайте посмотрим, какие бывают жанры (а их немало!).
Летсплеи/прохождения. Подойдет для тех, кто не пропускает ни одной новинки игровой индустрии. Главное, чтобы был инфоповод, и не важно, будет ли это релиз блокбастера вроде Tom Clancy’s The Division 2 или новый герой для Apex: Legends. Играем, показываем людям кат-сцены, стараемся не шуршать в этот момент упаковкой от печенья. В данном случае ваш канал выполняет роль новостной ленты.
Альтернативный вариант: узкоспециализированные прохождения. Берете какую-нибудь нишу (например, хорроры или стратегии) и отрабатываете ее по максимуму. Но тут есть два важных момента: вы должны очень хорошо разбираться в своей нише и рано или поздно вам придется выйти за ее пределы, когда упретесь в потолок по охвату аудитории.
Киберспорт. Тут все наоборот! За новинками гнаться не нужно, закрывать нишу целого жанра серии — тоже. И даже если стримеру этого направления откровенно не хватает харизмы, но он мастерски раздает «хэдшоты на дасте» — этого уже достаточно, чтобы собрать вокруг себя зрителей. Кому нужно смазливое личико и шутки, если в прямом эфире, бесплатно и без SMS, людям показывают крутые киберспортивные хайлайты.
Gifx
Лайфстайл. Если вы обладаете королевской харизмой и/или умеете что-то делать руками (например, рисовать или играть на музыкальном инструменте), то можете смело пробовать себя в лайфстайл-стримах. Без подобных навыков популярности в этом жанре не видать.
Даже если ведущий таких трансляций не находится в кадре, как делают практически все стримеры в остальных жанрах, и якобы не в центре внимания (допустим, это будут репортажи с мероприятий), то все равно успех будет зависеть от него. Кто введет зрителя в курс дела? Кто будет в реальном времени поддерживать интерес к стриму, создавать на ходу какой-то сюжет, интригу? Видеоигра это сделает сама, а когда ее нет, ответственность за увеселение аудитории целиком падает на плечи ведущего.
Gifx
Бьюти. Их обожают и ненавидят одновременно, закидывают десятками тысяч рублей на донатах и желают фиаско при любом удобном случае. Девушки включают «вебку», начинают в нее улыбаться и… иногда даже этого бывает достаточно, чтобы начать получать донаты. Как вы понимаете, это исключительно женский жанр — в силу того, что большая часть игрового сообщества (а значит, и аудитории стриминговых площадок) — мужская. Бьюти-стримы прекрасно разбавляет игровое и киберспортивное сообщества и при этом не страдают от недостатка зрителей.
Gifx
Что интересно, на WASD.TV в первую очередь ценятся харизма и скиллы, так что просто так на ровном месте собрать гору подписчиков не получится. Хочешь привлечь внимание — докажи, что умеешь. В будущем на платформе появятся кулинарные, художественные и разговорные шоу, и вот тогда бьюти-стримы и лайфстайл, возможно, станут более массовыми.
Gifx
Что вам нужно для стриминга (не только компьютер)
Как только определились с форматом стримов, можно начинать подбирать оборудование. В случае, если вы избрали для себя не игровую тематику, все будет очень просто. Достаточно иметь компьютер средней мощности, веб-камеру, USB-микрофон и более-менее широкий интернет-канал: 20-25 Мбит/с хватит на стрим в разрешении 1080p с битрейтом 3500 кбит/с. Важно не забывать, что 20-25 Мбит/c относятся к скорости выгрузки информации в интернет, а не загрузки (Upload, а не Download), ведь мы отдаем поток в сеть, а не принимаем его.
Микрофон
Именно USB, поскольку обращаться с ним в разы проще, чем с аналоговым, а рядовой зритель стрима разницы не почувствует, как и вы. О том, чтобы пользоваться встроенным микрофоном или гарнитурой, лучше сразу забыть. Звук должен быть чистым. За плохой звук на стриме вас будут ругать подписчики, а любое «гудение» микрофона сократит количество зрителей.
Gifx
Любимое решение стримеров — микрофоны компании Blue. Это одновременно и простое решение для новичков, и хорошее сочетание цены и качества, и мейнстрим: «У всех такие, возьму-ка и я себе!». Микрофоны Blue бывают всех расцветок и на любой кошелек — от бюджетных за 5 000 рублей до профессиональных устройств за 30 000 и дороже. Если бюджет позволяет, присмотритесь к набору Yeticaster. В него входят USB-микрофон, микрофонная штанга (она поможет организовать рабочее пространство, и с ней вы будете выглядеть как настоящий профессионал) и шокмаунт (штука, которая подавляет вибрации стола). Полный набор стоит 21 000 рублей.
Камера
Так уж повелось, что в большинстве своем стримеры используют камеры Logitech. И тут только одна причина: у конкурентов очень скудный выбор. С камерой за 6 000 рублей вы вполне сможете давать в эфир очень хорошую картинку. Logitech HD Pro Webcam C920 — хороший стартовый гаджет. Это далеко не самое бюджетное решение, но изображение с веб-камеры на стриме должно быть хорошим, либо его не должно быть совсем. А как дела пойдут в гору, пересядете на Brio Stream Edition, которая уже стоит 15 000 рублей. Дорого, но в ней — все, что вам будет нужно от стримерской веб-камеры: и видео в 4K-разрешении запишет, и сама вас из фона вырежет.
Софт
Программное обеспечение — это то, без чего ваш стрим просто не запустится. Рассмотрим несколько вариантов:
Вы — начинающий стример. Стартовый капитал ушел на камеру и микрофон, что же дальше? Лучшая программа для захвата изображения для прямых эфиров (или записи) — это OBS Studio. Она бесплатная, со старомодным, но понятным интерфейсом, ей пользуются практически все. Конечно, помимо нее есть еще старый добрый (и платный!) XSplit Broadcaster, а также новомодный Player.me, но они оба проигрывают нашему герою в лице OBS.
Кстати, WASD.TV планирует выпустить свой бесплатный софт для стриминга. Сейчас, в конце марта 2019-го, программа находится на стадии тестирования и в скором времени станет доступна всем пользователям площадки.
Gifx
Если же бюджет позволяет иметь сразу два компьютера, то можете не переживать о качестве картинки — все будет по первому классу. Так ваш локальный битрейт видео будет настолько высоким, что картинка при передаче от компьютера к компьютеру не потеряет в качестве совсем. Главное, соединить их картой видеозахвата. Для максимального качества потребуется Avermedia GC553.
Аксессуары
Со временем, когда вы освоитесь со стримами, нащупаете свой формат и обзаведетесь аудиторией, наступит пора заняться оформлением стрима. На раннем этапе можно не парить этим себе мозги. Зритель смотрит в первую очередь на вас и на игру, а разные дополнительные свистелки — лишь приятный бонус.
Хромакей. Уберет задний фон и позволит вам покреативить. Просто удалить зеленую стену — скучно. Можно, например, засунуть себя в вагон метро или на МКС. Со временем вы достигните уровня Dr Disrespect, то есть сверхразума по части креатива с хромакеем.
Gifx
Свет. Все просто. Чем ярче свет бьет вам в лицо, и чем четче баланс белого на камере и тем лучше вы выглядите в кадре. Это мы все знаем еще с первого фото на паспорт. Но чтобы при этом не ослепнуть, нужны качественные софиты и место под них.
Антураж. Полная противоположность хромакею. Когда наберется достаточно стаффа (например, красивых фигурок и плакатов), можно поставить их к себе за спину, тем самым оживив кадр.
Стриминг — дело очень непростое, хотя в том, чтобы начать этим заниматься, нет ничего сложного. Успех зависит лишь от того, насколько много в вас упорства. Не останавливайтесь из-за мелких трудностей и совершенствуйтесь. Признание аудитории прямо пропорционально вашему мастерству. В чем? А это уже зависит от выбранного вами жанра. Удачи!
