Здравствуйте дорогие читатели блога «Создание и продвижение сайта». Сегодня я расскажу вам о том, как сделать в фотошопе рамку для картинок, вставляемых в начале статьи. Наверное, вы не раз замечали, что на многих блогах в начале статьи стоит картинка в оригинальной рамке, с названием и адресом сайта. И такая рамка является брендом блога, её лицом, наравне с логотипом. Так давайте сделаем такую рамку в фотошопе, для блога, и потом вам нужно будет только вставить в неё, любую картинку по теме статьи.
Ну что же – приступим к созданию оригинальной брендовой рамки. Для начала, вам нужно определиться с размерами будущей рамки. Размер зависит от ширины колонки для записей. Можно сделать рамку во всю ширину, можно меньше, но нельзя делать рамку больше ширины колонки.
И ещё один шаг. Вам нужно будет скачать фон будущей рамки. Фон должен быть бесшовным, однотонным и подходить по цвету к теме вашего сайта. Набирайте в поисковик запрос: «бесшовные однотонные фоны», и выбирайте тот, какой вам подходит. Обычно такие фоны маленького размера, примерно 100 на 100 пикселей, или 200 на 200.
Скачиваете фон на компьютер, открываете в фотошопе. Далее идёте во вкладку «редактирование», жмете «Определить узор». В открывшемся окне жмём – «Ок». Всё фон сохранён в библиотеке фотошопа. Можно закрывать фон, и приступать к созданию рамки.
Как сделать рамку в фотошопе для картинок, размещаемых в статьях сайта.
Создаём новый документ – «Файл» — «создать». В открывшемся окне пишите название документа, например – «рамка». Проставляете нужную ширину и высоту. Я установила значения 650 пикселей в ширину, и 350 – в высоту. Разрешение документа – 72 пикселя, это наиболее оптимальное разрешение для публикации изображений в интернете. Режим – RGB. Цвет – любой, при создании нашей рамки мы будем заливать всё установленным фоном. Жмём – «Ок».
Устанавливаем новые направляющие на расстоянии 30 пикселей от края документа. Для этого открываем вкладку «просмотр» — «новая направляющая», в отрывшемся окошке ставим значение – 30, и галочку – «вертикальная», жмём – «ок». Опять повторяем то же самое, только уже ставим значение 620 – «ок». Далее так же создаём две новые направляющие — горизонтальные, со значениями 30 и 320 пикселей.
Берём инструмент прямоугольное выделение. И выделяем область отмеченную направляющими линиями. Инвертируем выделение, «выделение» — «инверсия», или нажав клавиши «Shift» + «Ctrl» + «I». Далее – «Слои» — «новый» — «Скопировать на новый слой» или «Ctrl»+ «J» на клавиатуре . «Просмотр» — «удалить направляющие». Теперь у нас на левой панели в вкладке «Слои» образовалось два слоя, слой фон, и слой с рамкой. Возвращаемся на слой фон, выделяем его нажав кнопкой мыши.
Рамочка почти готова, осталось сделать уголочки. «Просмотр» — «новая направляющая» — «горизонтальная» — расстояние 60 пикселей. Инструментом «прямоугольное выделение», выделяем уголок примерно 400 пикселей. Инструментом «прямолинейное лассо» выделяем край уголка под углом 45 градусов. Удаляем кнопкой «Delete» на клавиатуре.
Далее – «слои» — «Новый» — «скопировать на новый слой» или «Ctrl»+ «J». «Просмотр» — «удалить направляющие». Создаём дубликат слоя с уголком – «слои» — «создать дубликат слоя». «Редактирование» — «трансформирование» — «отразить по горизонтали». Снова – «редактирование» — «трансформирование» — «отразить по вертикали». Берём инструмент «перемещение» и перетаскиваем уголок вниз вправо. Удаляем слой с фоном, а три оставшихся слоя объединяем – «Ctrl»+ «E».
Нажимаем клавишу – «Ctrl» и кликаем по иконке слоя, рамка выделяется. «Редактирование» — «выполнить заливку», в окне напротив «использовать» жмём треугольник, и выбираем – «регулярный». Далее напротив «заказной узор» — выбираете загруженный узор — «ок». Рамка заливается выбранным узором.
Для придания объёмности пройдёмся по краям рамки инструментом – «затемнитель». Берём мягкую кисть, ставим экспонир. – 30. Зажав клавишу – «Shift» кликаем по углам рамки так, чтобы затемнялся небольшой край рамочки. Размер кисточки регулируем с помощью квадратных скобок на клавиатуре. Обработав края затемнителем, берём инструмент осветлитель, кисть мягкая, экспонир. – 26%. Осветляем центр рамки, отменяем выделение – «Ctrl»+ «D».
Всё рамка готова, осталось перенести на рамку логотип, и подписать. Берём инструмент – «Текст» — устанавливаем нужный цвет. Если рамка тёмная, то подписывать лучше белым или жёлтым цветом, если фон рамки светлый, то выбираем тёмный цвет. Размер текста примерно 12 — 14 пикселей. Всё зависит от того, каким шрифтом вы будете писать. Размер, цвет и шрифт можно менять, предварительно выделив надпись.
Внизу пишем адрес блога и ваше имя. Например, я подписала рамку: «блог Баталовой Ирины». Цвет выбрала зелёный, размер 14 пикселей, шрифт – MonotypeCorsiva. С помощью инструмента «перемещение» устанавливаем текст в нужном месте. «Слои» — «растрировать текст». «Слои» — «создать дубликат слоя».
Нижний слой с текстом я решила сделать белым, для того, что бы он красивее смотрелся. Зажимаем клавишу «Ctrl», и кликаем по второй иконке слоя с текстом. Текст выделился, устанавливаем белый цвет – (ffffff), «редактирование» — «выполнить заливку» — «основной цвет» — «ок» — отменяем выделение – «Ctrl»+ «D». Берём инструмент перемещение, и стрелками на клавиатуре нажимаем один раз вниз, и один раз вправо.
Кликаем по верхнему слою с текстом два раза, в открывшемся окне выбираем «тень», снимаем галочку с «глобальное освещение», ставим угол 90 градусов, меняем цвет. Цвет тени должен быть немного темнее цвета фона рамки.
По такому же принципу делаем надпись вверху рамки. Я написала часть названия блога: «От чайника до профи». Потому что длинное название просто не вместилось бы. Я ещё сделала отражение надписи, как это сделать посмотрите в видео ролике, но это не обязательно.
Осталось дело за малым – разместить на рамочке логотип. Открываете в фотошоп картинку с вашим логотипом, и переносите её на рамку. Я для этого зажимаю клавишу – «Alt» и перетаскиваю изображение мышкой. На панели должен быть выбран инструмент «перемещение». Далее – «редактирование» — «трансформирование» — «масштабирование». Устанавливаем нужный масштаб, и размещаем логотип там, где вы задумали.
Вы можете подписать и украсить рамку так, как вам подсказывает фантазия, я лишь рассказала вам принцип создания рамочки, а вам решать, как она должна выглядеть, и какой она станет. Я ведь, так же как и вы, училась и делала всё методом «научного тыка»! Вот результат моей работы.
А эту же рамку, но уже с картинкой, посмотрите в начале урока. Готовую рамочку сохраняем в формате – «PNG». Это будет ваш шаблон. Теперь при написании статьи, вы подыскиваете подходящую по смыслу картинку, вставляете её в заготовленную рамку, и сохраняете «сохранить для Web» в формате «JPEG». И публикуете её в начале статьи.
Напишите в комментариях ваше мнение о рамке, с удовольствием выслушаю ваши замечания и советы, не обижаюсь на конструктивную критику, так как она помогает двигаться вперёд, и работать над ошибками. Вот вы и узнали, как сделать рамку в фотошопе.
Скачать исходники, для создания своей рамочки, можно по ссылке — https://cloud.mail.ru/public/2300ab1f30f3%2F%D1%80%D0%B0%D0%BC%D0%BA%D0%B01.psd с облака Майл.ру
Посмотрите урок, как сделать рамку в фотошопе, в видео формате. У меня создание рамочки заняло чуть более десяти минут. Больше времени ушло на описание данного процесса. Приятного просмотра.
Полезный урок, Ирина! Я как раз задумывался о том, чтобы уникализировать картинки и потом только публиковать)))
@Азик, я буду рада помочь тебе в создании собственной рамки для картинок. Обращайся, если что. Я понимаю, что у тебя нехватка времени. ➡
Клевая рамочка, только картинку в нее также в фотошопе вставлять?
Да, Олеся, и картинка вставляется в фотошопе. Это совсем просто. Я опишу как это сделать в следующей статье.
@Ирина, Спасибо,жду следующую статью
@Олеся Сазонова, хорошо, я потороплюсь! 😉
Ирина, прочитала все, посмотрела видео. законспектировала . Но надо сесть и попробовать. Короче, провела на твоем блоге больше 40 минут. Но еще вернусь. Буду по ходу пробовать и смотреть. С первого раза кажется сложно, столько всего!
Я читала немного по-другому, как делать рамку, попроще, без уголков. но у тебя красиво получается. Дело в том, что я пробовала делать по-другому, но не смогла потом в нее картинки вставить.
А вот логотипа блога у меня нет. если его придумать, то как в шапку сайта вставлять? Через файл шапки?
Короче, я еще тот чайник. Надо со всем этим разобраться обязательно.
@Ольга, Вставить логотип — не проблема. Труднее найти его. У тебя тема блога такая, что логотип можно вставить хоть в шапку, хоть сбоку рядом с шапкой, можно даже на сам фон блога. Найдёшь картинку, я помогу её вставить. Да и с рамочкой могу помочь, если у тебя не получится. Ты попробуй сделать, это только на первый взгляд кажется сложно, если не выйдет, то скажи, я тебе сделаю. ➡
Ира, уже разберусь потом. Сейчас работаю уже, когда времени побольше будет. Мне надо скачать нормальный фотошоп.
@Ольга, фотошоп могу дать свой, если нужно, скажи, отправлю ссылку на почту. 💡
Ирина, зашла сказать, что буду участвовать в марафоне. Спасибо, что не забыла обо мне.
@Светлана, хорошо, записала! 😉
Здравствуй, Ирина!
А я картинки в Ворде уникализирую, картинку вставляю, надпись делаю, скрин SSmaker делаю, и всё-готово! Не красиво правда. Говорила мама- хороший из меня маляр получится.
Увидел, как вы уникализируете картинку, решил попробовать сам. У вас всё красиво получается, я второй год такую рамочку мечтаю создать. Всю статью у вас перечитал, видео посмотрел. Раз 20 делаю, ну никак… Не судьба… ❓
Хорошая статья для того, кто умеет работать в фотошопе, а я его боюсь. Лучше дальше ваши статьи почитаю, нравятся!
Андрей, это не сложно, глаза боятся, а руки делают. В работе с фотошопом главное — внимание. Нужно внимательно делать все описанные действия, ничего не пропуская. Пропустив хоть один шаг — ничего не выйдет.
@Ирина, руки делают. Переставил фотошоп, дела пошли, но уголке под 45 градусов, опять надолго завис.С дубликатами слоёв непонятка, ничего не хочет редактироваться. Завтра продолжу 🙂
@Андрей, хорошо, попробуй завтра ещё раз. Напиши, получилось или нет. Что будет не понятно, спрашивай, я обязательно объясню. Может быть у меня не всё понятно описано, тогда я постараюсь дописать понятнее.
@Ирина, С помощью соседа- студента всё получилось. Ему было всё понятно в описании. А я не понимал окончания действий и перехода к новым. Нужны элементарные знания по Фотошопу. Будем учиться, учиться…Шаблон картинки, почти как у тебя, мне очень нравится 🙄
Отлично, Андрей! Я рада за вас, хорошо, когда рядом есть такие соседи! А фотошоп осваивать нужно обязательно! Без него трудно будет работать в интернете. Хотя бы элементарные навыки владения фотошопом должны быть.
Ира, мне твоя рамка нравится, смотрится интересно. Немного только верхняя надпись сливается (хотя это под каким ракурсом смотреть). Я вот тоже сделала себе шаблончик, но у меня все гораздо проще. Я в фотошопе еще чайник, хотя уже немного начавший нагреваться 🙂 Надо попробовать что-то замутить типа твоего.
@Нина Жуперина, совсем ты не «чайник», не стоит скромничать. А верхнюю надпись, ты права, нужно было сделать другим цветом. 😉
Для меня это «темный лес». Ни как не пойму, как пользоваться фотошопом 🙁 у меня стоит «заводской» (при покупки ПК установили) фотошоп, но он какой то не такой, в нем я умею только вырезать элементы с картинок.
Ну раз вырезать умеете, то и остальному не сложно будет научиться. А фотошоп постоянно обновляется, и сама программа и её дизайн, так что они в целом похожи ( по принципу работы), а по дизайну и некоторым действиям могут быть различия. У меня был сначала третий, потом пятый, а сейчас стоит шестёрка. Но я слышала, что уже есть седьмая и скоро будет восьмая версия программы.
@Ирина, у меня Adobe pse9 и что та даже ретуши в нем не нашел.
@Иван, о какой ретуши вы говорите? Я вроде бы ни о чём таком не писала. Ретушь портрета (то есть удаление дефектов) делается целым рядом инструментов, такими как: восстанавливающая кисть, заплатка, точечная восстанавливающая кисть, и др. А эти инструменты в вашем фотошопе есть.
@Ирина, пробовал фотошоп онлайн и там была кнопочка (в виде кисточки) которая называлась «ретушь». В своем фотошопе ничего из перечисленного не нашел.
Странно, эти инструменты есть во всех версиях фотошопа. Вот бы скрин вашего фотошопа посмотреть.
@Ирина, извиняюсь за поздний ответ. Вот ссылка на скриншет этого фотошопа https://yadi.sk/i/23a042kybPZAw .
Иван, есть конечно разница в рабочей среде, но набор инструментов в принципе такой же. Названия инструментов могут немного отличаться. У вас фотошоп, судя по всему более автоматизированный. Во вкладке окно вы можете настроить рабочую среду под себя, поставить или убрать галочки. Например поставите галочку против — слои, появится окно со слоями. Это вам нужно просто поэкспериментировать. А если у вас справка на русском, то вы сможете прочесть какой инструмент выполняет нужные вам функции. Это вам нужно посидеть, и разобраться в вашей программе.
Ирочка, ты мастерица, наверное, я к тебе за рамочкой попозже приду. Ох, наверное совсем скоро твоей заказчицей стану, сама, понимаешь, никак не смогу с фотошопом работать, хотела мужа к этому ремеслу приобщить, но он не хочет, у него другие интересы. А, как говориться, сердцу не прикажешь, насильно мил не будешь. Эх, мне бы зрение прежние, я бы порисовала!
@Татьяна Суркова, хорошо, договорились, сделаю вам индивидуальную рамочку! ➡
Рамочка для блога получилась замечательная. Вот только не понимаю (уже не первую статью читаю) почему вы не прилагаете PSD исходник по описанному уроку? Так же намного удобнее читателям работать, да и поможет тем, кто не хочет вникать в тонкости, а жаждет только результата.
Спасибо, за подсказку. Я недавно стала писать уроки по фотошопу, поэтому и такой промах допустила. Обязательно добавлю исходники. ➡
@Ирина, не вы одни таки — я общаюсь на многих блогах и не понимаю почему многие авторы пишут классные руководства, но не прилагают исходников. Это почти то же, что я написал бы плагин для WP, описал как он создается — а плагин сам по себе не предоставил — тем самим людям пришлось бы листать 100500 страничек блога (образно говорю) и придумывать, как бы это слепить все части инструкций в одно… А это ведь все время…
Мне к вам никаких претензий нет — я просто оставил замечание, ведь вы будете писать в дальнейшем хорошие посты, и отрабатывать их (без этого сложно написать пост, пока сам не сделаешь) — так вот сможете присоединять ссылку на скачивание, и ваши читатели будут вам благодарны!
@Юрий Йосифович, всё, ссылку на исходник оставила, можно скачивать. Я добавила две готовых рамки в исходник, осталось только поменять названия на свои. 💡
@Ирина, вот, за это спасибо большое — 2.3МБ улетело на компьютер в одну секунду. Если бы вы давали латинское название файлу — то вид ссылки был бы более удобочитаемым (это не важно, но более красиво).
@Юрий Йосифович, учту, сама этому всех учу в статьях, и так опростоволосилась, ужас! 😯 🙄
Когда вижу рамочки на картинках, тоже хочется что-то себе подобное смастерить. Но посмотрю у себя на сайте и какие-то сомнения,нужны ли они для моего блога?
Я себе тоже заготовила готовый шаблон, точнее рамку, с логотипом, с названием домена.) Потом берешь картинку и вставляешь в белую часть, у меня тоже белая была просто.) Сейчас пока я вообще такие картинки не делаю, у меня в начале статьи стоят миниатюрные картинки. Можете переделаю потом, все таки картинки в рамочках эффектно смотрятся.)
@Диана, толку заготавливать себе рамочки к картинкам, если создание блога приостановлено, Диана?
Ура,сделала рамку по вашей статье. Наконец-то фотошоп начал мне покоряться 😮
Олеся, от души поздравляю! Самые трудные шаги — первые, а дальше будет легче!
Интересная и полезная статья. Жалко только, что я с фотошопом пока на ВЫ и по имени-отчеству. Но в планах — мое с ним знакомство. Ведь с фотошопом открываются широкие возможности в оформлении, и не только блога.
Да, в нашей работе знания фотошопа нужны. Так что осваивайте эту чудесную программу. Как говорят: «Глаза боятся, а руки делают!»
Александр, я тоже с фотошопом не дружу, но как делать рамки немного разобрался. Я думаю и Вас получится.
Отличное видео.Красивая рамка получилась.
Игорь, рамки делать не сложно, можно сделать любую по желанию, и подходящую к дизайну сайта.
@Ирина Баталова, Да у меня есть один шаблон,по нему делаю,просто хочу что то свое придумать,оригинальное.
Я тоже использую рамку для картинок на своём сайте, но у меня она более простая.
Ничего Александр,освоете фотошоп,сделаете лучше.
Игорь, я тоже на это надеюсь, но пока меня и такая рамка устраивает.
А видео скачаю себе на компьютер. Я рамки научился делать по совету Борисова.
Дак это получается рамка под конкретного размера изображение, а если со временем я изменю размеры всех картинок, или все картинки у меня разного разрешения?
Размеры рамки можно менять так же, как и размеры картинок. Вы можете создать оригинальную рамку для блога любого размера.
Так это сейчас не проблема.Все можно изменить и подогнать.
Есть множество программ для этого.