WEB — графика
Очень важная часть web- дизайна. Ни одна страничка не обходится без графики. Я не профессионал, но несколько советов и примеров, как сделать графику для сайта, я дам. Нам надо понять вот что. Объём графического файла и его разрешение это разные вещи.
Нам надо сделать такой файл, чтобы его объём был минимален, но качество его было-бы приемлемым для просмотра на сайте. Не надо думать, что если вы возьмёте файл скажем в разрешении 1200х800 весом 200kb и поставите его на страничку изменив размер, скажем на 200х150, то он соответственно, уменьшится в объёме. Ничего подобного. Его объём останется прежним и он будет очень долго грузиться в браузер вашего посетителя. Вот пример. Вы видите три одинаковых изображения по разрешению, но все они имеют разный объём!
Оригинальное разрешение изображений 300х500pix, здесь я их поставил с разрешением 200х360pix . Левое изображение самое оригинальное. Его вес 70kb . Как видите, такой объём велик для сайта. Но зачем нам использовать такое большое изображение? Среднее и правое изображение это пример работы функции «Сохранить для Web» программы Adobe Photoshop.
Среднее изображение сохранено с высоким качеством, а его вес составляет всего 25kb . Но это не предел! Правое изображение сохранено со средним качеством. Его вес примерно 14kb . Как видите, можно одно и то-же изображение сохранить и поставить на сайт с разным качеством. Но чисто визуально нет никакой разницы!
А нам важно, чтобы картинки весили как можно меньше, но чтобы выглядели они хорошо. Я не стал ещё больше сжимать эту картинку и сохранять её с низким качеством. А можно было-бы ещё раз пережать. Но это уже ни к чему. При таком разрешении объём в 14kb очень неплохой результат и можно смело ставить картинку на сайт.
Ещё важно в каком графическом формате сохранять изображения. Всегда надо изходить из потребностей сайта. Вот урок по этой теме. Я наглядно покажу как сделать графику полегче и приемлемой для сайта. Так-же в уроке я коснусь ещё некоторых аспектов сохранения изображений для сайта. А так-же рассмотрю варианты показа больших изображений и как их хранить отдельно от сайта .
Видеоурок №1 «Изображения для сайта»:
Видеоурок №2 «Изображения для сайта»:
Это что касается статических графических файлов. Но всегда хочется, чтобы на сайте была и анимация. Здесь я не буду касаться программ для создания анимированных надписей. Это мы изучили на страницах о нужных и интересных программах. А так-же создания анимированного баннера.
Я хочу рассказать, как можно сделать небольшую анимацию в программе Adobe ImageReady, которая идёт в комплекте с Adobe Photoshop. Примеров использования её на сайте очень много.
Например вот:или вот: или вот:
Это примеры простой анимации, которую очень легко сделать. Главное подготовить нужные изображения в программе Adobe Photoshop. Программ для анимации великое множество, о некоторых я говорил в разделе «Видеоуроки«. Но я поговорю именно о ImageReady. Ведь подготовив в Photoshop несколько изображений, нажатием одной кнопки мы сразу попадаем в неё и можем сделать свою анимацию.
Вот видеоурок» Анимация в ImageReady»:
Есть ещё программы для работы с иконками. Но лично я не работаю с ними, не умею рисовать совсем. Но зато я просто извлекаю иконки из ресурсов программой IconsExtract. И потом при помощи программы AveIcon, переконвертирую иконки в файлы PNG и уже можно работать с ними в графических редакторах.
Обязательно посмотрите программы в разделе Новости. Тут Вы обязательно найдёте программы для обработки изображений и подготовки их для размещения на сайте. Обязательно найдёте программы для создания кнопок, баннеров, анимации, flash-галлерей. Здесь есть и различные редакторы изображений, которые помогут в работе над графикой для сайта. Для тех, кто не умеет работать с Photoshop, есть программы способные убрать фон на изображениях или добавить его. Помогут добавить объект или убрать объект с изображения.
Полезные программы для создания web-графики можно посмотреть на странице Полезные программы. На странице Интересные программы тоже есть что посмотреть и, возможно применить для своих работ. Программы для создания меню для сайта можно посмотреть на странице Web-меню. Можно посмотреть программы для создания меню и на странице Нужные программы.
Обязательно загляните в раздел Portable. Здесь Вы найдёте программы, по работе с графикой, но не требующие установки. Я очень часто ими пользуюсь. Там же найдёте программы которые помогут сделать не только виртуальные коробки для программ, но и реальные. Коллекция программ постоянно пополняется новыми уроками и программами. Удобнее всего следить за новыми поступлениями, подписавшись на RSS-ленту сайта.
Здесь дан список программ,которые помогут в работе с графикой. Программы для разных задачь и назначений. Если Вы внимательно просмотрели и прочитали текст выше, прошли по ссылкам, то наверняка нашли что-нибудь полезное для web-графики. Многие программы даны с видеоуроками, поэтому их легко будет освоить. На сайт постоянно добавляются новые программы и видеоуроки. Поэтому лучше следить за новостями сайта, подписавшись на RSS-ленту сайта.Здесь список программ, которые есть на сайте, возможно он не полный. Но я, по мере сил, буду его пополнять.
Программы для web-графики
Web Image Guru v4.0.14
Sothink javascript Web Scroller
DA-Software GifMaker v2.0
Swish Max 3.0 (Русская версия)
Photobie 7.2.9
MAGIX 3D Maker v 7.0.0.482
Xara Designer Pro v.7
ArcSoft PhotoStudio 6.0.0.157
Kristanix Software Button Shop v4.25
PhotoLine
EximiousSoft Banner Maker
Hornil StylePix v 1.7.0.2430
Paint.NET 3.5.7 Final
Green Box Logo Maker 1.0
Aleo Flash Slideshow Gallery Maker
Quick 3D Cover ver 2.0
FotoMix v.7.1
Teorex-Inpaint-v.2.4
CoffeeCup Web Form Builder 7.6
Flash Intro and Banner Maker 3.2
Aneesoft 3D Flash Gallery
AnvSoft Photo Flash Maker l 5.27
Focus Photoeditor 6.2.1
AntsSoft SWF Text v1.4
TBS Cover Editor 1.7.2.175
3D Text Commander 3.0.2
Insofta Cover Commander
Cutout Guide v2.0
Ultraslideshow Flash Creator
Photo Gallery Maker 2.80
Agama Web Buttons
Cristal Button
Easy Button & Menu Maker
Gif Construktor Set Pro
Sothink DHTML Menu
Flash Menu Labs Pro
JAlbum
CSS Menu Generator
Advanced JPEG Compressor
В этих разделах не только программы, но и много видеоуроков по этим программам. Как сделать меню для сайта, графику, занимающую маленький объём, анимацию для сайта, баннеры. В основном я стараюсь добавлять программы полезные для web-графики и web-дизайна. Так что здесь программы на любой вкус и для любых задач.
