Приветствую, дорогие друзья и читатели блога life-crazy.ru. Стали на почту поступать вопросы, как сделана у меня первая картинка, там, где лошадь лежит и идет текст. Чтобы понятней было, вот она:
Картинку сделал в программе фотошоп, и сейчас поделюсь информацией как именно. Вам не нужно быть асом в нем, достаточно повторить те же действия, просто картинки заменить своими. Также вы можете посмотреть статью «Что такое скриншот, как сделать скриншот экрана», немного связная тема.
Для примера, чтобы впустую не выполнять работу, я переделаю такой демотиватор для своего второго сайта – life-another.ru.
Итак, перед тем, как приступать к работе в фотошопе, нам нужно подготовить материал. Материал – это и есть картинки для сайта. Брать их будем в сети интернет и приступим к работе с нижнего слоя.
Нижний слой – будет являться фоном. Лично я его взял просто из поиска. Если память не изменяет, то в поисковой системе Google. Я открыл строку поиска и ввел «фон».
Перешел по первой ссылке и начал выбирать. Найдя подходящую картинку, я открыл ее на всю страницу.
Рекомендация. Подбирайте фоновое изображение в светлых тонах, темные не смотрятся. Ваш блог должен приносить радость, быть светлым, а не в похоронных цветах.
Тема блога – здоровый образ жизни, поэтому я и выбираю картинку, которая хоть чуток будет ассоциироваться с ним.
Не знаю как с ассоциацией, но такая мне понравилась, я нажимаю правой кнопкой мыши и выбираю «сохранить изображение как» — это для браузера Mozilla, сохраняю ее на пк.
Затем, я открываю ее на редактирование в 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.
Вообще крутяк — лучшие...
С уважением, Михед Александр.
В данном топике описан процесс создания и управления большим количеством аккаунтов (или stealth ферма), предназначенных…
Ключевая задача антидетект браузера - обеспечить пользователя функционалом, позволяющим выглядеть в глазах поисковых и антифрод…
С каждым годом партнерская программа растёт и развивается! Следуя этой тенденции, Gagarin с гордостью представляет…
В сегодняшних реалиях 2022 года, особенно в условиях глобальных санкций, любому арбитражнику, вебмастеру и просто…
В 2021 году партнерская сеть Profitov.partners стартовала в паблике. До этого проект уже имел возможность…
Решил немного отвлечься от создания и продвижения сайтов и создать шутливое приложение - пердуня. (далее…)
View Comments
Александр, Отлично! Я как раз хотел сделать новый дизайн для демотиватора к своим статьям, а тут такая подробная инструкция. *DRINK*
в ожидании результатов))
Готово, зацените!
Отлично, мне понравилось ;)
Фотошопом к сожалению владею плохо. А в программе Пойнт нет достаточно хороших инструментов для того, чтобы сделать приличную рамку. Я делал, но не очень хорошо смотрится. Надо что-то переделать.
Заходите в гости и участвуйте в конкурсе. Желаю Удачи! =)
Приветствую Валерий у себя на блоге. Если делать по инструкции, даже самый не знающий разберется. Спасибо, загляну, успехов и процветания ;)
Согласен с Сашей, Photoshop не так страшен, как его малюют. Я тоже раньше думал, что он мне неподвластен. А сейчас при желании любой объект могу самостоятельно сваять.
Спасибо за подробное описание процедуры создания базовой картинки для статей. Фотошоп без практики не работает, все просто вроде бы, а даже элементарные вещи в начале создают неимоверные трудности. Когда попрактикуешься, то сразу все ясно и элементарно. Осталось только научиться качественно накладывать одну картинку на другую и будут уникальные фото в статьях... ;)
Если есть желание, могу поделится обалденным курсом по фотошопу ;)
Полезная прога, осталось за самым малым, найти время покопаться в этом.
Прога шикарная, сам использую ее только на 15%, всех функций не знаю, курсы лежат, как говорится "Руки не доходят сделать".
Хорошая инструкция по создания демотиватора для блога, как раз новичкам буде кстати! А в фотошопе надо учиться работать со слоями, тогда все будет гораздо проще воспримиматься.
Точно подметили, нужно учиться работать в фотошопе, хотя бы азы знать.
Отличная инструкция, Саша! Будет полезна очень многим начинающим блоггерам!
Единственное, что хотел поправить: существуют как мотиваторы (синего цвета), так и демотиваторы (черного цвета). Блоггерам как раз актуальнее делать мотиваторы, т.е. картинки, мотивирующие людей читать статьи и принимать какие-то действия.
Я тоже что-то сделал, не знаю понравиться людям или нет. За цените АЛЕКСАНДР
Отлично получилось, лучше чем было однозначно))) Вот только в белое поле, там где картинки, лучше вставлять их в формате png или с белым фоном, или придавать картинке эффектов. Чтобы не так грубо смотрелось.
ок, я фотошопом плохо владею, но буду учиться ;)
А поделитесь курсами, а то пейнт - это уже не в какие ворота. Спасибо.
Приветствую Владимир, окей, сегодня вечером скину.
Демотиваторы классно смотрятся на блогах. С фотошопом я тоже на вы, но если нужно приукрасить картинку, прибегаю к помощи видео. Это очень удобно. С такой подробной инструкцией безусловно также все получится! =)
Спасибо Анна, будут вопросы, задавайте, с радостью помогу ;)