С чего начать изучение веб-дизайна

Adobe Photoshop CS3

Пролог

Хотел бы рассказать небольшую историю, которая подойдет как эпиграф к этой статье. Года два назад я искал DVD диск на раскладках. Нужен был сборник дизайнерских программ, в котором, помимо Adobe Photoshop, Adobe Flash, Adobe Dreamweaver и Adobe Illustrator, были бы и CorelDraw, и несколько программ для создания иконок и скриншотов… Лень было искать и скачивать все по отдельности из интернета, а затем записывать на диск.

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

И тут парень засиял. С чувством собственного достоинства и с высоты своего дизайнерского опыта, он мне объяснил, что профессионалы сайты делают в Дримвивере. А остальные программы нужны для понторезов вроде меня. Он был так счастлив от переполнявших его знаний, что мне даже жаль было его прерывать и сообщать, что HTML-верстка сайта в Dreamweaver’е – это всего лишь один из этапов разработки сайта, далеко не первый и не последний.

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

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

(далее…)

Установка и настройка программы eMule

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

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

1. Скачайте программу eMule с официального сайта разработчика (2.3 Мб) или с зеркала (русскоязычный интерфейс для eMule, 3.2 Мб):

Выбор русского языка в eMule

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

Начало установки eMule
(далее…)

Чем бесплатно скачать любую программу

Скачать программу eMule Время от времени все мы хотим быстро и бесплатно скачать какую-то полезную программу. В интернете существует множество блогов и форумов, которые предлагают скачать бесплатно программы и фильмы. Но на деле оказывается, что после долгой и нудной регистрации нас просят отправить куда-то платную SMS, оправляют на официальный сайт разработчика или предлагают скачать с файлопомоек кучу архивов, из которых потом, если очень повезет, можно собрать нужную программу. Собрать из скачанных архивов программу получается не всегда: обязательно один кусок или не докачается, или его быстро удалят защитники голодающих миллиардеров. В итоге мы получаем кучу потерянного времени и испорченных нервов. Потому такой путь нам не подходит.

Хорошо, если бы была программа, которая сама бы искала и бесплатно скачивала нужную нам программу или фильм в интернете. Да без проблем! Такие программы появились давно и ими с удовольствием пользуются миллионы людей. Одна из наиболее популярных программ, которая позволяет скачать бесплатно любую информацию, называется eMule. О том, как ее устанавливать и настраивать, можно прочитать в статье Установка и настройка программы eMule.

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

Простой способ уменьшить фото в Фотошопе

В результате уменьшения размера фотографии в программе Photoshop вполне рально сделать из фото весом 2-5 Мб качественную фотографию на весь экран, но весом в 500 Кб или даже еще меньше. Эта статья будет полезной новичкам, которые делают первые вынужденные шаги в освоении Фотошопа и хотят быстро уменьшать свои фото.

8-мегапиксельными цифровыми фотокамерами сейчас никого не удивишь. Каждый день обычные люди, которые не являются гуру Фотошопа, делают горы снимков. Горы – если бы мы их распечатывали. Но нам нужно передавать эти файлы по ICQ, добавлять их в фотоальбомы социальных сетей вроде «Одноклассников» и «В контакте», выкладывать на своем блоге, слать по почте… Или отнести на флешке любимой тете Свете, она давно просила.

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

Устанавливаем Фотошоп. Без него нынче никак. Даже непрофессионалам Photoshop необходим. Рекомендую устанавливать версию Adobe Photoshop CS3, лично мне она больше всего нравится. Не будем спорить, какая версия программы самая лучшая, нам для уменьшения фото подойдет любая. Если вы не знаете, где бесплатно скачать Фотошоп, рекомендую ознакомиться с моей статьей Чем бесплатно скачать любую программу.

Открываем Photoshop. Перетаскиваем в него свое фото – просто зажимаем левой кнопкой мыши ярлычок фотографии и перетягиваем ее в видимую область Фотошопа, она откроется. Если так не нравится, можно открывать традиционно (File->Open…):

Открыть фото в Фотошопе

(далее…)

Растровые графические форматы для веб

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

1. JPEG: фотографии и красочные рисунки

Формат JPEG JPEG — очень популярный формат представления графики в интернет. Фотографии, картины, рисунки высокого качества с большим количеством цветов – все это сохраняется с расширением .jpg. Формат способен отображать 16,7 миллионов оттенков. Прозрачность и анимация не поддерживаются.

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

Изображения в формате JPEG, как и все остальные форматы для интернета, бесполезно архивировать – их размер не уменьшится, поскольку они уже являются архивом.
(далее…)

Векторная и растровая графика для web

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

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

Растровые (точечные) изображения

К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов JPEG, GIF, PNG, ICO, BMP. Это привычные нам фотографии, иконки и рисунки, которые состоят из точек (пикселей, растров).

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

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

Растровый формат GIF, позволяет создавать анимацию. Правда, она проще и дольше загружается, чем flash, зато сделать gif-анимацию, как правило, намного легче.

(далее…)

Код для вставки Flash в текст или шаблон блога

HTML код для вставки flash Казалось бы, тривиальная задача вставки flash-баннера или ролика в HTML-код своего сайта не заслуживает того, чтобы писать на эту тему целую статью. К сожалению, не все так просто. Существует множество вариантов кода для публикации Flash, при чем единственно правильного, однозначно понимаемого всеми браузерами и удовлетворяющего стандарты W3C, нет. И дело не только в том, что существует огромное количество вариантов того, в какой версии Flash создавался баннер, какие при этом использовались команды ActionScript, какой версией flash-плеера и в каком браузере будет просматриваться flash-анимация. Проблема еще и в том, что компания Microsoft при создании своего браузера Internet Explorer запретила реализовывать взаимодействие с интерактивным контентом, пока пользователь не активирует его сам. Примерно так же поступила и Opera. В результате появилось несколько десятков вариантов HTML-кода для вставки flash-роликов, у каждого из которого есть свои преимущества и недостатки.

Самым популярным и наиболее адекватным кодом для публикации flash на своем сайте является код, одновременно использующий элементы object и embed. В таком HTML-коде используется дублирующая запись вызова flash-ролика, зато вероятность правильной загрузки вашей анимации почти стопроцентная:

1
2
3
4
5
6
<object width="240" height="350"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="quality" value="high" /><param name="src" value="banner_name.swf" />
<embed type="application/x-shockwave-flash" width="240" height="350" src="banner_name.swf" quality="high"/>

</object>

Этот код HTML позволяет вставить на свою страницу баннер с именем banner_name.swf размером 240х350 и при этом достаточно flash-плеера 8й версии. Такой код генерировался средой разработки Macromedia Flash до выхода Adobe Flash 8.

(далее…)

Silverlight 2: альтернатива Flash от Microsoft

Microsoft Silverlight 2.0 Logo

Microsoft Silverlight 2.0 является конкурентом мощной и популярной технологии Adobe Flash. Компания Microsoft, по словам ее бывшего директора Била Гейтса, недооценила возможности интернета с точки зрения заработка денег. И теперь ей приходится догонять лидеров очень денежной сферы по продаже программного обеспечения. А сделать это будет не так чтоб просто – лидерам ведь тоже деньги нужны и останавливаться они не собираются.

Долгое время Flash был единственным решением для создания качественной сложной анимации. Флэшевые баннеры практически вытеснили своих gif-конкурентов, а скриптовая анимация была как раз тем исключением, которое только подтверждает правило. Гениальная разработка компании Macromedia приступила к завоеванию интернета еще во времена диал-апа, когда скорость загрузки сайта была гораздо важнее мигающей после загрузки анимации.
(далее…)

Как сохранить иконку сайта favicon в Photoshop

Если нужно создать иконку favicon.ico для своего сайта и нет желания скачивать и тем более платить за специальные программы по созданию иконок, можно обойтись только Фотошопом. К сожалению, даже версия Photoshop CS3 не умеет сохранять файлы в формате ICO. Эта проблема легко исправляется установкой специального плагина. Работы немного, зато плагин позволяет делать сколько угодно иконок быстро и удобно только в Фотошопе. Итак, что нужно делать:

1. Скачиваем специальный плагин для Photoshop, который дает возможность сохранять файлы в формате ICO:

Скачать плагин для Фотошопа, который позволяет сохранять файлы *.ico

Плагин упакован в архив icoformat.rar, весит 7 Кб. В версии Photoshop CS и Photoshop CS3 этот плагин работает точно, в других версиях тоже должен работать, но я лично не проверял.

2. Устанавливаем плагин. Закрываем Photoshop, копируем распакованный плагин icoformat.8bi в папку установки плагинов. Если вы устанавливали Photoshop CS3 в папку по умолчанию, то путь будет такой:

C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats\

Все. Теперь достаточно перезапустить Фотошоп и можно сохранять файлы в формате ICO. Для этого, после создания своей favicon, нажмите Ctrl+Shift+S или File->Save As…:

Сохранить иконку favicon в Photoshop

Если вам нужна подробная информация, как установить иконку favicon на свой сайт, как ее сделать и для чего она вообще нужна, читайте статью Как сделать иконку favicon.ico для своего сайта.

Как сделать иконку favicon.ico для своего сайта

Иконка favicon.ico представляет собой крошечную картинку размером 16х16 пикселей, которая отображается рядом с адресом вашего сайта или блога в браузерах, в результатах поиска, в закладках и т.д. Обычно такую иконку делают из логотипа или фрагмента логотипа компании на фоне корпоративного цвета или любой другой символ, который дизайнер посчитает запоминающимся и подходящим для тематики сайта. Например, иконка favicon для этого блога — Иконка favicon моего блога.

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

Иконки favicon появляется рядом со ссылкой в результатах поиска, например, в Яндексе:

Иконка моего блога в Яндексе

Иконки favicon отображаются перед адресом просматриваемого сайта почти во всех браузерах, в Избранном или Закладках браузера:

Иконка блога возле адреса сайта в Мозиле

Теперь научимся делать такие иконки для своего сайта или блога. Для этого нам понадобятся программы Adobe Photoshop CS3 и AWicons Pro. Если у вас нет этих программ и вы не знаете, где их можно бесплатно скачать, советую прочитать мою статью Чем бесплатно скачать любую программу.

(далее…)