Как сделать картинку для шапки в Paint

Здравствуйте уважаемые начинающие веб- мастера.

Самый простой способ найти картинку для шапки сайта — это сделать её в имеющимся у всех по умолчанию, редакторе — Paint.

Зайдём на обширнейший ресурс картинок “Яндекс картинки” (так и набираем в поисковике), и вводим в поисковике ресурса интересующую нас тему. Я ввел “Океан”. Самое трудное  – выбрать картинку т.к. они все замечательные.

Когда-же выбор сделан, щелкаем по ней чтоб открылась в полный размер (забыл предупредить: размер должен быть более 950х300, он показывается при наведении курсора на картинку), и копируем в Pаint просто нажав клавишу Prt Sc Sys Rd.

Затем открываем Pаint и щёлкаем по иконке “Вставить”. Должна получиться вот такая картина.

Теперь щёлкнем по иконке “выделить” и выделим часть картинки высотой пикселей в 150-180, а шириной пикселей  800-900(количество пикселей выделяемых Вами, показывается в нижней часть окна, ближе к левому краю) и щёлкаем по иконке “обрезать”.

Можно не прибегая к позиционированию css добавить в эту картинку ещё изображение. Давайте вставим сюда акулу.

Идём в Яндекс Картинки, и по запросу «Акула с прозрачным фоном» находим эту картинку. Щёлкаем по  ней правой клавишей и выбираем «Сохранить как..». Затем сохраняем её можно в «Загрузках».

Снова открываем Paint, и внизу иконки «Вставить» нажимаем на треугольник, откроется «Вставить из». Жмём на неё, откроется поисковик и в нём находим загруженный файл с акулой.

Щёлкаем по нему левой потом правой клавишей и в открывшемся меню проходим по «Выбрать». В результате получиться вот такая конструкция

Как видите квадратик у акулы белый, а нам нужен под цвет моря. Справа сверху в панели управления Paint есть иконка «Изменение цветов», щёлкаем по ней и открываем инструмент «Изменение палитры».

Выбираем по нему цвет максимально подходящий к цвету моря, нажимаем «Ок», затем выбираем «Заливка»(ведёрко с краской), наводим курсор на акулу и щёлкаем по ней. Если цвет не попал, снова открываем «Изменение палитры», и подправляем цвет.

Заливку снова открывать не надо, просто наводим курсор на акулу и заливаем подправленный фон. И так до тех пор пока цвет не совпадёт. У меня вот так вышло на пятый раз

Теперь возьмём  «Кисти», выберем средний размер, затем «Толщину», вторую сверху, затем снова в палитре сделаем чуть темнее цвет и нарисуем тёмные точки. Если цвет точек не попадёт, нажмите на круглую стрелочку «Возврат», в панели редактора, и то что Вы черкнули, исчезнет.

Снова подгоняем палитру, и опять рисуем точки, пока они не станут похожи на те, что на картинке.

Затем нужно щёлкнуть «Файл — Сохранить как…» и в появившемся окне поиска выбрать папку в которую эта картинка будет сохранена.

Если картинка предназначена для WordPress, то сохранять её нужно:
если сайт на Денвере в «home-название сайта-www-wp_content-themes-название темы-images»
если на хостинге — «publik.html-wp_content-themes-images».

Конечно изображение тяжеловато – 200 кбайт, и желательно сделать его полегче, так как шапка присутствует на каждой странице, и ощутимо влияет на общий вес сайта.

Для облегчения изображений рекомендую использовать бесплатный вариант программы Image Optimizer. В нём можно облегчить изображения онлайн, без потери качества.

А если скачать программу и установить на компьютер, то в выпадающем меню правой клавиши мыши, появится новая опция — «Optimise Images», и наведя курсор на любое изображение, сохранённое в какой либо папке на Вашем компьютере, Вам достаточно будет щёлкнуть правой клавишей, и выбрать эту опцию. Картинка автоматически станет легче в несколько раз.

Как установить эту шапку на сайт,  смотрите в статье Как сделать шапку сайта

И давайте сделаем ещё одну картинку — сборную. Тему возьмём к примеру «Грузовые автомобили». Находим в Яндекс картинках первое изображение

Затем щёлкнув по ней правой клавишей открываем и выбираем оптимальный для шапки размер

Когда картинка открылась копируем её в Paint (нажимаем клавишу «Prt Sc Sys RG»), открываем Paint, щёлкаем «Вставить», затем «Выделить», выделяем машину, и перетаскиваем изображение из левого верхнего угла на середину страницы, чуть ближе к левому краю.

Затем снова идём в Яндекс картинки и выбираем второе изображение. Главное что-бы фон картинок совпадал. Открываем её в примерно таком-же размере

После того как картинка открылась, щёлкаем по ней правой клавишей и в появившемся меню выбираем «Сохранить как…» и жмём «Сохранить»

Теперь снова заходим в Paint, где у нас уже есть одно изображение и щёлкнув «Вставить», выбираем «Вставить из», после чего откроются загрузки с сохранённой второй картинкой.

Двойной щелчок по ней, и она окажется в поле Paiht, наложившись на первую

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

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

И таким образом можно комбинировать очень много, а нам сейчас остаётся только сделать изображение нужного для шапки размера. Обычно это 900х250 px или около того.

Снова берём «Выделить», и выделяем нужный нам размер. Он показывается при движении курсором слева внизу окна Paint. Кстати, можно нарисовать рамку. Для этого выбирается цвет, толщина линии, и прямоугольник в инструментах, а затем рисуется рамка 900х250px.

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

Думаю что теперь Вам не составит труда сделать что-либо своё. Во всяком случае проще уже ничего не бывает.


Неужели не осталось вопросов? Спросить

Меню для адаптивных версий сайта < < < В раздел > > > Как сделать шапку сайта

 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

5 комментариев на «Как сделать картинку для шапки в Paint»

  1. stariс говорит:

    Я не совсем понял. Вам нужно сделать картинку, в которой будет изображение и рядом с ним текст, но всё это будет как бы одной картинкой, или вам нужно в шапке разместить изображение и рядом с ним текст, как у меня — по краям изображения и между ними текст. Уточните и я объясню. Вообще, напишите как можно подробнее что вы хотите и что не получается.

  2. Татьяна Максимова говорит:

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

  3. Moore говорит:

    Мне ваша заметка очень помогла. Побольше бы таких сайтов!

  4. stariс говорит:

    Почему — долго объяснять, поэтому только скажу, что сделать. Если через Paint: открыть в нём фон, потом вставить на него картинку, вырезать фрагмент с картинкой по размеру шапки (это уже будет фоновое изображение), закинуть его в images, и прописать в стилях. Если через WP, то картинка на фон вставляется так: грузите картинку через загрузчик на страницу (черновик), из кода картинки забираете тег img (черновик удаляете) и вставляете его в файл header.php в тег <div header>, там id или class header. Тегу img задаёте класс, и затем в style.css для него создаёте селектор, и позиционируете картинку в шапке. Селектору header, имеющемуся в стилях, задайте relative, если уже не задано, а картинку позиционируйте absolute.

    B htmlbook есть интересный материал по фону и фоновым изображениям. Я к тому, что там есть как делать фон на фон и т.п. Просто наберите в поисковике «Как наложить один фон на другой», и выберите ссылку с htmlbook

    Если какой-то момент остался непонятен — спрашивайте.

  5. Руслан говорит:

    Здравствуйте. У меня такая проблемка — скачал фон для шапки (19 кб, формат jpeg), пробовал вставить — работает. Добавил в paint картинку на этот фон и уже фон не читается (стал 36кб). загружал обычным способом (вордпресс) в формате jpeg -не работает, закинул в папку images (в формате png) и прописал путь к картинке в html то же самое.. ни как не могу понять почему с картинкой фон уже не читается??

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *