Life-crazy.ru | Опыт и знания
путешествуют сквозь время!

Делаем уникальные картинки для сайта, повышаем узнаваемость своего ресурса

Приветствую, дорогие друзья и читатели блога life-crazy.ru. Стали на почту поступать вопросы, как сделана у меня первая картинка, там, где лошадь лежит и идет текст. Чтобы понятней было, вот она:

Картинки для сайта

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

Для примера, чтобы впустую не выполнять работу, я переделаю такой демотиватор для своего второго сайта – life-another.ru.

Картинки для сайта – подготовка, настройка, реализация

Итак, перед тем, как приступать к работе в фотошопе, нам нужно подготовить материал. Материал – это и есть картинки для сайта. Брать их будем в сети интернет и приступим к работе с нижнего слоя.

Нижний слой – будет являться фоном. Лично я его взял просто из поиска. Если память не изменяет, то в поисковой системе Google. Я открыл строку поиска и ввел «фон».

fon-dem

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

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

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

Не знаю как с ассоциацией, но такая мне понравилась, я нажимаю правой кнопкой мыши и выбираю «сохранить изображение как» — это для браузера Mozilla, сохраняю ее на пк.

save-fon

Затем, я открываю ее на редактирование в Adobe Photoshop, пкм на картинке:

редактирование

После, сразу нужно подогнать размеры для фона.

размер изображения

У меня это 620 по ширине, и 388 пикселей по высоте.

размер фона

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

прямоугольник

Смотрите скрин.

фон с рамкой

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

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

тень для картинки

Слева в меню выбираю пункт «тень» и в блоке «структура» задаю такие параметры:

Режим наложения: умножение;
Непрозрачность: 54%;
Угол: 90 градусов, глобальное освещение;
Смещение: 2 пикселя;
Размах: 38%;
Размер: 13 пикселей.

Затем, сразу же перехожу в раздел «внешнее свечение» и задаю такие настройки (см. на фото):

внешнее свечение

В итоге получилась такая картинка:

готовое на половину

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

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

Переходим в слои и снимаем замочек двойным кликом лкм по слою, жмем ок.

разблокировать слой

Снова нажимаем два раза на слое, открываются его стили, ищем раздел «внутренние свечение» и задавайте настройки на свой вкус. У меня они выглядят следующим образом (см. фото).

настройки внутр. свечение

Получилась такая картинка для сайта, но это еще не конец. Обратите внимание на края, они теперь светлые с небольшим свечением.

внутренее свечение ок

Затем, мне нужно обозначить, что это моя картинка, то есть прописать на ней адрес сайта. На панели я выбираю инструмент «текст» и прописываю адрес сайта – life-another.ru.

настройка текста

1.    Выбираю инструмент «текст»

2.    Задаю шрифт, шрифты можно скачать с этого сайта.

3.    Выбираю более подходящий размер, в конце подгоняю до нужного.

4.    Выбираю цвет текста

5.    Пишу сам текст

6.    Придаю стили. Стили можно скачать по этой ссылке – их около 1300.

Также придам прозрачность тексту. Делается также очень просто. Выбираю слой с текстом (1). Ползунком двигаю до нужного результата (2). Получаю конечный результат (3).

прозрачность фона

Вот такая картинка для сайта, будет заготовкой, сохраняйте ее в формате .psd. Нажимаем файл – сохранить – даем название — указываем куда сохранять.

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

с логотипом

Вот и все, уникальная картинка для сайта готовая. Теперь вы еще на один шаг от других блоггеров клонов.

Если у вас остались вопросы или предложения, вписывайте их в комментарии.

Вы также можете подписаться на обновления блога и получать свежие статьи к себе на e-mail.

Вообще крутяк — лучшие...

С уважением, Михед Александр.

Вы можете почитать лучшие посты моего блога в содержании. Чтобы получать анонсы к себе на почту, воспользуйтесь формой подписки ниже (достаточно ввести свой e-mail адрес и имя. Если письмо не пришло в течении 2-х минут, проверьте папку "СПАМ" в почтовом ящике). Если Вам понравилась статья, поделитесь нею с друзьями! Социальные кнопки ниже.
Да, Я Хочу Всегда Быть
В Курсе Новых Событий На Сайте!
Подпишитесь прямо сейчас, и получайте свежую информацию на свой E-Mail:
Ваш E-Mail в безопасности*
Комментарии
  1. Илья  |  12.06.2013 в 12:30  |  Цитировать

    Александр, Отлично! Я как раз хотел сделать новый дизайн для демотиватора к своим статьям, а тут такая подробная инструкция.  *DRINK*

    Ответить
    • Михед Александр  |  12.06.2013 в 18:12  |  Цитировать

      в ожидании результатов))

      Ответить
      • Илья  |  13.06.2013 в 15:22  |  Цитировать

        Готово, зацените! 

        Ответить
        • Михед Александр  |  14.06.2013 в 07:40  |  Цитировать

          Отлично, мне понравилось 😉

          Ответить
  2. Валерий  |  12.06.2013 в 20:31  |  Цитировать

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

    Заходите в гости и участвуйте в конкурсе. Желаю Удачи! =)

    Ответить
    • Михед Александр  |  12.06.2013 в 20:52  |  Цитировать

      Приветствую Валерий у себя на блоге. Если делать по инструкции, даже самый не знающий разберется. Спасибо, загляну, успехов и процветания 😉

      Ответить
      • Антон Куклинский  |  15.06.2013 в 05:01  |  Цитировать

        Согласен с Сашей, Photoshop не так страшен, как его малюют. Я тоже раньше думал, что он мне неподвластен. А сейчас при желании любой объект могу самостоятельно сваять.

        Ответить
  3. Николай  |  12.06.2013 в 21:26  |  Цитировать

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

    Ответить
    • Михед Александр  |  14.06.2013 в 07:37  |  Цитировать

      Если есть желание, могу поделится обалденным курсом по фотошопу 😉

      Ответить
  4. Леонид  |  13.06.2013 в 06:47  |  Цитировать

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

    Ответить
    • Михед Александр  |  14.06.2013 в 07:38  |  Цитировать

      Прога шикарная, сам использую ее только на 15%, всех функций не знаю, курсы лежат, как говорится «Руки не доходят сделать».

      Ответить
  5. Александр Дубровченко  |  13.06.2013 в 10:25  |  Цитировать

    Хорошая инструкция по создания демотиватора для блога, как раз новичкам буде кстати! А в фотошопе надо учиться работать со слоями, тогда все будет гораздо проще воспримиматься.

    Ответить
    • Михед Александр  |  14.06.2013 в 07:39  |  Цитировать

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

      Ответить
  6. Антон Куклинский  |  15.06.2013 в 05:05  |  Цитировать

    Отличная инструкция, Саша! Будет полезна очень многим начинающим блоггерам! 

    Единственное, что хотел поправить: существуют как мотиваторы (синего цвета), так и демотиваторы (черного цвета). Блоггерам как раз актуальнее делать мотиваторы, т.е. картинки, мотивирующие людей читать статьи и принимать какие-то действия.

    Ответить
  7. Юрий  |  15.06.2013 в 11:57  |  Цитировать

    Я тоже что-то сделал, не знаю понравиться людям  или нет. За цените АЛЕКСАНДР

     

    Ответить
    • Михед Александр  |  15.06.2013 в 16:43  |  Цитировать

      Отлично получилось, лучше чем было однозначно))) Вот только в белое поле, там где картинки, лучше вставлять их в формате png или с белым фоном, или придавать картинке эффектов. Чтобы не так грубо смотрелось.

      Ответить
  8. Юрий  |  16.06.2013 в 00:13  |  Цитировать

    ок, я фотошопом плохо владею, но буду учиться 😉

    Ответить
  9. Владимир  |  18.06.2013 в 03:09  |  Цитировать

    А поделитесь курсами, а то пейнт — это уже не в какие ворота. Спасибо.

    Ответить
    • Михед Александр  |  18.06.2013 в 06:21  |  Цитировать

      Приветствую Владимир, окей, сегодня вечером скину.

      Ответить
  10. Анна  |  20.06.2013 в 19:48  |  Цитировать

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

    Ответить
    • Михед Александр  |  21.06.2013 в 06:29  |  Цитировать

      Спасибо Анна, будут вопросы, задавайте, с радостью помогу 😉

      Ответить
  11. Сергей Гвоздев Дед  |  24.12.2013 в 12:48  |  Цитировать

    Классная статья. Кропотливый труд. Спасибо!

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

up