Приёмы создания скриншотов

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

Как создать и редактировать скриншот

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

print screen

В настоящее время в интернете появилось очень много подобных программ, начиная от каких-нибудь частных проектов вроде Screen Run, заканчивая достаточно большими коммерческими проектами с постоянно работающей тех поддержкой и огромным количеством функций, например bandicam. Но пожалуй самым популярным способом для получения снимка экрана являются стандартные средства Windows: кнопка print screen для создания скриншота всего рабочего пространства и alt + print screen для снимка определённого окна. Основной плюс создания скриншотов подобным образом, это возможность вставить полученное изображение прямо в любой графический редактор и сразу приступить к обработке.

Photoshop

Раз я уже начал рассказывать про графические редакторы, то продолжу эту тему. По моему интернете просто тьма подобных программ, все я перечислять не буду, просто скажу что самым лучшим графическим редактором я считаю Adobe Photoshop. Если у вас нет такой программы, то купите на него подписку или скачайте бесплатно на любом из torrent сайтов, использовать лицензию или пользоваться пиратским софтом, это уже ваше решение. И так, вернёмся непосредственно к теме, я использую Adobe Photoshop CS6 и он полностью меня устраивает. В данной программе есть не только инструменты для обработки фотографий, но и удобные решения для работы с графикой, в том числе и векторной.

Приёмы создания скриншотов

Пожалуй на этом я закончу рассказ про средства получения и обработки скриншотов и преступлю непосредственно к описанию интересных способов представления снимков экрана пользователю. И так, как я уже говорил, для получения скриншота я буду использовать клавишу print screen, а для его обработки программу Adobe Photoshop.

Размытие фона

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

Скриншот

После, при помощи сочетаний клавиш ctrl+c и ctr+v копируем и вставляем выделенную область, при этом выделение сбрасывать не нужно. Поле проведения данных манипуляций, выбираем фоновый слой и делаем его размытым. Для этого нужно зайти во вкладку «Фильтры» и перейти по такому пути: размытие-размытие по гауссу. После этого появится окно с настройками, выберите желаемый порог размытия и нажмите ок.

4

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

Увеличение

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

увеличение

Для создания подобного эффекта, скопируйте весь скриншот на новую рабочую область а на оригинальную версию скриншота «повесьте» фильтр размытия. После этого перейдите на скопированное изображение и немного увеличьте его воспользовавшись инструментом размера изображения который вызывается при  помощи сочетания  Alt+ctrl+I.

Овальная область

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

6

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

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

В завершении, для того что бы вы 100% поняли как создавать подобные скриншоты я прикреплю видео на эту тему. До новых встреч, подписывайтесь на страницу В контакте и rss ленту.

комментариев 29 Добавить комментарий

  • Спасибо за полезную информацию. И с 1днем зимы. Приглашаю поучаствовать в конкурсе.

    • Спасибо за поздравление, вас тоже! Обязательно приму участие в конкурсе!

  • Очень понравился приём размытия скриншота, чтобы важная область выделялась!
    А красиво получились гирлянды! Мне нравится! Это по уроку Влада или что то ещё от себя добавил?

  • Я уже точно не помню на каком сайте их нашел, это было еще перед началом этого года. 🙂
    На выходных напишу статью, в ней расскажу про установку такой гирлянды и не только.

    • Нет, квадратами это когда отключаю защиту отсутствующих глифов, а так в принципе полностью не меняет!

    • Хм, интересно. Может просто шрифты русский не поддерживают. Попробуй к примеру переключиться на «comic sans ms».

  • Привет! У меня к тебе вопрос на счет фотошопа: шрифты не меняются (только на английском). Как настроить? Уже много читал информации, но помощи так и не увидел…

    • А как не меняются? Становятся квадратами, или даже не переключаются?

    • Такой поддерживает! А как сделать нормально — раньше стоял фотошоп, вроде все работало! А теперь только английский меняет, ну и символы конечно!
      Третий стоял, теперь 6 поставил, а толку ноль!

    • У меня тоже шестой. Нужно просто поискать в интернете русские шрифты, видел хороший пост в блоге у ТОхи, вот ссылка (onjee.ru/nabor-russkix-shriftov)

    • Кстати, с апом PR! Вижу +1 дали)

    • Ладно спасибо, буду разбираться! Спасибо(еще раз), я даже не видел! И Агс пропал, еще вчера говорят! Если бы ты про Pr не сказал, так бы и не узнал наверное:) Я про все это забыл и просто писал статьи, вообщем надо пост писать: из Агс за неделю, думаю интересно будет!

  • Буду с нетерпением ждать новый пост, для меня эта проблема уже как три дня актуальна. 🙂

    • Твой тоже под Агс, на xtool смотрел? А я еще думал, у тебя вроде посещаемость побольше была! А как ты 10 тиц получил, есть статья на данную тему? Или это все регистрация по каталогам и комментирование dofollow блогов?

    • Тиц 10 я получил ещё давно, просто прошелся по dofollow блогам (36 ссылок с хороших тематических блогов), и ещё помогло попасть в топ на сервисе surfbird (~1500 человек в день была, и ссылки соответственно).

    • 1500- это твоя посещаемость была?

    • Ага, целый месяц держалась, ну а потом за несколько месяцев спала. Помню даже на рекламе около 1000 руб заработал!)

    • Неплохо, даже очень!

    • surfingbird.ru — этот сервис?(у меня с этого трафика не было, когда-то использовал…)

    • Да, у них такая политика «Всё или ничего». Если опубликовать интересную новость (желательно развлекательного характера), то при добавлении её в избранное пользователями просмотры будут расти как снежный ком, пока она постепенно не затеряется среди остальных. Лично у меня попала вот эта статья: (http://iblogis.ru/sekretyi-google.html) и держалась она примерно месяц.

  • На тему скриншотов могу ещё посоветовать плагин для хрома Webpage Screenshot Capture.
    Он позволяет сделать скриншот всего сайта целиком. Нужно иногда использовать, когда сайт не влазит в экран.

    • Как раз он у меня и стоит, пользуюсь им только для создания скриншотов всей страницы.

  • Вот реально полезная информация! У меня вечно проблемы с этими скриншотами.

  • Что за песня?

    • Брал её на сайте музыки с открытой лицензией для YouTube, постараюсь найти…

  • Понятно, спасибо!
    Я даже не знал, что есть такой специальный сайт!

    • Вот и идея для новой статьи! 🙂
      А песня Uniform Motion — Crowns And Wishes. Скачать её можно по ссылке ниже, она под номером два:
      jamendo.com/en/list/a122389/the-magic-empire

  • Да неплохая тема:) Спасибо за уделенное время!

    • Всегда пожалуйста!

Оставить комментарий