Как сделать фон в онлайн сервисах и как его поменять на сайтах HTML и PHP. Как поменять на сайте картинку


Как изменить картинку на сайте?

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

Вам понадобится
  • Знание HTML-кода
Инструкция
  • Для этого вам понадобится немного знаний, определенные программы и терпение. Чтобы самому менять облик сайта вам необходимо изучить HTML-код. Это определенный язык разметки документа. Изучить вы его можете либо самостоятельно, используя специализированный ресурсы сети, либо окончить специальные курсы. Для графического оформления вам также понадобятся знания некоторых графических редакторов.
  • Перед тем как изменить картинку на сайте вам её необходимо оптимизировать, уменьшить до нужного размера и сохранить в одном из трёх форматов: GIF, JPEG и PNG. После этого с помощью сервисов хостинга загрузить изображение на сервер в папку, где хранятся все графические материалы сайта. Узнать название папки можно у владельца сайта.
  • Изображение готово к замене. Откройте в одном из HTML-редакторов страницу сайта. Найдите код, который указан на примере. Укажите путь к изображению в поле атрибута «src», и обязательно пропишите название файла после атрибута «alt». Это необходимо на тот случай если у пользователя интернет в браузере отключено загрузка изображений. Картинку он не увидит, но текст отобразится.
  • Сохраните изменения. Откройте страницу в браузере, и вы увидите изменения на сайте. Таким же образом внесите изменения на остальные страницы сайта. Будьте внимательны при редактировании кода. Избегайте ошибок синтаксиса и со временем научитесь уверенно вносить изменения на любой сайт.
  • Оцените статью!

    imguru.ru

    Как сделать фон для сайта и как его поменять

    как поменять фон на сайте или блоге

    Здравствуйте друзья! Недавно я делал анализ своего блога с целью найти слабые места дизайна и пришел к выводу, что задний фон смотрится очень убого и никак не сочетается с основной цветовой гаммой сайта в целом.

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

    В этой небольшой статье я расскажу, как сделать и поменять фон сайта, читайте внимательно и до самого конца и узнаете, что из этого вышло. :)

    Как сделать фон для сайта онлайн

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

    О том, как увеличить скорость загрузки блога я писал в предыдущих статьях: «Плагин Hyper Cache» и «Оптимизация базы данных».

    Поэтому в качестве картинки для фона лучше всего использовать ПАТТЕРН.

    Паттерн — это небольшая картинка, не имеющая швов, которая при повторении образует большой фон, заполняющий все пространство сайта.

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

    Но как сделать фон приложив минимум усилий? Предлагаю обратить внимание на подборку онлайн сервисов, которые в своей базе имеет сотни уже готовых фонов, их останется только отредактировать и настроить по своему вкусу.

    1) PatternCooler

    PatternCooler сервис

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

    Посмотрите, что у меня получилось выбрать для себя:

    фон для сайта PatternCooler

    2) Stripegenerator

    Stripegenerator сервис фонов

    Тоже неплохой онлайн генератор фонов. Есть небольшой ряд настроек и немаленькая база заготовок.

    Мой результат работы:

    фон для блога в stripegenerator

    3) BgPatterns

    BgPatterns сервис паттернов

    Очень интересный сервис по созданию онлайн фона. Вы можете выбрать различные рисунки (сердечки, звездочки, кружочки) и цветовую гамму создаваемого фона.

    Посмотрите, что я подобрал себе:

    фон или паттерн BgPatterns

    4) Tartanmaker

    Tartanmaker сервис

    Для тех, кто хочет создать себе фон в клеточку стоит посетить данный онлайн сервис фонов.

    фон tartanmaker

    Как поменять фон на сайтах HTML и PHP

    Если вы работаете с сайтом разработанным исключительно на HTML, тогда вам понадобиться вставить фон в открывающий тег <body>... Должно получиться примерно следующее:

    <body background="images/fon-1.png">

    <body background="images/fon-1.png">

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

    <body bgcolor="#FFFFFF" background="images/fon-1.png">

    <body bgcolor="#FFFFFF" background="images/fon-1.png">

    Если основной паттерн не загрузится, вместо него подгрузится цвет, указанный в bgcolor (FFFFFF).

    В основном большинство начинающих, да и продвинутых вебмастеров используют в качестве движка блога CMS WordPress, поэтому чтобы установить фон на сайт, необходимо закачать созданный выше паттерн к себе на хостинг в папку с картинками темы.

    Для этого я закачиваю картинку (паттерн) на хостинг, папка находится по такому адресу:

    /httpdocs/wp-content/themes/Prosumer/images

    /httpdocs/wp-content/themes/Prosumer/images

    загрузка фона на сайт

    Затем необходимо открыть файл style.css и указать адрес, где хранится ваше изображение.

    указываем стили к фону

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

    Перезагружаем страницу сайта и смотрим полученный результат.

    P.S. Еще хотелось бы добавить, что вы можете настраивать как будет повторяться паттерн. Для этого существует атрибут repeat.

    background: #FFFFFF url(images/fon-1.png) repeat;

    background: #FFFFFF url(images/fon-1.png) repeat;

    Основные настройки:

    • — repeat — изображение будет повторяться как по вертикали, так и по горизонтали;
    • — repeat-x — повторение только по горизонтали;
    • — repeat-y — повторение только по вертикали;
    • — no-repeat – запрет на повторение.

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

    Посмотрите видео «Как поменять фон на сайте» и у вас не должно остаться никаких вопросов.

    На сегодня у меня все. Понравилась статья? Подпишись на обновления страниц блога по почте и будь в курсе новых постов, новостей и конкурсов. Жду отзывы и дополнения в комментариях. Пока!

    seoslim.ru

    Поменять шапку сайта ucoz - легко и быстро!

    Приветствую дорогой мой подписчик,читатель или просто случайно зашедший прохожий!В этом посте я решил затронуть тему которая интересует многих начинающих вебмастеров,а также просто желающих видоизменить шапку (верхушку) своего недавно установленного шаблона…

    Как поменять шапку сайта ucoz.

    который мы с вами установили в прошлой статье Как поменять шаблон (дизайн) на сайте ucoz.В итоге моих рассуждений в этой статье у меня вышел вот такой дизайн (все картинки кликабельны) :-

    Как поменять шапку сайта ucoz

    В котором я буду сейчас менять шапку,т.е верхнюю часть этого шаблона!Для этого прежде всего вам понадобится узнать размер вашей шапки.Размер шапки вы можете узнать двумя способами:

    Как узнать размер шапки Способ №1

    Этот способ в основном для тех кто не имеет в наличии приобретенный или скачанный шаблон,если у вас все же есть в наличии сам шаблон вашего сайта,тогда смело можете приступить к изучению способа№2 ,но если все таки вам интересен этот способ или просто у вас нет в наличии шаблона вашего сайта,тогда продолжим:-Прежде всего вам нужно зайти на свой сайт,затем наводим курсор мыши приблизительно на центральную часть вашей шапки,после чего нажимаем на правую кнопку мыши и выбираем в выпавшем окошке:- Проинспектировать элемент,он будет находится в самом конце выпавшего окна.Следом выскочит приблизительно такой образ- помеченный красным цветом на скрине:-

    Как поменять шапку сайта ucoz

    В ПЕРВОМ ОКНЕ  находится блочное содержимое практически всего вашего сайта,т.е все теги и скрипты из которых и состоит ваш сайт,но это только блочный состав вашего сайта,все содержимое для выравнивания и контроля за размером,а также за тональностью изменения цветовой гаммы каждого блока (т.е все цвета которые находятся у вас на сайте,кроме цвета картинок) находятся во ВТОРОМ ОКНЕ.При прокрутке колесиком мыши всего содержимого в ПЕРВОМ ОКНЕ (слева) ,вы наверняка заметите,как при наведении курсора мыши на определенный блок находившийся в открывающем и закрывающем теге <div></div> происходят определенные изменения на самом сайте,т.е предположим при наведении на тег header,который находится в блочном элементе в открывающем и закрывающем теге <div>ЗДЕСЬ СОДЕРЖИМОЕ БЛОКА header</div> у вас выделяется определенная часть вашего сайта синим цветом.Вот то,что у вас на сайте выделяется синим цветом- это и есть определенная область вашего сайта,на которую вы наводите курсор мыши при помощи ПЕРВОГО ОКНА.Выделения синим цветом обозначаются квадратами у которых с левой нижней стороны идет надпись с размерами наведенными вами курсором мыши блоками в ПЕРВОМ ОКНЕ,таким образом мы можем узнать при помощи ПЕРВОГО ОКНА размер любой части вашего сайта.Также при помощи метода тыка,блуждая по ПЕРВОМУ ОКНУ вы можете найти блок который содержит в себе все параметры вашей шапки,так как,она выделится синим цветом с ее размерами,при наведении курсором мыши на ее блок находящийся в ПРАВОМ ОКНЕ.А если кардинально сказать:- Вам нужно найти в содержимом ПРАВОГО ОКНА,блок который содержит в себе тег header- это и будет содержимое вашей шапки.При нахождении блока с тегом header выделяющего полностью вашу шапку синим цветом при наводки на него курсором мыши в ПРАВОМ ОКНЕ,вам нужно будет нажать левой кнопкой мыши на найденный вами блок в ПЕРВОМ ОКНЕ,чтобы зафиксировать ее и увидеть остальные параметры вашей шапки,которые после зафиксирования,появятся во ВТОРОМ ОКНЕ,там вы можете посмотреть не только размеры своей шапки но и все расстояния которые заданы для фиксирования блока вашей шапки и т.д,а самое главное:- Вы можете посмотреть в какой папке находится ваша шапка и какой путь прописан к ней,чтобы она корректно отображалась у вас на сайте.

    Как поменять шапку сайта ucoz

    Во ВТОРОМ ОКНЕ,где находятся ВСЕ ДАННЫЕ ВАШЕЙ ШАПКИ вы найдете приблизительно такой код:

    #header { background: url(&amp;quot;../img/header.png&amp;quot;) no-repeat; width: 697px; height: 245px; padding: 49px 0 0 265px; }

    Давайте теперь немного разберемся в данном коде:

    1. #header — непосредственно является названием блока вашей шапки;
    2. background:- содержит в себе картинку вашей шапки;
    3. width:- показывает размер ширины вашей шапки(картинки)в пикселях;
    4. height: — показывает размер длины вашей шапки(картинки) в пикселях;
    5. padding: — показывает величину отступов вашей шапки(картинки) по краям,чтобы отцентрировать вашу шапку по середине верхней части вашего сайта;

    Таким образом мы с вами уже знаем длину и ширину нужной нам картинки при помощи тегов height и width !!!В моем случае ширина:- 697 px, длина:- 245 px

    Как узнать размер шапки Способ №2

    Этот способ более простой и в основном для тех у кого есть в наличии сам шаблон в отдельной папке.Итак давайте приступим:- Для начала открываем  саму папку с вашим шаблоном и находим там папку со значением либо img, либо images, в моем случае в шаблоне находятся сразу две папки.Находим там изображение вашей шапки и курсором мыши наводим на само изображение,при наведении курсора мыши у вас высветится желтое окошко,приблизительно с такими параметрами:-

    • Размеры:   962 x 294
    • Тип Файл:   PNG (у вас возможно JPG !!!)
    • Размер:    691 КБ

    Теперь давайте немного разберемся с выше перечисленным:-

    Размеры:-  непосредственно показаны в пикселях (px;),где первое число 962 — ширина вашей картинки (шапки) в пикселях(px),а второе число 294 — длина вашей картинки шапки в пикселях (px)

    Тип Файл:-  показывает какое расширение стоит у вашей картинки!!!В моем случае,это PNG — это значит,что картинка которую я хочу поставить вместо этой,тоже должна будет иметь такое же расширение,т.е в формате PNG .Если вы поменяете расширение своей картинки(шапки) и сделаете предположим вместо расширения PNG в формате JPG и загрузите на свой хостинг (сайт) с надеждой на какие либо изменения в верхней области вашего сайта,то поверьте здесь ничего не произойдет,т.е картинка вашей шапки даже не отобразится у вас на сайте!!!Потому что в коде вашего сайта(шаблона) сама картинка вашей шапки,прописана именно как с расширением в формате PNG,а вы загружаете как JPG !В этом случае  вам придется менять расширение вашей картинки(шапки) в самом коде вашего шаблона,а это как говорится- Уже другая история!Поэтому Подписывайтесь на обновления блога,чтобы быть всегда в курсе всех событий происходящих на блоге ProfKatalog.ru

    Размер:— показывает сколько весит ваша картинка в килобайтах.

    Если у вас по каким то непонятным причинам,не высвечивается желтое окошко с данными вашей картинки при наведении на нее курсором мыши,тогда нажмите на нее правой кнопкой мыши,после чего выберите и нажмите в выпавшем окошке ==>>Открыть с помощью==>>далее выберите браузер которым вы пользуетесь и нажмите на него,после чего ваша картинка откроется в браузере которым вы пользуетесь,прямо в браузере нажимаем на картинку правой кнопки мыши==>>выбираем Проинспектировать элемент,после чего у вас будет такая картинаКак поменять шапку сайта ucoz

    Видеокурс КРИПТОPRO

    Где первое число:- Размер ширины вашей картинки в пикселях (px),второе число размер длины вашей картинки в пикселях (px).Здесь я думаю мы с вами разобрались и определили размер нашей шапки и какой приблизительно нам нужен размер картинки под нашу шапку!

    Давайте тогда приступим непосредственно к поиску картинки для нашей будущей шапки,если конечно вы еще не определились какая картинка у вас будет шапкой вашего сайта.Для начала наших с вами поисков,нам потребуется  зайти в любой из поисковиков,таких как yandex,google и т.д, далее набрать там ключевые слова которые подходят тематике вашего сайта,при этом набрать название нужного нам элемента,в нашем случае это — ШАПКА ,в итоге набранного мной текста в поисковике google у меня вышел такой текст:- КУЛИНАРИЯ ШАПКА ДЛЯ САЙТА вы конечно же вместо ключевого слова моего сайта- КУЛИНАРИЯ  замените на ключевое слово подходящее тематики вашего сайта,после чего у вас в поисковой выдаче появится множество сайтов с предложением как сохранить,скачать,а также скопировать выбранную вами картинку для шапки вашего сайта.Самое главное:- При выборе картинки смотрите ее размеры,чтобы приблизительно совпадались с размерами шапки вашего сайта!!!  Выбранная вами картинка должна быть не больше 800 пикселей  по ширине и 300 пикселей по длине в отличии от размера шапки,если выбранная вами картинка наоборот меньше вашей верхушки(шапки) вашего сайта то этот факт будет влиять на качество визуального отображения картинки (шапки),после того как вы ее поменяете- изменив размер выбранной картинки и залив ее на ваш хостинг.

    Меняем картинку вашей шапки.

    Итак,вы выбрали и нашли картинку для шапки с приблизительно похожими размерами.Но при этом вам кажется,что она требует корректировки под тему вашего сайта или нужно убрать с нее какие либо надписи сторонних ресурсов.Здесь вам помогут ваши навыки владения фотошопом,если у вас к сожалению их нет тогда вам придется ими овладеть,поискав в сети онлайн уроки по фотошопу,для корректировки вашей картинки вам потребуется знания обычных азов фотошоп,если вы не хотите изучать фотошоп или просто нет желания,времени и сил можете ОБРАТИТСЯ КО МНЕ и я полностью сделаю вам нужную шапку.

    Меняем размер картинки вашей будущей шапки.

    Итак,мы с вами знаем точный размер нужной нам картинки,а размер картинки которую вы нашли- либо больше,либо немного меньше чем размеры нашей шапки.Таким образом,нам необходимо подогнать все размеры по длине и ширине найденной вами картинки,под размеры вашей шапки!Для этого мы будем с вами  использовать программу фотошоп,но если у вас на данный момент нет данной программы тогда используйте программу ОНЛАЙН ФОТОШОП,которую вы можете найти при помощи поисковика google,на первом месте в поисковой выдаче ее устанавливать не нужно,работа с фотошоп происходит онлайн.Заходим на сайт http://editor.0lik.ru  и сразу видим такую картину:-

    Как поменять шапку сайта ucozИз вышеперечисленного на скрине выбираем кнопку-  Загрузить изображение с компьютера ==>>Выбираем папку==>>Выбранную нами ранее картинку для изменения вашей шапки ==>>Увеличиваем открывшиеся окно с вашей картинкой

    Как поменять шапку сайта ucozпосле чего нажимаем две кнопки одновременно CTRL+A или воспользуйтесь инструментом Выделение и выделите курсором мыши всю область вашей картинки ==>> Затем в верхнем меню фотошопа выбирите кнопку — Редактировать ==>> В выпавшем подменю нажмите Копировать —

    Как поменять шапку сайта ucoz

    Далее переходим ==>> Файл==>> Новый рисунок,после чего у вас высветится вот такое окошко-

    Как поменять шапку сайта ucozГде вам нужно будет прописать нужные размеры вашей шапки (т.е те размеры которые мы с вами узнали при помощи 1-го и 2-го способов)  и поставить галочку Прозрачность для того чтобы ваша в дальнейшем вставленная туда картинка не так много весила как с фоном с заливкой белого цвета по умолчянию==>>Далее нажимаем кнопку Да.В открывшимся окне фотошопа сразу убираем все ненужные нам окна,которые находятся с правой стороны,после чего открываем ==>> Редактировать ==>> Вставить ,таким образом мы вставляем ранее скопированную картинку ==>>Далее нажимаем одновременно  две кнопки Сtrl + T ==>> После чего у вас появится полупрозрачный квадрат с синими квадратиками для регулировки размера вашего изображения под прозрачный фон (размеры прозрачного фона мы с вами делали под размеры нашей шапки) ==>> Центрируем изображение по середине прозрачного фона зажимая и передвигая его левой кнопкой мыши==>>Далее либо растягиваем,либо уменьшаем наше изображение при помощи зажатия правой кнопкой мыши на маленьких синих квадратиках и передвигая их вправо,влево,вверх,вниз.

    Как поменять шапку сайта ucoz

    После того как вы подгоните каждую сторону под прозрачный фон ==>> Нажимаем Файл ==>> Сохранить ==>> После чего у вас будет вот такое окошко:-

    Как поменять шапку сайта ucozЗдесь так сказать- Самый важный и ответственный момент!!! Все параметры которые мы сюда с вами впишем должны четко совпадать с параметрами вашей старой картинки(шапки).Давайте разберемся по порядку:-

    Имя вашей картинки — название нашей будущей шапки.Название прописываем точно такое же как и название нашей старой картинки (шапки),которое мы можем взять в самом шаблоне нашего сайта,либо в админке ucoz.Для первого варианта нам потребуется найти в разархивированной папке вашего шаблона старую картинку вашей шапки и скопировать ее название.Во втором варианте вам нужно зайти в админку вашего сайта ucoz ==>> Файловый менеджер ==>> Папку с картинками- это либо images либо img ==>> По очереди открывать каждую картинку,если вы там не найдете приблизительное название вашей картинки(шапки)- этим приблизительным названием непосредственно является header . Для просмотра любой картинки находящиеся  у вас на хостинге используйте глазик,который находится с правой стороны параллельно напротив названия ваших картинокКак поменять шапку сайта ucoz

    Формат картинки —  здесь нам нужно выбрать точно такой же формат,который стоит у вашей старой картинке (шапке).Форматов (расширений) у картинок любой шапки бывает всего два вида — это PNG и JPEG

    Качество картинки — устанавливаем самое высокое 100% — это если у вас нужная картинка имеет расширение в формате JPEG ,если PNG — качество картинки устанавливается автоматически!

    Поле четкого заполнения всех полей нажимаем кнопку- Да.После чего сохраняем нашу картинку в отдельную папку.Все!!!Я вас поздравляю,Вы сделали и подготовили вашу картинку к установке!Теперь заходим в админку вашего сайта ==>> Файловый менеджер ==>> Находим нашу старую картинку(шапки),в моем случае,это header и удаляем ее при помощи красного крестика,который находится с правой стороны,напротив вашей картинки ==>> После чего там же в той же папке где удалили загружаем новую уже готовую картинку ==>> Заходим на свой сайт и нажимаем F5 (обновить) и что мы видем в итоге:- Вуаля!!!У вас новая шапка с нормальным визуальным отображением!На этой замечательной ноте я думаю заканчивать этот немаленький пост и предложить вам прокомментировать  все вышесказанное,вполне возможно я что либо упустил,напишите в комментариях,что именно я упустил тем самым помогайте друг другу разобраться в этой теме поглубже.Вы должны знать и понимать,как нам всем важна ВЗАИМОПОМОЩЬ,которая требуется нам как в жизни так и в интернете!Если вам понравилась статья,подписывайтесь на обновления блога,чтобы быть всегда в курсе новых статей на ProfKatalog.ru

    Видеокурс КРИПТОPRO

    profkatalog.ru

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодняшняя статья будет посвящена подготовке в программе Фотошоп (можно и в его онлайн версии Pixlr, описанной здесь) графических файлов для их публикации на сайте. У меня чаще всего используются скрины сделанные на компе или телефоне, а затем прошедшие обработку (в основном в Снагите).

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

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайтГрафика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Сам я в Photoshop и даже в его упрощенной онлайн версии не силен (довольствуюсь возможностями простенького просмотрщика FastStone Image Viewer, про который речь шла тут и встроенного в него редактора), поэтому мне пришлось обратиться к любимой супруге с просьбой описать процесс подготовки моих фоток со всеми нюансами и тонкостями.

    Создание изображения для сайта в Photoshop

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

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

    Ну и, конечно же, трафик с поиска по изображениям тоже лишним не будет. Правда для этого графические файлы, публикуемые у вас, должны удовлетворять ряду требований:

    1. Быть уникальными, а не взятыми с других ресурсов
    2. Не слишком маленького размера и формата JPEG, GIF, PNG или BMP.
    3. У них обязательно должны быть прописаны атрибуты Alt (и, при желании, Title), как написано в этой статье. Иначе поисковые системы просто не включат их в свой индекс поиска по картинкам.
    4. В атрибуте Alt должны быть прописаны ключевые слова, по которым вы хотите продвинуть данную фотку.
    5. Желательно, чтобы в названиях графических файлов тоже присутствовали ключевые слова (в виде транслита, по правилам описанных в этой статье о транслитерации)
    6. Необязательным, но желательным условием является то, чтобы в каждом теге IMG ваших изображений были бы прописаны атрибуты WIDTH и HEIGHT. Они служат для задания ширины и высоты изображения и при определенном стечении обстоятельств могут способствовать ускорению загрузки вебстраницы.
    7. Фото должны быть размещены на вашем сайте легально, иначе могут неожиданно возникнуть проблемы с правообладателями. Покупать графику я не агитирую, но можно найти вполне компромиссное решение — бесплатные фотобанки и микростоки, где размещены многие тысячи профессиональных фотоматериалов.

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

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

    Для этого можно воспользоваться одним из приведенных выше онлайн сервисов или же сделать это в Фотошопе, сохранив его для Web, в результате чего изображение будет максимально оптимизировано для его использования на вебсайте. Но давайте уже непосредственно перейдем к созданию графики для сайта в Photoshop.

    Для создания нового файла в Photoshop заходим в МЕНЮ и выбираем команду СОЗДАТЬ (в более новой версии Фотошопа: МЕНЮ — НОВЫЙ). У нас открывается вот такое диалоговое окно:

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    В нем мы задаем имя для будущей картинки; выбираем ее размер (ширину и высоту), нажав вкладку НАБОР; а также задаем единицу измерения (пиксели, сантиметры, дюймы...).

    Далее задаем ФОН. По умолчанию всегда будет стоять БЕЛЫЙ. Если мы выберем ФОНОВЫЙ ЦВЕТ, то будущее изображение окрасится в тот цвет, который в данный момент находится основным в палитре цветов. Выбрав ПРОЗРАЧНЫЙ фон — поле окрасится шахматкой.

    К примеру, мы выбрали прозрачный фон и нарисовали на нем цветочек. При сохранении рисунка с расширением png, у нас сохранится именно цветочек — фона видно не будет, ибо этот формат поддерживает прозрачность.

    Слева в интерфейсе Фотошопа находится полоска с инструментами, которая называется ПАЛИТРА ИНСТРУМЕНТОВ. Как раз на ней, в самом низу, и живет описанная выше ПАЛИТРА ЦВЕТОВ.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Для того, чтобы открыть нужное нам фото, мы заходим в МЕНЮ и выбираем команду ОТКРЫТЬ. Далее ищем на своем компьютере папку с нужной фоткой и щелкаем по ней.

    Теперь у нас открыто два изображения: созданное нами новое и то, которое мы хотим добавить на новое.

    Добавляем слои и переносим их на наше изображение

    Самый простой способ перенести одну картинку на другую — это обыкновенное перетаскивание его с помощью мыши. Сначала выбираем инструмент ПЕРЕМЕЩЕНИЕ, а затем хватаем вновь добавленное изображение левой кнопкой мыши и перетаскиваем на то, что создали (пустую заготовку нужного размера с прозрачным фоном), после чего отпускаем.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    В моем случае видна лишь новая картинка на прозрачном фоне (показан шахматкой), а созданный документ (заготовка), под названием «Без имени-1», скрыт.

    В таком случае, хватаем телефончик левой кнопкой мыши и подводим к имени нашего документа, как показано на рисунке. Через мгновение у нас он открывается и мы, все так же удерживая левую кнопку мыши, тащим картинку на область создаваемого рисунка (на белый фон), после чего отпускаем.

    Там наш телефончик можно передвигать с помощью мышки в ту область шаблончика, которая нам нужна. Так же передвигать можно с помощью стрелочек на клавиатуре, при условии, что в палитре инструментов выбран инструмент ПЕРЕМЕЩЕНИЕ.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    В окне НАВИГАТОР программы Фотошоп мы можем просмотреть наше результирующее изображение. Двигая ползунок — изменить масштаб просмотра, т.о. просмотреть документ как бы через лупу, дабы увидеть возможные недочеты. Изменить же реально масштаб можно, зайдя в МЕНЮ — ИЗОБРАЖЕНИЕ — РАЗМЕР.

    В палитре СЛОИ отображается всё, что мы перенесли на наш слой. К примеру, в моем случае, в палитре СЛОИ находятся всего два: созданный шаблон изображения для сайта на белом фоне и одна перенесенная на него картинка (телефончик).

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Ее на нашем документе можно не только перенести в любую область, но и наклонить/перевернуть. Для этого в МЕНЮ выбираем РЕДАКТИРОВАНИЕ — СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ.

    Но перед этим, если у вас перенесено уже несколько картинок на нашу заготовку, нужно выбрать нужный слой в палитре СЛОИ, и только потом применять СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ. В противном случае, трансформирование применится к слою, который будет активным в данный момент, а не к тому, который вам необходимо наклонить/перевернуть.

    Выбрав команду СВОБОДНОЕ ТРАНСФОРМИРОВАНИЕ, наше изображение выделится тоненькой рамочкой.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

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

    Добавление текста или логотипа на изображение в Photoshop

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

    Для этого в панели инструментов Фотошопа выбираем ТЕКСТ. Ставим курсор на нужное место в заготовке (созданном документе) и начинаем вбивать нужный нам текст, к примеру, адрес вашего сайта.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    В настройках инструмента ТЕКСТ (смотрим рисунок выше) можем задать следующие настройки, выделив мышкой то, что мы написали в документе:

    1. изменить ориентацию текста, т.е. сделать из горизонтального вертикальный и, наоборот
    2. задать жирность/курсив
    3. задать размер
    4. произвести деформацию текста, т.е. сделать его выпуклым, в виде флага и т.п
    5. .

    Выбрав в окне Photoshop инструмент ПЕРЕМЕЩЕНИЕ (о нем писалось выше), с помощью мышки или стрелочек на клавиатуре, мы можем переместить в другое место текст логотипа на нашем шаблоне.

    Рамка КАДРИРОВАНИЯ

    Допустим, ваше изображение оказалось бОльшего размера, чем вам нужно (кстати, если фото не очень хорошего качества, то его можно использовать ретушь). Если вы будете уменьшать его с помощью команды в меню ИЗОБРАЖЕНИЕ — РАЗМЕР, то, изменив его по горизонтали, оно автоматически изменится и по вертикали, и наоборот.

    Чтобы такого избежать и существует инструмент РАМКА КАДРИРОВАНИЯ. Выбираем его в окне Фотошопа, щелкам по нужному месту на заготовке и, зажав левую кнопку мыши, растягиваем рамочку, после чего отпускаем левую кнопку мыши.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Рамку кадрирования можно увеличить или уменьшить, ухватившись мышкой за ее уголочки. То, что мы хотим отрезать на итоговом изображении, будет затемнено. Выделили область, которую мы хотим оставить, и нажимаем кнопочку ПРИМЕНИТЬ КАДРИРОВАНИЕ (показано на рисунке выше).

    Окно ИСТОРИЯ

    В окне ИСТОРИЯ прописываются все наши действия в этой замечательной программе. В моем случае их было совершено пять: создание нового документа для последующей публикации на сайте, перетаскивание на него слоя с картинкой, перемещение рисунка телефончика в другое место на заготовке, перетаскивания туда же слоя с логотипом (в вашем случае — написание текста с помощью инструмента ТЕКСТ) и последующее его позиционирование в нужное место.

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

    Так же шаг назад в Photoshop можно сделать с помощью: МЕНЮ — РЕДАКТИРОВАНИЕ — ШАГ НАЗАД.

    Если у вас не наблюдается окна ИСТОРИЯ или какого другого описанного мною окна, то зайдите в МЕНЮ — ОКНО и поставьте галочку у нужного вам: история, слои, навигатор и т.д. Окна на рабочем столе в программе Фотошоп можно перемещать с помощью мышки.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Как добавить стиль слоя в Фотошопе

    Если мы хотим добавить стиль одному слою, то делаем его активным и нажимаем кнопочку ДОБАВИТЬ СТИЛЬ СЛОЮ, если всему документу, то выделяем все слои с помощью удержания клавиши Shift на клавиатуре, а затем объединяем все три слоя в один, щелкнув по выделенным слоям правой кнопкой мыши и выбрав команду ОБЪЕДИНИТЬ СЛОИ, после чего нажимаем кнопку ДОБАВИТЬ СТИЛЬ СЛОЮ. Шайтанама.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    При нажатии на кнопку ОБЪЕДИНИТЬ СЛОИ у нас откроется диалоговое окно с выбором стиля. Но есть и еще один способ открытия этого окна в Photoshop — двойной щелчок мышкой по уже единственному у нас слою в палитре СЛОИ. В этом случае у нас откроется вот такое диалоговое окно со всеми настройками задания стиля:

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Данные настройки придадут вашему документу неповторимый стиль. Вы можете применить:

    1. тиснение (сделать картинку объемнее)
    2. наложить тени, как внутренние, так и внешние
    3. задать свечение внутреннее или внешнее, а может и то, и другое
    4. заключить наш документ в рамку
    5. задать ее ширину
    6. цвет и т.п.

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

    Сохранение изображения для Web

    JPG — это основной формат, в котором сохраняют фотографии. GIF лучше всего применять для сохранения растровых (состоящих из пикселей) изображений с количеством цветом не более 256. Этот формат отлично поддерживает анимацию, а так же часто применяется в web-дизайне.PNG очень схож с GIF, только в отличии от него может отображать большее количество цветов. Подробнее о форматах Gif, Png, Jpg (Jpeg) растровой графики вы сможете прочитать тут.

    Чтобы сохранить изображение в Фотошопе, заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ КАК, но для интернета лучше всего сохранить иным способом: заходим в меню и выбираем ФАЙЛ — СОХРАНИТЬ для Web устройств.

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    В открывшемся окне, слева, будут отображены два варианта нашего созданного рисунка: вверху исходный вариант, а под ним то, что выйдет у нас в итоге при оптимизации для Web. Изменяя настройки сохранения, по нижнему варианту мы сможем добиться ухудшения качества результирующей картинки.

    Здесь вы можете экспериментировать с форматами, в котором будет сохраняться графика для сайта (статью о них см. выше), качество или количество используемых в итоговом изображении цветов. Наша задача состоит в том, чтобы добиться минимального веса при минимальном ухудшения качества картинки. В общем, найти золотую середину.

    Как вставить созданную картинку на сайт

    Ну, вот изображение, оптимизированное для Web, мы создали при помощи редактора Фотошоп или его бесплатного онлайн аналога Pixlr. Теперь эту картинку нужно каким-либо образом вставить на сайт. Обычно для этих целей используют визуальные редакторы того движка, с которым вы работаете.

    В этом случае графический файл загружается на сайт с помощью инструментов визуального редактора. Довольно удобно и просто. Но вот я, почему-то, всегда предпочитал другой способ вставки. Сначала подключаюсь к сайту по FTP c помощью моего любимого FTP клиента FileZilla, подробно описанного тут.

    Загружаю графический файл на сайт в отведенную для этого папку, а затем вставляю в текст статьи уже заготовленный штамп с тегом Img и уже прописанными заготовками для атрибутов, а так же CSS классом для его последующего позиционирования или же любого другого оформления.

    <img alt="" src="https://ktonanovenkogo.ru/image/25.10.png" />

    Для класса img_center1 в моем стилевой файле (из папки с текущей темой оформления Вордпресс) прописано следующее правило:

    .img_center1{display:block;background:#e0e0e0;padding:5px;margin:10px auto !important;}

    CSS свойство display делает картинку блочным элементом. Ну, а затем с помощью margin:10px auto мы выравниваем ее по середине (по горизонтали). Про CSS свойства margin и padding читайте здесь. Ну, а background, которому посвящена эта публикация, задает серенький фон, который слегка проглядывает по краям, создавая эффект рамки.

    При вставке картинок на сайт мне останется только поменять название графического файла и прописать ключевые слова в атрибуты Alt тега изображения Img, о котором подробнее читайте тут. Довольно просто, но, правда, все время придется держать под рукой образец штампа, либо вешать его на горячую кнопку, например, в Пунто Свитчере, про который мы говорили здесь.

    Лично я пишу статьи в WordPress, используя только HTML редактор, в котором для удобства добавил кнопки, позволяющие быстро вставлять в текст штампы:

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Графика для Web — как подготовить изображение в Фотошопе и вставить картинку или фото на сайт

    Таким образом можно очень быстро вставить фото на блог. Дополнительные кнопки в Html редактор можно добавить с помощью плагина Post Editor Buttons. Как нибудь опишу подробно работу с ним, а пока вы можете сами пробовать разобраться, тем более, что там ничего сложного нет.

    Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

    Подборки по теме

    Рубрика: Используем программы

    ktonanovenkogo.ru