Картинки и иконки для сайта на темном фоне

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

В прошлом уроке, который освещает для вас вопрос, что такое html верстка, вы познакомились с этим понятием на практическом примере. А точнее на примере шаблона для моего блога. Я думаю, что урок был полезен вам.

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

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

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

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

  • Способ 1.

Для примера возьмем вот это изображение.

Иконки для сайта

Откроем программу Photoshop и загрузим это изображение. Создайте новый прозрачный слой (Shift+Ctrl+N или СЛОЙ –> НОВЫЙ –> СЛОЙ) поверх слоя с иконками, чтобы мы могли на нем создать иконку для сайта. Этот слой будет служить нам темным фоном. Пока ни чего заливать не надо.

Теперь необходимо разблокировать слой с иконками. Для этого щелкните два раза по слою с иконками левой кнопкой мыши или пройдите в меню СЛОЙ –> НОВЫЙ –> ИЗ ЗАДНЕГО ПЛАНА.

Создание нового слоя в фотошопе

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

Выберите инструмент «Прямоугольное выделение» Прямоугольное выделение в фотошопе и выделите необходимую иконку.

Как разблокировать слой в фотошопе

Теперь иконку необходимо скопировать и поместить на созданный выше слой. Для этого убедитесь, что у вас выбран слой с иконками, перейдите в меню СЛОЙ –> НОВЫЙ –> СКОПИРОВАТЬ НА НОВЫЙ СЛОЙ или нажмите сочетание клавиш Ctrl+J. Выделенная иконка будет скопирована и перемещена на новый слой.

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

Расположение слоев в фотошопе

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

Фоновая заливка в фотошопе

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

Выделение иконки в фотошопе

Нажмите кнопку DELETE на клавиатуре или пройдите в меню РЕДАКТИРОВАНИЕ –> ОЧИСТИТЬ. Снимите выделение комбинацией клавиш Ctrl+D или с помощью меню ВЫДЕЛЕНИЕ –> СНЯТЬ.

Как снять выделение в фотошопе

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

Сохранение иконки в формате PNG

Пройдите в меню ИЗОБРАЖЕНИЕ –> ТРИММИНГ.

Обрезка изображения в фотошопе

Выставьте все параметры так, как показано на рисунке. В итоге вы получите маленькую иконку, которую легко использовать на любом сайте. Сохранить её вы можете в формате PNG-24 с галочкой ПРОЗРАЧНОСТЬ.

  • Способ 2.

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

Загружаем изображение в программу Photoshop. Создаем новый документ размером 50×50. В этом документе заливаем фоновый слой любым темным цветом.

Перейдите на документ с загруженным изображением и выделите его полностью, нажав сочетание клавиш «Ctrl+A» или пройдите в меню ВЫДЕЛЕНИЕ –> ВЫДЕЛИТ ВСЕ. Скопируйте выделенное изображение на новый слой, поверх слоя с фоновым цветом.

Расположение слоев в программе фотошоп

Теперь необходимо продублировать изображение для создания отражения. Пройдите в меню СЛОЙ –> СОЗДАТЬ ДУБЛИКАТ СЛОЯ…

Создание дубликата слоя в фотошопе

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

Перемещение слоев в фотошопе

Опустите продублированное изображение под именем «Слой 1 копия» немного ниже, чем основное изображение, а затем разместите оба изображения так, чтобы они помещались в документе целиком, вот так:

Расположение двух слоев

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

Выберите инструмент «Градиентная заливка».

Инструмент: Градиентная заливка

Выставьте значения градиента «Линейный градиент» — «от черного к белому».

Линейный градиент

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

Активная маска слоя

Произведите заливку сверху вниз, примерно до центра нижней кнопки, как показано на рисунке ниже:

Применение линейного градиента на маске слоя

В итоге, если вы все сделали правильно, то у вас должно получиться следующее:

Создание отражения в фотошопе

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

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 30 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Как сделать картинку прозрачной в Фотошопе
  • Favicon для сайта — как средство привлечения посетителей!
  • Создание шапки для сайта или блога своими руками!
  • Фон для сайта в Photoshop своими руками!
  • Как я делаю красивые изображения к своим постам (видеоурок)
  • Шапка для сайта
  • Иконки социальных сетей для сайта
  • Как сохранить изображение с сайта
  • Стильный фон для сайта (часть 2)
  • Стильный фон для сайта
Читатели оставили 4 комментария к этой статье:
  • Софья04.04.2016 в 02:14

    Интересный урок, где бы еще его применить... ;) Хотя можно сделать какую-либо надпись в тексте яркой, выразительной, или выделить заголовок красивыми буквами! Спасибо за информацию, потихонечку осваиваю фотошоп.

  • Наталья06.04.2016 в 13:43

    По идее такие иконки должны быть хороши при создании сайтов каких-нибудь бизнес-компаний и индивидуальных предпринимателей. Что-то в стиле минимализма. Спасибо за понятную инструкцию.

  • Татьяна06.04.2016 в 19:30

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

  • den114207.04.2016 в 22:27

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

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter