Как сделать изображение сайта
Добавил пользователь Валентин П. Обновлено: 04.10.2024
Как сделать картинку для сайта? Как быстро сделать красивую и уникальную картинку для сайта или блога?
Картинки для сайта
Причем от вас не потребуется каких-то специальных навыков. А также не придется долго и нудно изучать специализированную программу для обработки изображений типа Photoshop, Coral и тому подобные фото редакторы.
Вернее фотошопа мы как раз коснемся только не всем привычного Photoshop. А его урезанной и как нельзя более всего нам подходящей версии Photoshop Online.
Почему делать картинку удобнее и проще в Photoshop Online
Согласитесь. Для того кто ведет свой блог, занимается сайтом или развитием группы в социальной сети. Самое главное дать своим читателям интересный материал. А интересный материал должен быть оформлен соответствующим образом. То есть иметь красивую и запоминающуюся картинку.
Тут возникает вопрос как ее сделать? Конечно. Можно освоить например тот же Photoshop или другой графический редактор. Однако на это требуется время. Да и собственно приобрести саму программу.
Ну если вы конечно законопослушный гражданин. Уважаете авторские права и не пользуетесь пиратским программным обеспечением.
Но по большому счету. Дело тут даже не в самих программах их покупки и потраченном времени на их освоение. Нам нужно, что? Просто красивую картинку для поста. И в ряде случаев нет никакого смысла вникать в тонкости и премудрости работы стандартного Фотошопа.
Если конечно у вас нет в планах разобраться в нем на полупрофессиональном или профессиональном уровне. Photoshop Online который я использую. Обладает хоть и урезанным, но вполне достаточным функционалом для наших задач.
Просто и быстро сделать картинку для сайта или блога сделать в нем можно без всяких проблем.
Как сделать картинку в Photoshop Online
Для начала нужно найти основу для картинки. Можно найти через Яндекс или Гугл картинки. Любое понравившееся изображение.
Что бы картинка нормально смотрелась мне нужно задать его размер ширина 1200 на 400 высота. Ваши размеры вы задаете те которые нужны вам. Исходя из вашей темы (шаблона) сайта.
Если бы мне нужно было сделать картинку которую я буду размещать в самой статье. Тогда я бы использовал размер 1200 на 600 или 800 на 600.
На этом сервисе. На самом деле множество полезный функций которые помогут в работе с фото и любыми графическими изображениями. Причем ничего устанавливать, а тем более покупать не нужно. Все онлайн и бесплатно.
Допустим я нашел вот такую картинку. Для примера первую попавшуюся в виде граффити. Что бы картинка к посту получилась интересной и логичной. Естественно нужно какое-нибудь изображение подходящее к теме вашей статьи.
Я буду делать картинку для своего сайта, на страницах которого вы сейчас находитесь. Это будет самое первое изображение в начале статьи или миниатюра статьи.
Картинка для миниатюры сайта
Перехожу с сервис iloveimg и меняю размер уменьшая ширину до 400.
Находим Photoshop Online в поисковике браузера или переходим по ссылке Photoshop Online
Открываем вкладку файл и нажимаем создать новый рисунок. Появится окошко в котором нужно задать размеры нашего изображения. Напомню у меня 1200 на 400. Вы задаете свой размер.
Теперь переходим в вкладку слой и находим подпункт открыть изображение как слой находим наше сохраненное изображение и нажимаем открыть.
Перетаскиваю выбранное изображение в окно.
Некоторые могут сказать, что тогда изображение получится не уникальным. Нет, это не так. В результате наших действий получится именно уникальная картинка.
По высоте картинку для миниатюры то подобрали. а вот слева и справа остались белые прямоугольники. Выглядеть на сайте это будет не красиво.
Поэтому их нужно закрасить. Для этого есть инструмент кисть. У меня сайт в бело-черно-серых тонах. Поэтому белые места я просто закрашу черным цветом.
Вы конечно используете цвета которые больше походят под дизайн вашего сайта.
Получается примерно так.
Вот и все. Наша картинка готова осталось нажать сохранить файл и указать место хранения. Например рабочий стол.
Согласитесь. Проще просто некуда. За несколько секунд мы очень просто сделали красивую и главное уникальную картинку, которую теперь можем разместить на блоге или в группе.
Теперь давайте немного об уникальности картинок. Поисковые системы прекрасно понимают когда вы использовали картинку уже кем-то размещенную в Интернете.
Кто занимается продвижением сайтов знают, что это не хорошо и может повлиять не позиции статьи. В которых размещены такие не оригинальные изображения.
У нас же получается именно уникальная картинка в виду того, что мы работали в редакторе и претензий со стороны поисковиков не будет. Хотя мы частично и брали фрагменты изображений уже имеющиеся в Интернете.
Существуют различные сервисы для проверки уникальности картинок и фото, но это уже тема другой статьи.
Совет! перед тем как загрузить новую картинку на свой сайт. Обязательно сожмите ее.
На сервисе iloveimg. Есть такая возможность. Или воспользуйтесь другим аналогичным сервисом. Сжатие изображений здорово экономит место и положительно влияет на скорость загрузки сайта.
Этот урок посвящен теме как вставить картинку в HTML и какие стили CSS наиболее часто применяются для изображений. Здесь мы рассмотрим все основные вопросы касаемо вставки и отображения картинки в веб-документе. А также рассмотрим причины почему у некоторых пользователей не отображается картинка в HTML.
Содержание:
Как вставить картинку в HTML
В HTML изображения в графическом формате (GIF, JPEG, PNG, APNG, SVG, BMP, ICO) добавляются на веб-страницу с помощью тега через атрибут src, в котором указывается адрес картинки. То есть атрибут src является обязательным для элемента . Без него этот тег не используют.
Ещё одним обязательным атрибутом элемента является alt. Этот атрибут используют на тот случай, если по какой-либо причине, браузер не сможет отобразить картинку. При его использовании, в месте отображения картинки на экран будет выведен указанный вами текст.
В таблице ниже представлены атрибуты тега , которые используются наиболее часто. Но на самом деле их намного больше, ведь для элемента доступны все универсальные атрибуты и события.
Таблица. Основные атрибуты элемента
Здесь w - дескриптор ширины, который представляет собой целое положительное число, за которым следует w.
HTML картинка. Примеры
Как добавить картинку в HTML?
Как уже говорилось, чтобы добавить картинку в HTML нужно использовать тег и его обязательные атрибуты src и alt. Также, поскольку тег – это строчный элемент, то его рекомендуется располагать внутри какого-нибудь блочного элемента. Например,
Как изменить размер картинки в HTML?
Чтобы изменить размер изображения используют атрибуты height (задаёт высоту картинки) и width (задаёт ширину картинки). Эти атрибуты можно указывать как вместе, так и по отдельности.
Если нужно пропорционально сжать картинку, то указывается только один атрибут (height, или width). Если же нужно чётко обозначить и высоту, и ширину картинки, то используют оба атрибута одновременно (height и width).
Как указать путь к файлу изображения в HTML?
Адрес ссылки на файл изображения может быть абсолютным и относительным.
Примеры:
../img/D-Nik-Webmaster.jpg – это относительный путь от документа. Две точки в самом начале означают, что вам нужно подняться на один каталог вверх. Таким образом, если смотреть на наш пример, то нужно подняться на 1 директорию вверх, найти там папку img, а в ней найти файл D-Nik-Webmaster.jpg.
../../D-Nik-Webmaster.jpg – указывает путь к файлу, но только с поднятием на 2 директории вверх.
Как сделать картинку ссылкой в HTML
Для того, чтобы сделать картинку ссылкой в HTML нужно содержимое элемента обрамить в тег .
Картинка CSS. Примеры
Использование CSS (каскадных таблиц стилей) даёт возможность более гибко, более удобно и эффективно, настраивать отображение картинок на веб-странице. Поэтому даже для того, чтобы задать ширину и высоту изображений многие веб-мастера часто используют именно каскадные таблицы стилей.
Давайте рассмотрим несколько самых распространённых примеров оформления изображений на веб-странице с помощью CSS.
Как поставить на фон картинку в HTML?
Чтобы установить изображение в качестве фона нужно задать селектору body свойство background, или background-image.
Как установить размер картинки в CSS
Чтобы задать размер картинки в CSS нужно использовать свойства width (ширина) и height (высота). Например:
- Давайте создадим новый класс imgsize.
- Для элементов этого класса пропишем свойство width равным 350px.
- Присвоим картинке созданный ранее класс imgsize.
Таким образом, ширина картинки будет равна 350px, а высота уменьшится пропорционально. Если нужно установить фиксированную ширину и высоту картинки, то можно добавить свойство height (Например, height:350px).
Как сделать картинку адаптивной
Адаптивность картинки – это возможность изображения одинаково отображаться на разных типах устройств с различными характеристиками. Например, на компьютерах с разным разрешением экрана монитора, ноутбуках с разным разрешением дисплея, планшетах, телефонах и т.д.
Самый простой способ сделать одинаковое отображение картинки на всех устройствах – это использовать следующие правила:
Как разместить текст на картинке
Как выровнять картинку по центру веб-страницы
Способ №1
Самый простой способ выровнять картинку по центру – это присвоить ей класс, сделать картинку блоком и задать ей автоматическое выравнивание с правой и левой части.
Способ №2
Помещаем картинку в блок
, присваиваем класс этому блоку (или параграфу), и устанавливаем правило выравнивание текста по центру.
Как сделать обтекание картинки текстом
Выровнять изображение по левому, или по правому краю веб-страницы (или какого-нибудь блока, контейнера) можно с помощью свойства float.
Таким образом, чтобы сделать обтекание картинки текстом слева или справа нужно прописать следующие правила:
Как выстроить картинки в ряд
Чтобы выстроить картинки по горизонтали в один ряд, нужно поместить их в блок
, присвоить класс этому блоку (или параграфу), и установить следующие правила:
Весь код будет выглядеть так:
Как изменить размер картинки при наведении на неё курсора мыши
Изображение можно масштабировать (изменять его размер), вращать, сдвигать, или наклонять с помощью свойства transform. А для регулирования скорости анимации используется свойство transition.
Например, если нам нужно, чтобы картинка увеличивалась (или уменьшалась) при наведении на неё курсора мыши, то нужно создать класс, присвоить его изображению и прописать следующие правила CSS:
Если нужно увеличить изображение, не увеличивая при этом размеры картинки, то картинку надо поместить в блок
стал размером с изображение; а также задать свойство overflow со значением hidden, чтобы всё пряталось за пределами блока
Почему не отображается картинка в HTML?
Причин почему картинка не отображается на веб-странице может быть несколько:
Онлайн-сервисы для работы с визуальным контентом и дизайном сайта, собрали бесплатные и недорогие площадки. Материал обновлен — только актуальные ссылки.
При разработке или редизайне сайта понадобятся элементы оформления. Копирование изображений, иконок или всего дизайна с другой площадки чревато проблемами: например, с авторским правом или с жалобами регистратору сайта.
Кто не хочет нанимать веб-дизайнера, справляется самостоятельно. У CMS есть готовые недорогие или даже бесплатные темы для сайта, а сделать логотип, скачать готовые иконки, найти бесплатные шрифты и закрыть другие задачи вы можете с помощью этой подборки.
В статье:
Бесплатное создание логотипа без водяного знака
В каждом сервисе мы создали по логотипу выдуманной компании, чтобы показать вам скриншоты интерфейса.
В некоторых можно создать и скачать готовый лого бесплатно, другие требуют разовую оплату за скачивание файла в большом размере. Эта оплата все равно сильно меньше, чем стоят услуги дизайнера.
Logogarden — конструктор логотипов с помощью комбинирования готовых клипартов и текста.
В маленьком размере картинку можно скачать бесплатно, а пакет с большими размерами и правами стоит $12.
GraphicSprings — из разных тематических клипартов и элементов можно собирать простые цветные лого.
За готовый файл в высоком разрешении со всеми правами на использование нужно отдать $19.99.
Графические онлайн-редакторы, конструкторы инфографики и мемов
Сервисы подходят для кадрирования и редактирования готовых картинок, создания обложек для статей и красочной инфографики, объединения изображений в коллажи и создания мемов по шаблону.
Easel.ly — для работы с инфографикой;
Canva — для создания инфографики, флаеров, обложек и других картинок;
Online-fotoshop, Pixlr, Sumopaint — для работы с изображениями: позволяет кадрировать, вырезать фон, выполнять цветокоррекцию, объединять изображения и накладывать фильтры;
Online-image-editor — стандартный редактор, работает также с форматом gif;
PixBuilder Studio — редактор растровой графики, позволяющий создавать и web-графику;
Editor.pho, Fotor — фоторедактор с бьюти-инструментами для обработки кожи и добавления макияжа на фото;
Подборка CSS- элементов для дизайна сайта
Сервисы, где представлены интересные решения для оформления интерактивных элементов на сайте, можно скопировать в HTML, CSS, JavaScript.
Сервисы с бесплатными иконками
Иконки от дизайнеров. Можно скачать и использовать в меню, навигации, для выделения пунктов списка, кнопок. Некоторые иконки требуют указания авторства при размещении на сайте, советуем обращать внимание на лицензию перед скачиванием.
HTML-изображения добавляются на веб-страницы с помощью элемента . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
Вставка изображений в HTML-документ
1. Элемент
Элемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент является строчным, то рекомендуется располагать его внутри блочного элемента, например,
Элемент имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для элемента доступны следующие атрибуты:
1.1. Адрес изображения
Или же через относительный путь от документа или корневого каталога сайта:
- url(../images/anyphoto.jpg) — относительный путь от документа,
- url(/images/anyphoto.jpg) — относительный путь от корневого каталога.
Это интерпретируется следующим образом:
- ../ — означает подняться вверх на один уровень, к корневому каталогу,
- images/ — перейти к папке с изображениями,
- anyphoto.jpg — указывает на файл изображения.
1.2. Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файлов
- Формат JPEG(Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
- Формат GIF(Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
- Формат PNG(Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
- Формат APNG(Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
- SVG(Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
- Формат BMP(Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
- Формат ICO(Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
2. Элемент
Элемент служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.
Для элемента доступен атрибут name , который задает имя карты. Значение атрибут name для элемента должно соответствовать имени в атрибуте usemap элемента :
Читайте также: