Ни один вебмастер не может обойтись без знания того, как работать с картинками. Ведь благодаря им каждый сайт становится "отличным от других". Красивый header, называемый ещё "шапкой", привлекательный футер, эффектные модули, - всё это основано на картинках, или images.
Именно так и называется одна из корневых папок Joomla! , в которой хранятся все картинки сайта - как вспомогательные, так и предназначенные для иллюстрации материалов. Сегодня мы поговорим обо всём, что связано с картинками. И начнём с самого начала, т.е. с общих настроек сайта.
Шаг 1. Откройте в админке меню Сайт>>Общие настройки>>Система и прокрутите окно вниз до раздела Установки Медиа менеджера. В строках "Путь к папке с Медиа" и "Путь к папке с Изображениями" по умолчанию прописано: images/stories.
Я пришла к выводу, что это жутко неудобно по двум причинам:
1) удлиняется путь к каждой конкретной картинке;
2) когда мы хотим вставить картинку в статью, то при нажатии в редакторе на кнопку "Изображение" нам открывается только папка stories, ну и, естественно, все те папки, которые в ней находятся. Если же нужная картинка находится в папке images, то извлечь её через кнопку редактора не получается.
Что я стала делать? - да просто удалила в общих настройках /stories, оставив только images:
Рис.1
В следующей строке "Допустимые расширения для картинок" я оставила только те расширения, которые действительно использую: это картинки в формате gif, png, jpg.
По окончании сохранила произведенные изменения в настройках.
Внимание! Вышеуказанное удаление папки stories не означает, что она вообще удаляется с сайта, - просто мы как бы понизили её статус.
Шаг 2. Создание папок в папке images.
Как только я создаю новый раздел для материалов, я тут же создаю под него и папку для картинок. Например, на этом сайте есть раздел "Разное", и под него создана папка "raznoe". В разделе есть категории, поэтому в папке raznoe создаю новые папки, уже под категории этого раздела.
В папку stories я складываю вспомогательные картинки, т.е. те, что отражаются везде, помимо статей. Их я тоже раскидываю по папкам.
Таким образом я как бы каталогизирую изображения и, благодаря созданной системе, среди сотен картинок легко отыскиваю нужную, если мне захочется её изменить, удалить, переместить и т.д.
Где брать картинки для сайта?
Если у вас нет своего фотоаппарата, то найти картинки можно на бесплатных и платных хостингах. С тех пор, как у меня появился свой Canon EOS 450D, я почти перестала посещать эти хостинги, но иногда заглядываю на тематический http://www.freeimages.com . Нужную картинку здесь легко подобрать, потому что они классифицированы по категориям, а также на сайте хорошо работает поисковая система (правда, писать запрос надо на английском, но словари-то у вебмастера всегда под рукой, правда?).
Как определить размер картинки, хранящейся на компьютере?
Нажмите на выбранную картинку правой кнопкой мыши и дождитесь появления окошка, в котором в самом низу есть строчка "Свойства". Нажмите на неё, а в новом окне откройте вкладку "Подробно". Именно здесь вы отыщете не только размер изображения, но и его "вес":
Рис.2
Как подготовить картинку к показу на сайте?
Спору нет, самый лучший графический редактор - это, конечно, Фотошоп. Помню, я сутками изучала его многочисленные возможности, - до тех пор, пока не поняла, что для работы с картинками для сайта требуется всего-то ничего: уменьшить, подкрасить, обрезать, вырезать, скомпиллировать, подчистить, ну, и ещё кое-что по мелочам. Главное, что мне в нём нравится - это оптимизация изображений, то есть уменьшение "веса" для того, чтобы картинки легко грузились даже для тех посетителей, у которых никакущая интернет-связь.
Размер картинок я ставлю в зависимость от того, в каком месте собираюсь их показывать и в какой форме. Например:
1) используя практически во всех уроках плагины рокбох, специально для них готовлю большие картинки размером, не превышающим в ширину 900 рх. Картинки предпросмотра рокбокс создаёт автоматически в соответствии с заданными параметрами. Если мне захочется иметь превьюшку другого размера, то я создам её самостоятельно, подписав в соответствии с требованием рокбокса, т.е. так: image_thumb.jpg
2) иногда я использую эффект увеличения картинки при наведении на неё курсора (как он создаётся в визуальном редакторе, описано в соответствующем уроке). В этом случае готовлю маленькое и большое изображения; размер большого не увеличиваю в ширину более, чем до 400-500 рх, - с тем, чтобы оно полностью помещалось в ширину статьи.
3) чаще всего на сайтах используется линковка маленького изображения на его увеличенную копию. В этих случаях я, как правило, делаю размер большого изображения от 900 до 1024 рх в ширину. Оптимизированная в фотошопе картинка имеет небольшой вес и грузится быстро.
Однако бывают случаи, когда требуется показать, например, карту, а уменьшение размера не даёт возможности посетителям рассмотреть её подробно и ясно. Тогда приходится идти на уступки качеству, невзирая на большой вес изображения.
4) изображения можно демонстрировать через галереи, слайдшоу, модули. Здесь сначала следует познакомиться с параметрами расширения, и при подготовке картинок к показу отталкиваться от установок разработчика, а в случае модулей - ещё и от возможностей шаблона. Например, вы ставите в левую позицию модуль random_image. По шаблону ширина её всего 160-200 рх, и, если ширина помещаемых в модуль картинок будет более этого размера, то они будут либо "обрезаться", либо "наезжать" на поле для материалов сайта.
Где и как прописываются параметры картинок статей?
Если вы заботитесь о комфортном пребывании посетителей на сайте, а также о поисковой оптимизации, то должны уделить время на прописывание параметров картинки. Мы остановимся на этом важном моменте подробнее:
1. Не секрет, что есть пользователи, имеющие ограниченный интернет-трафик. Из-за этого они вынуждены отключать в браузере функцию показа изображений, и тогда на месте картинки будет пустое место в рамке. Однако, если на пустом месте будет стоять описание картинки, то, возможно, у посетителя появится желание либо необходимость просмотреть её. Значит, изображения нуждаются в описании (заголовке).
В свою очередь, описание способствует задаче продвижения сайта, так как если оно будет соответствовать поисковому запросу, то посетители, нажав на нужную картинку в поисковике, придут на ваш сайт и даже, возможно, станут его поклонниками. Поэтому давайте осваивать необходимые процедуры:
2. Ниже я размещаю любимую фотографию своего внука, обожающего вести взрослые разговоры со всеми подряд. Фото не очень качественное, но в данном случае я использую его в качестве иллюстрации к более важным вещам. Вы видите небольшое изображение, его размер 300х225 рх, и оно залинковано на большое изображение - 800х600рх.
Большое изображение я назвала leto.jpg , маленькое - S_leto.jpg . Это моя собственная система названий, выработанная в результате работы с огромным количеством изображений. Ниже я объясню, в чём состоит удобство "системы".
Итак, вот картинка:
Здесь я разместила её так: поставила курсор после слова "картинка" и нажала на кнопку "Изображение" в нижней панели редактора. Открылось окно папки images, где у меня в папке demo лежат картинки для этого урока:
Рис.3
Обратите внимание, что в окошке редактора картинки по размеру совершенно одинаковые, отличаются только названиями. На какое нажать, чтобы вставить в статью маленькое изображение? - было бы легко запутаться, если бы не названия картинок: я твёрдо знаю, что нажать мне сейчас надо на S_leto.jpg, потому что в моей системе приставка S_ указывает на то, что именно это изображение и есть меньшее по размеру.
После того, как я нажму на картинку, путь к ней отразится в строчке "Адрес (URL) картинки". Далее я даю картинке заголовок "Лето в деревне", выбираю позицию (выравнивание) "справа" (это означает, что картинка встанет справа от того места, где был поставлен курсор). Теперь я копирую путь к картинке, а затем нажимаю на кнопку "Вставить":
Рис.4
Картинка встала на место, и теперь, если подвести к ней курсор, покажется заголовок "Лето в деревне" :
Рис.5
Далее мне надо залинковать "малышку" на большое изображение, поэтому нажимаю сначала на неё, а потом на "цепочку" в панели редактора. Откроется окно, в котором я вставлю в строчку URL скопированный ранее путь к маленькой картинке. Затем уберу из названия картинки приставку S_, выберу в строке Target параметр "Open in new window" (открыть в новом окне); заголовок пусть будет такой же - "Лето в деревне". Всё, жмём на кнопку Insert:
Рис.6
Теперь трудолюбивые роботы с удовлетворением воспримут нашу плодотворную работу с изображениями, и вскоре картинки с нашего и вашего сайта появятся в каталогах картинок поисковиков.
Вот, пожалуй, и всё то основное, что относится к работе с изображениями на сайте. Конечно, есть ещё много разных нюансов даже в том, что я описала выше, и много разных дополнительных способов оформления изображений. Но, повторюсь, что в этом уроке я остановилась лишь на наиболее важных вещах, без понимания которых у многих новичков появляются проблемы и вопросы.
Осталось сказать несколько слов по поводу форматов изображений. На Рис.1 вы видите, что я оставила в общих настройках сайта три наиболее востребованных формата : jpg, png и gif .
Одна и та же картинка (например, leto) может быть в нескольких форматах:
leto.jpg, leto.png, leto.gif. Но меньше всего leto будет весить в формате jpg.
Я использую все три формата: то, что моргает, кружится и подпрыгивает, заодно и подмигивает - это gif-ки; картинки на прозрачном фоне (например, оранжевые стрелки "Наверх") - это png-шки (их у меня особенно много на сайте о Павловске, где и шаблоны прозрачные); остальные изображения - это jpg-шки.
Уясним это более наглядно.
Начнём с GIF. Чаще всего в этом формате используются анимированные картинки. В целях сегодняшнего урока я отыскала в интернете нужное мне изображение и сохранила его к себе на компьютер под названием shapka.gif . Вот оно:
Чудесная, хоть и грустная, "джифка", создающая впечатление реально идущего дождя. "Вес" данной картинки 327 КБ.
Окрываю gif-картинку в Фотошопе, а потом сохраняю её под тем же названием - shapka, но уже в другом формате - .jpg, и теперь картинка подписана так: shapka.jpg . Выглядит она совсем по-другому: анимация исчезла, остался только намёк на дождь. "Весит" картинка всего 30 КБ .
1. shapka.jpg
Теперь, ничего не меняя, ещё раз сохраняю картинку, но уже в формате .png.
Различия в изображениях (1) и (2) почти незаметны, только
shapka.png "весит" побольше - 58 КБ .
2. shapka.png
А теперь ещё немного поработаем в Фотошопе с картинкой shapka.jpg, сохранив её попозже в PNG . Лично я просто обожаю данный формат, потому что именно он позволяет придать картинке столь любимую мною прозрачность ( в чём вы легко можете убедиться, посетив самый первый сайт вашей училки - pavlovsk-spb.ru .
Итак, открываем в Фотошопе картинку shapka.jpg. Видим, что слой "Фон" заперт на ключ:
Иллюстрация
Щёлкнем дважды левой кнопкой мышки по этому слою, а потом в выпавшем окошке нажмём на "ОК". Всё, можем спокойно убирать с картинки всё, на наш взгляд, лишнее. Для этого нажмём кнопку инструмента "Волшебная палочка", определим допуск (я поставила 30) и начнём, как волшебница из сказки, прикладывать палочку (опять же левой кнопкой мышки) к тем местам, которые намерены убрать. Ориентируемся на мерцающий контур, выделенный палочкой: если согласны с получившимся вариантом, нажимаем на клавиатуре кнопку "Delete":
Таким вот образом удаляем всё, что нужно удалить в соответствии с нашим замыслом, а чтобы проверить, не осталось ли "крошек", давайте добавим новый слой и зальём его для контраста черным цветом:
Иллюстрация
На тёмном фоне очень хорошо видны оставшиеся огрехи, которые можно убрать с помощью инструмента ластик. Если теперь нас всё устраивает (включая размер картинки), то черный слой надо закрыть, а оставшееся изображение на прозрачном фоне сохранить в формате PNG.
Разумеется, есть и другие варианты выделения картинки, - я остановилась лишь ну на самом простом, ну проще некуда.
Почему я так подробно остановилась на форматах картинок? - да потому что все они применяются в шаблонах Joomla!. Например, вы не сможете обойтись без PNG, если правите логотип сайта. Бэграунды, шапки тоже часто делаются в этом формате.
Так что выбирайте формат в зависимости от своих нужд и предпочтений, и творческих вам успехов!
Комментировать материал через:
- Joomlalessons.ru
- Вконтакте
Поделиться: