Здравствуйте дорогие читатели блога «Создание и продвижение сайта». Сегодня я расскажу вам о том, как сделать в фотошопе рамку для картинок, вставляемых в начале статьи. Наверное, вы не раз замечали, что на многих блогах в начале статьи стоит картинка в оригинальной рамке, с названием и адресом сайта. И такая рамка является брендом блога, её лицом, наравне с логотипом. Так давайте сделаем такую рамку в фотошопе, для блога, и потом вам нужно будет только вставить в неё, любую картинку по теме статьи.
Ну что же – приступим к созданию оригинальной брендовой рамки. Для начала, вам нужно определиться с размерами будущей рамки. Размер зависит от ширины колонки для записей. Можно сделать рамку во всю ширину, можно меньше, но нельзя делать рамку больше ширины колонки.
И ещё один шаг. Вам нужно будет скачать фон будущей рамки. Фон должен быть бесшовным, однотонным и подходить по цвету к теме вашего сайта. Набирайте в поисковик запрос: «бесшовные однотонные фоны», и выбирайте тот, какой вам подходит. Обычно такие фоны маленького размера, примерно 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 с облака Майл.ру
Посмотрите урок, как сделать рамку в фотошопе, в видео формате. У меня создание рамочки заняло чуть более десяти минут. Больше времени ушло на описание данного процесса. Приятного просмотра.
Загрузка...