[Вопросы] Как улучшить качество скриншота? Получается какое то мыло.
Как  |
avatar.png (2.14 MB, Downloads: 0)
2019-03-25 18:37:06 Upload
зайди в запись экрана (приложение). зайди в настройки и улучшь качество видео.  |
IMG_20190325_134832.jpg (76.16 KB, Downloads: 1)
2019-03-25 18:50:48 Upload
IMG_20190325_134851.jpg (288.58 KB, Downloads: 0)
2019-03-25 18:50:48 Upload
Screenshot_2019-03-25-13-47-55-848_com.miui.screenrecorder.png (101.44 KB, Downloads: 0)
2019-03-25 18:50:48 Upload
Xiaomi Comm APP
Получайте новости о Mi продукции и MIUI
Рекомендации
* Рекомендуется загружать изображения для обложки с разрешением 720*312
Изменения необратимы после отправки
Cookies Preference Center
We use cookies on this website. To learn in detail about how we use cookies, please read our full Cookies Notice. To reject all non-essential cookies simply click «Save and Close» below. To accept or reject cookies by category please simply click on the tabs to the left. You can revisit and change your settings at any time. read more
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services such as setting your privacy preferences, logging in or filling in formsYou can set your browser to block or alert you about these cookies, but some parts of thesite will not then work. These cookies do not store any personally identifiable information.
Делаем скриншоты правильно: практические советы
Устройство для снимка экрана на первых компьютерах (Command-Shift-3)
Если вы когда-либо делали хелп или мануал для своего приложения, наверняка вы отметили, как неожиданно много времени и сил занимает создание скриншотов.
В этой статье я расскажу, как правильно делать скриншоты, почему это не просто “два клика” и какие подводные камни встречаются на пути неопытного скриншотера. Рассматривайте ее как чеклист или список практических советов для тех, кто документирует ПО. Надеюсь, это поможет вам избежать разочарований и порадовать юзеров красочными понятными картинками.
Что нужно скриншотить
Нужно:
НЕ нужно:
Процесс создания скриншотов
1. Настройка окружения. Выберите единый стиль окон и шрифтов в вашей ОС. Если интерфейс “резиновый”, определите ширину и высоту окна браузера или программы и не меняйте ее на протяжении съемки.
Лайфхак: Если вы случайно закроете окно, его размеры могут сброситься, и, скорее всего, вы не сможете их точно восстановить. Чтобы не “потерять” размеры, сделайте скриншот окна и всего экрана и обведите уголки окна красным, а потом установите полученный файл в качестве обоев рабочего стола.
Может, кто-нибудь знает более простой и изящный способ?
2. Подготовка данных. Наполните приложение примерами, приближенными к жизни и решающими конкретные пользовательские задачи. Можно продумать несколько случаев: простых, как “хеллоуворлд”, и посложнее, для продвинутых юзеров.
Желательно, чтобы имена объектов и настройки не менялись в пределах одного раздела. Например, в 1-й главе пользователь Ипполит создал заметку “Как готовить рыбу”. А во 2-й главе нужно рассказать о кастомизации заметок. Естественно, лучше рассказывать про то, как Ипполит применяет к уже созданной заметке красную заливку. Такой нехитрый подход напомнит пользователю о предыдущих действиях, а также обеспечит полноту картины.
Не забудьте наполнить вашу систему “реальными” читабельными данными, сделать предварительные настройки, подготовить шаблоны, сделать бэкапы и т.д.
Если вы делаете скриншоты для документации на иностранном языке, проследите, чтобы в кадр не попали “русские” имена (Andrew — ок, Vanja Babushkin — не ок) или надписи на русском языке.
3. Съемка. Тут все зависит от ваших инструментов, но основные рекомендации такие:
а. По возможности снимайте только значимые зоны интерфейса и делайте скриншот как можно компактнее. Так он и на лист А4 поместится, и будет иметь малый размер.
b. Как и при фотографировании, следите за композицией, не отрезайте части элементов по краям скриншота. Постарайтесь делать скриншоты одинаковой ширины и высоты в рамках одного примера.
c. Чтобы сэкономить время, делайте сразу серию скриншотов. На всякий случай можно сделать “лишние”, незапланированные скрины – вдруг пригодятся при переделках или редактировании.
4. Редактирование. Не всегда получается подготовить красивые и разнообразные данные, избежать опечаток или смоделировать определённую ситуацию (ошибка, выход из строя, большой денежный баланс). В таких случаях есть как минимум 2 выхода:
a. Править код и стили страницы в браузере (правый клик > Inspect element и поехали), если речь идет о веб-приложении.
b. Менять надписи, комбинировать блоки из разных скриншотов в графическом редакторе.
Лучше всего уметь и то, и другое и комбинировать эти подходы в зависимости от ситуации.
Хочу отметить, что хотя при редактировании можно добавить к скрину рамку, обрезанные края и тени, лучше это делать стилями в вашем редакторе справки.
5. Сохранение. Давайте скриншотам говорящие уникальные имена, придерживаясь определённого формата, например, general_settings_privacy. Лучше не использовать пробелы и прописные буквы, а также слишком длинные названия. Такой подход гарантирует универсальность и работоспособность при размещении онлайн-справки на различных серверах.
Хранить скриншоты лучше в облаке с поддержкой шаринга, тэгов и версионности. Для удобства поиска лучше разбить папку со скринами на подпапки, соответствующие структуре интерфейса программы.
6. Вставка в текст. Об этом — ниже, в разделе «Оформление».
7. Проверка. Отложите законченный раздел, проверьте его на следующий день. А лучше дайте прочитать текст и посмотреть скриншоты тестировщику или дизайнеру.
Инструменты
Десктоп-инструменты
Плагины для браузеров
Модули HAT программ
Инструменты для создания GIF анимаций
Утилиты для сжатия изображений
Оформление
Продумайте расположение скриншота относительно текста, выравнивание. Если ширина скриншота небольшая, то следует рационально использовать свободное место и настроить обтекание текстом слева или справа.
Чтобы показать динамику, можно сделать комбинированный скриншот:
Если вы вырезали часть окна, то можно показать обрезанный край с неровной кромкой или прозрачностью:
Важные элементы или мелкие детали можно увеличить, чтобы сделать акцент:
Для акцента можно также использовать выделение с помощью цвета – оставить цвет у целевого элемента (панели), а остальные обесцветить:
Добавьте рамки, тени, стрелки, подписи, размытие по вкусу. Главное – соблюдайте единообразие и придерживайтесь ваших стайлгайдов:
И ещё несколько советов.
Старайтесь не вставлять иконки и изображения кнопок в текст, так как высота строки может измениться и верстка будет выглядеть непрофессионально. Лучше подпишите кнопки и иконки цифрами на большом скрине или вставляйте иконки и кнопки в отдельный столбец таблицы.
Переиспользуйте стандартные компоненты (иконки, панели, диалоги). Хороший пример — Confluence Inclusions Library.
Разместите список основных иллюстраций (лучше — со ссылками на иллюстрации) после содержания или в конце мануала.
Если скриншот содержит слишком много данных, попробуйте заменить его прототипом, схемой, таблицей.
Если вы делаете мануал для мобильного приложения, скорее всего, у вас будет очень много скринов. Покажите навигацию между скринами. Так пользователь легче поймет взаимодействие и переходы, даже не читая текст.
Делайте скрины для всех языковых версий ПО одновременно. Тогда при локализации справки вам не понадобится просить переводчика о дополнительных услугах, а техническому писателю не понадобится учить йиксбара, например.
А еще рекомендую прочесть эту статью с очевидными, но полезными советами.
Заключение
А вообще, идеальный скриншот (и мануал в целом) — это тот, который не надо делать. При правильном подходе к UX и UI можно задействовать привычные и очевидные пользователю паттерны навигации и поведения, не нуждающиеся в описании и пояснении.
Будет круто, если в комментариях вы поделитесь своим опытом по поводу создания скриншотов. Инструменты, процесс, размеры, подписи, стили, хранение, автоматизация — интересны любые практические советы!
P.S: Спасибо за статью нашему гуру создания технической документации Александру Зинчуку
Alconost занимается локализацией приложений, игр и сайтов на 60 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.
Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.
Как создать красивый скриншот: правила и приложения
Скриншоты являются иллюстрацией, придающей наглядность и презентабельность проектам и товарам. Это неотъемлемая часть визуального оформления интернет-ресурсов. Поэтому скриншоты должны быть сделаны в максимально высоком качестве и разрешении, а также аккуратно – без кривых стрелок и несимметричных рамок.
Зачем создавать красивые скриншоты?
Создание красивых снимков экрана может пригодиться для следующих целей:
Как создавать красивые скриншоты без навыков в дизайне?
Процесс создания скриншотов не вызовет затруднений, если следовать нескольким основным правилам:
О сервисе MockUPhone
Мокапом называют интерактивный макет, в качестве рамок которого используется изображение ноутбука, планшета или смартфона. Скриншот вставляется в пустое место, и на него накладывается рендер выбранного устройства.
Генератор макетов MockUPhone является бесплатным, в нем представлена целая коллекция исходных картинок. Есть возможность выбора конкретной модели устройства, в частности, iPhone. Дополнительными преимуществами является сохранение в популярных форматах и с разрешением 2K. Из недостатков можно отметить представление изображений с одного ракурса.
О сервисе ShapeItApp
В данной программе доступно множество макетов различных устройств, изображенных под разными углами наклона. Можно наложить тень и сохранить скриншот в высоком разрешении.
О сервисе carbon.now.sh
Применяя этот бесплатный сервис можно создавать скриншоты, выбирая тему оформления и язык программирования с подсветкой синтаксиса. Есть функции настройки параметров: изменение цвета, шрифта, и стиля окна. Потребуется лишь вставить код и экспортировать файл. Недостатком является невозможность делать скриншоты длинных строк кода.
О расширении Polacode для Visual Studio Code
С помощью данной утилиты можно создавать уникальные скриншоты и передавать их на другие устройства. Присутствует функция добавления теней и отступов, а также можно закруглить углы скриншотов экрана.
Данное расширение создает скриншоты небольшого веса, сохраняя тему редактора кода. Установка простая и имеет множество команд в интерфейсе, но новичкам бывает трудно освоиться.
О сервисе Screenstab
Это приложение, которое позволяет изменять угол наклона и выбирать фокус скриншота. Достаточно импортировать изображение в программу и оформить скриншот по своему усмотрению.
Краткий обзор других решений
Существует множество других программ-скриншотеров. Например, приложение Greenshot. При помощи встроенного редактора можно изменять сохраненные скриншоты или размывать определенные области снимка. Также доступна опция распознавания символов.
Для пользователей ПК рекомендуется установить приложение ShareX, в котором имеются инструменты для редактирования и возможность прокрутки кода. Его можно скачать как расширение для браузера.
Какой инструмент выбрать?
Выбор конкретной программы зависит от дружественности интерфейса и бесплатности используемых инструментов. Устанавливая приложение, следует ознакомиться с его функционалом.
Выводы и советы
Подводя итоги можно сказать, что создание красивых скриншотов не требует владения навыками дизайна. Главными условиями является использование акцентных вставок, правильный захват экрана, читаемый размер надписей и удаление лишних элементов.
Для создания снимков экрана можно воспользоваться специализированными программами-скриншотерами, которые предоставляют возможность редактирования сохраненных изображений.
Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, подписки, лайки, отклики, дизлайки низкий вам поклон!
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, подписки, лайки, дизлайки, отклики низкий вам поклон!
Как делать скриншоты в высоком разрешении в Windows 10
Термин разрешение относится к числу пикселей (или точек на дюйм – DPI) на дюйм изображения. Таким образом, более высокое разрешение означает улучшенное качество.
Делайте скриншоты в высоком разрешении в Windows 10
Перейдите в « Настройки », выберите « Система » и затем выберите « Показать ».
Затем в разделе Экран и макет выберите « Расширенные настройки масштабирования ».
Теперь переместите ползунок под заголовком « Позвольте Windows попытаться исправить приложения, чтобы они не были размытыми » с « выкл.» на « на ». Это сделает приложения на вашем главном дисплее лучше.
Кроме того, вы можете ввести нестандартный масштаб в диапазоне от 100 до 500. После этого для дисплеев будет установлен введенный вами размер масштабирования.
У вышеуказанного параметра есть один недостаток – он может привести к тому, что некоторые тексты, приложения и элементы станут нечитаемыми, если дисплей не поддерживает этот размер. Кроме того, может быть трудно вернуться к исходным настройкам.
Если вы используете GIMP, бесплатное программное обеспечение для редактирования фотографий, вы можете улучшить качество снимков экрана.
Затем выберите « Файл » и выберите « Открыть ». Сделав это, выделите скриншот, качество которого вы хотите улучшить.
После этого выберите «Открыть», выберите « Изображение » и установите флажок « Масштабировать изображение ».
Теперь найдите поля разрешения и измените,
Когда закончите, выберите Масштаб ’>« Файл »и« Сохранить ».
Сохраните изменения, когда закончите.
Высокое или повышенное разрешение может существенно повлиять на качество изображения на скриншоте.
Надеюсь, вам понравится этот совет!
PS : Gimphoto и GIMPshop поставляются с GIMP, загруженным некоторыми полезными плагинами и ресурсами. Вы можете использовать один из них тоже.
Как делать красивые скриншоты: лучшие сервисы и лайфхаки
Всем привет. С вами Женя Крюкова. В своей работе я часто вижу, что люди испытывают трудности с тем, чтобы сделать красивый скриншот. Особенно, если дело касается скриншота всей страницы. Поэтому в этом выпуске я решила рассказать вам во всех подробностях, как это делается. Не спешите закрывать рассылку, если эта тема кажется вам банальной. Возможно, некоторые лайфхаки, которые я приведу чуть ниже, окажутся для вас новыми.
Какие ошибки допускают при создание скриншота?
Люди, которые совсем не знакомы с веб-дизайном или типографикой, часто допускают одни и те же ошибки при создании скриншотов. Они не критичные, но лучше их не допускать. Тогда ваши статьи всегда будут аккуратными и вызывающими доверие.
О каких ошибках идет речь?
1. По краям нет «воздуха»
Неправильно:
Правильно:
2. Количество «воздуха» разное со всех сторон
Неправильно:
Правильно:
3. В некоторых местах контент обрывается
Неправильно:
Правильно:
С помощью каких программ и сервисов можно сделать скриншот?
В своей работе я использую программу Monosnap, расширение FireShot и кнопку Print Screen на моем ноутбуке. Давайте подробно рассмотрим каждый из них.
1. Программа Monosnap
Есть и другие хорошие скриншоттеры, но мне почему-то этот нравится больше всего. Он бесплатный, и в нем есть все нужные мне функции: можно сделать скриншот всего экрана и скриншот выделенной области, можно обрезать скриншот, написать на нем текст, добавить стрелочки, сделать замутнение нужной вам области и т. д.
Еще одна полезная функция этой программы заключается в том, что она позволяет загружать сделанные скриншоты в интернет (например, картинку с медведем вы можете найти по ссылке – http://take.ms/nDAuS), а еще – делать видеозапись рабочего стола, что тоже иногда пригождается по работе.
2. Расширение Fireshot
Для браузеров Google Chrome, Mozilla Firefox и Opera. C помощью него я делаю скриншоты всей страницы: делаю левый клик мышью по иконке расширения и выбираю команду «Захватить всю страницу».
После этого нажимаю на кнопку «Сохранить»:
И обрезаю изображение в программе Paint:
Главное преимущество этого расширения заключается в том, что в большинстве случаев он сам определяет, какие элементы на странице повторяются (например, онлайн-чат двигается вместе с прокруткой страницы) и автоматически их убирает. Например, он делает замечательные скриншоты диалогов «ВКонтакте».
3. Старый добрый PrintScreen
Иногда я просто нажимаю кнопку PrtSc на своем ноутбуке и копирую сделанный снимок экрана в программу Paint. Эту функцию я использую чаще всего, когда мой браузер находится в полноэкранном режиме. Например, когда мне нужно сделать скриншот из видео на «Ютубе», раскрытого на весь экран.
Лайфхак №1: как убрать со страницы ненужные элементы
Часто бывает так, что ты хочешь сделать скриншот всей страницы, но тебе мешает онлайн-чат или какая-нибудь кнопка. Чтобы убрать ненужный элемент со страницы, кликните по нему правой кнопкой мыши и нажмите «Просмотреть код» (у меня Google Chrome, в других браузерах может называться чуть по-другому).
После этого начните удалять строки нажатием кнопки Delete до тех пор, пока окно чата не будет полностью удалено со страницы. Как только ненужный вам элемент удален, можно делать скриншот.
Лайфхак №2. Как убрать ненужный элемент в готовом скриншоте
Если вы сделали скриншот и видите там элементы, которые вам не нужны, их можно удалить следующими способами:
1. Программа Paint
Если фон однотонный, то здесь все просто. Выделяем нужную область и жмем Delete.
Если после этого остается белая область, ее нужно залить фоновым цветом. Для этого берем пипеткой нужный цвет, выбираем инструмент «Заливка» и кликаем по белой области.
2. Snapseed
Если цвет фона не однотонный, то «Пеинта» будет уже недостаточно. В этом случае можно использовать «Фотошоп» или, как более простой вариант, приложение Snapseed.
Правда, этот вариант не для нетерпеливых.
Откройте приложение и нажмите в нем «+». Выберите необходимое фото. У меня оно будет таким.
После выберите на вкладке инструменты «Точечно».
Проведите по льдине.
Раз, и ее больше нет =)
Если нужно удалить более сложные объекты, то придется работать с инструментом достаточно долго и эффект будет далек от идеального.
Я поделилась с вами инструментами и методами, которыми я пользуюсь в своей работе. Быть может, вы знаете какие-то более удобные способы. Если это так, поделитесь ими в комментариях. Я буду вам очень признательна =)
В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров
