Студия JS дизайн - Java - Часы

Часы

Если вы собираетесь использовать эти часы на своей страничке возьмите аплет Watch.class
Синтаксис:
<APPLET width=96 height=9 code="Watch.class"></APPLET>


Студия JS дизайн - Java - Волны

Волны

Это один из самых красивых аплетов, которые я видел в своей жизни. Если вы намерены использовать данный аплет на своей страничке возьмите его здесь: Lake.class

Синтаксис (надписи отмеченные красным необходимо откорректировать):
<applet code=Lake.class width=X height=Y >
<param name=image value="картинка.gif">
<param name=hrefа value="ssilka.htm">
</applet>
Вместо X введите ширину вашего изображения в пикселах.
Значение Y вычисляется так: удвоенная высота изображения минус 10.
Вместо "картинка.gif" укажите имя графического файла, из которого будет создан эффект. Может быть как gif так и jpg.
Параметер <param name=href value="ssilka.htm"> необезателен и нужен для того, чтобы нажав на анимацию в аплете перейти к другой страничке. Не забудьте исправить "ssilka.htm" на имя нужной странички.


Самодельная кнопка "назад"

Полезно создавать кнопку "назад" (back) на своей странице. Ниже находится небольшой скрипт позволяющий воплотить эту идею. Она реализована обычным HREF тегом, который используется для создания ссылок (надписи отмеченные красным необходимо откорректировать):

<A HREF="javascript:history.back()" onMouseOver="window.status='Назад';return true">Назад(или другой Ваш текст)</A>

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


Студия JS дизайн - Java-скрипт - Определение типа браузера

Определение типа браузера

Используйте html код приведенный ниже для пересылки со странички на другие странички в зависимости от типа браузера используемого пользователем (надписи отмеченные красным необходимо откорректировать):

<script language="JavaScript">
<!--
if (navigator.appName == "Netscape") window.location.href = "Netscape.htm";
else if (navigator.appName == "Microsoft Internet Explorer") window.location.href = "explorer.htm";
else window.location.href = "neizvestniy_brauser.htm";
// -->
</script>


Студия JS дизайн - Java-скрипт - Уничтожитель фреймов

Уничтожитель фреймов

Этот скрипт полезно использовать на главной страничке своего сервера. Нередко бывает, что другие неопытные создатели страничек делают ссылку на Ваш сайт из фрейма и забывают указать target="_top" и вследствие этого Ваша страничка грузится во фрейме. Так вот этот скрипт позволяет добиться такого эффекта, что при загрузке Вашей странички разбиение окна браузера на фреймы исчезает.

Синтаксис (надписи отмеченные красным необходимо откорректировать):

<SCRIPT LANGUAGE="JavaScript">
<!--
setTimeout ("changePage()", 100);

function changePage() {
if (self.parent.frames.length != 0)
self.parent.location="http://www.ваш.url";
}

// -->
</SCRIPT>


Прибамбас к фреймам

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

Синтаксис (надписи отмеченные красным необходимо откорректировать):

Этот скрипт при открытии страницы на которой он размещен на весь экран выдаст текст (при загрузки этой страницы во фрэйме этот текст конечно же будет отсутствовать):
Лучше смотреть с управляющим фреймом

<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
document.writeln("Лучше смотреть с <A HREF=\"index.htm\">управлющим фреймом</A>");
// -->
</SCRIPT>

А этот скрипт прямо пересылает на заглавную страницу без всяких вопросов

<SCRIPT LANGUAGE="JavaScript">
<!--
if (self.parent.frames.length == 0)
self.parent.location="index.htm";
// -->
</SCRIPT>


Студия JS дизайн - Java-скрипт - Выпадающее меню

Выпадающее меню

Хотите сделать такое меню:

Оно делается очень просто, синтаксис (надписи отмеченные красным необходимо откорректировать):

<form>
<select name="menu">
<option selected value="../soveti.htm">Советы
<option value="../kartinki.htm">Картинки
<option value="../web_design.htm">Веб дизайн
<option value="../moi_raboti.htm">Мои работы
</select>
<input type=button value="Ok"
onclick="top.location.href =
this.form.menu.options[this.form.menu.selectedIndex].value">
</form>

Слово selected определяет положение меню по умолчанию.
Если вы хотите использовать несколько выпадающих меню на странице - у каждого меню должно быть индивидуальное имя, у этого оно menu. Например если будет два меню тогда во втором меню пропишите menu1 вместо menu.


Студия JS дизайн - Java-скрипт - Дата обновления документа

Дата обновления документа

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

<SCRIPT LANGUAGE="JavaScript"><!--
document.writeln(document.lastModified)
// --></SCRIPT>

результат:

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

<FONT SIZE="-2">Документ обновлен:
<SCRIPT LANGUAGE="JavaScript"><!--
document.writeln(document.lastModified)
// --></SCRIPT></FONT>

результат: Документ обновлен:


Студия JS дизайн - Java-скрипт - Нажимающаяся кнопка

Нажимающаяся кнопка

Наверно Вы не раз видели как картинка сменяется другой картинкой при наведении на нее мышкой. Этот эффект реализуется при помощи Java-скрипта. Скрипт состоит из двух частей. Первая часть вставляется в html всего один раз. А вторую придется вставить столько раз сколько у Вас на страничке будет сменяющихся картинок. Как всегда надписи отмеченные красным необходимо подправить:

Первая часть:

<SCRIPT LANGUAGE="JavaScript">
<!--//

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }

function over(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }
function out(img,ref) { if (roll == 'true') { document.images[img].src = ref; } }

if (roll == 'true')
{
a1=new Image;a1.src="image1.gif";
a2=new Image;a2.src="image2.gif";
...
aX=new Image;aX.src="imageX.gif";

}
//-->
</SCRIPT>

В конце первой части скрипта производится подгрузка изображений нажимающихся кнопок. Необходимо подгрузить картинки нажатой и не нажатой кнопок.
...
aX=new Image;aX.src="imageX.gif";
Эти две строчки показывают то, что необходимо прописать подгрузку всех картинок. В работающем скрипте не должно быть троеточия и вместо X должно быть число

Вторая часть:

<A HREF="page.htm" onMouseOver="over('image_name','image2.gif');" onMouseOut="out('image_name','image1.gif');"><img name="image_name" alt="текст" src="image1.gif" width=x height=y border="0"></A>

Что есть что:
page.htm - имя файла ссылки
image_name - Имя картинки, необходимо чтобы java-скрипт знал какую картинку менять. У каждой картинки должно быть свое имя.
image1.gif - Файл не нажатой кнопки.
image2.gif - Файл нажатой кнопки (будет на месте картинки image1.gif при наведении на нее мышкой)


Студия JS дизайн - Java-скрипт - Меняем строку состояния мышкой

Меняем строку состояния мышкой

Если Вы хотите чтобы при указании на ссылку в строке состояния писался заданный Вами текст, то придеться немного доработать HREF тег (надписи отмеченные красным необходимо откорректировать):

<A HREF="страница.htm" onMouseOver="window.status='Ваш текст тут';return true">

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


Студия JS дизайн - Java-скрипт - Свой текст в строке состояния

Свой текст в строке состояния

Для того чтобы поместить свой текст в строку состояния браузера необходимо доработать BODY тег. Вот так (надписи отмеченные красным необходимо откорректировать):

<body .... onLoad="window.defaultStatus='Ваш текст тут'">


Студия JS дизайн - Java-скрипт - Автоматическая пересылка на страничку

Автоматическая пересылка на страничку

Используйте html файл приведенный ниже для пересылки со странички на другую страничку без вопросов у пользователя (надписи отмеченные красным необходимо откорректировать):

<HTML>
<HEAD>
<META HTTP-EQUIV="REFRESH" CONTENT="1; URL=http://www.куда.пересылать">
<script language="JavaScript"> <!--

window.location.href = "http://www.куда.пересылать"

// --> </script>
<CENTER><P><B><FONT SIZE=+4><A HREF="http://www.куда.пересылать">название сайта куда отсылаем</A></FONT></B></P></CENTER>
</BODY>
</HTML>


Студия JS дизайн - Java-скрипт - Бегающий треугольник

Бегающий треугольник

Хотите на своей страничке сделать подобный эффект? Делается все очень просто. Java-Script состоит из двух частей. Первая часть вставляется в html всего один раз. Вторая столько раз сколько ссылок рядом с которой будет появляться картинка (у меня треугольник появляется).

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

<SCRIPT language="Javascript">
<!-- //

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }

function load(location){
return image;
}

if (roll == 'true'){
tr=new Image();
tr.src="on.gif";
}

function show(where){
if (roll == 'true'){
stored=where;
storedLocation=document.images[where].src;
document.images[where].src="on.gif";
}

}

function hide(){
if (roll == 'true') document.images[stored].src=storedLocation;
}

// -->
</SCRIPT>

Вторая часть. Приведен пример с тремя ссылками (надписи отмеченные красным необходимо откорректировать):

<IMG SRC="off.gif" NAME="im1" BORDER=0 HEIGHT=11 WIDTH=8><A HREF="http://www.web.ru/Graphics/" onMouseOver="show('im1')" onMouseOut="hide()" >Графика для WEB`а</A><BR>

<IMG SRC="off.gif" NAME="im2" BORDER=0 HEIGHT=11 WIDTH=8><A HREF="http://www.mplik.ru/~vmstudio" onMouseOver="show('im2')" onMouseOut="hide()" >ГРАФИКА и ИНТЕРНЕТ</A><BR>

<IMG SRC="off.gif" NAME="im3" BORDER=0 HEIGHT=11 WIDTH=8><A HREF="http://www.zhurnal.ru/develop/tutorial/pictures.htm" onMouseOver="show('im3')" onMouseOut="hide()" >Картинки</A><BR>

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

В HEIGHT=11 WIDTH=8 установите размеры картинки on.gif

Если Вы хотите сделать более трех ссылок заметьте что у каждой ссылки свое значение NAME="imX" и show('imX')


Студия JS дизайн - Java-скрипт - Использование буквы я в java-script`е

Использование буквы я в java-script`е

Если Вы используете Netscape Navigator или Communicator Вы наверняка попадали на такие странички, где браузер начинал бесится (Navigator выдает сообщение об ошибке в java-script`е, а в Communicator`е открывается куча окошек и его приходится прерывать). И все это получается из-за того, что на страничке используется буква "я" в java-script`е. Самое удивительное это то, что IE работает с буквой "я" корректно. Перейдем сразу к делу: чтобы с буквой "я" нормально работал IE и Netscape необходимо перед буквой "я" ставить косую черту "\" - вот такой простой, но очень актуальный совет.


Студия JS дизайн - Photoshop - Изучаем панель инструментов

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


Студия JS дизайн - Photoshop - Рисуем трехмерную кнопку стиль "1"

Для изготовления кнопки нам потребуется черно-белый трехмерный шар. Для его изготовления используем фильтр KPT Spheroid Designer 3.0. Если у вас такового нет, то возьмите мой 100x100 пикселов и уменьшите его до необходимого размера (предварительно переключитесь в RGB режим).
Попробуем сделать кнопку средней величины. Уменьшаем шар до размера 25x25 пикселов. Командой Image/Duplicate создаем две копии изображения. У первого изображения командой Image/Canvase Size обрезаем правую половину, у второго левую, а у третьего обрезаем края так чтобы его ширина стала 1 пиксел.
1
2
3

Командой Image/Image Size увеличиваем ширину третьего изображения до 125 пикселов (не забудьте убрать галку в окошке рядом с надписью Constrain Proportions).

Переходим к первому изображению. Выделяем его командой Select/All или клавишами CTRL+A. Копируем его Edit/Copy(CTRL+C). Вставляем его в третье изображение и передвигаем влево. Со вторым изображением поступаем также только помещаем его справа. Совмещаем все слои в один Layer/Flatten Image.

Командой Image/Adjust/Hue/Saturation (Saturation ставим около 60, а Hue в зависимости от желаемого цвета, (не забудьте включить Colorize)) задаем цвет.

Пишем текст на кнопке.

Можно создать эффект того что кнопка парит в воздухе, отбросив от нее тень фильтром Eye Candy 3.0/Drop Shadow.


Студия JS дизайн - Photoshop - Рисуем трехмерную кнопку стиль "2"

Для изготовления кнопки создаем новое квадратное изображение к примеру 50x50 пикселов. Создаем выделение [image] аокружностью .
Выбираем светлый цвет для первого цвета, а темный для второго. Используя заполнение [image] авнутри выделения заполняем окружность от светлого к темному
Командой Select/Modify/Contract уменьшаем выделенную окружность и заполняем ее теми же цветами только в обратном направлении.
А теперь можно что ни будь написать на кнопке и отбросить от нее тень.


Студия JS дизайн - Photoshop - Создаем "бэкграунд"

Создаем Бэкграунд

Возьмем картинку из которой ми хотим сделать бэкгрунд. Для ее изготовления я создал новое изображение 100x100 и использовал фильтр KPT Texturer Explorer 3.0. Вот как будет выглядеть страничка если установить эту картинку бэкграундом.

Используем Filter/Other/Offset и смещаем картинку на 50% изображения по горизонтали и вертикали (не забудьте выбрать Wrap Around).

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


Студия JS дизайн - Photoshop - Пишем огнем

Создадим новое изображение к примеру 300x100 пикселов и пишем на нем текст черным цветом, желательно чтобы шрифт был жирным. Совмещаем слои командой Layer/Flatten Image.
Применяем фильтр Filter/Pixelate/Crystallize Cell Size от 4 до 6
Делаем изображение негативным Image/Adjust/Invert (Ctrl-I) и поворачиваем его на 90o градусов по часовой стрелке Image/Rotate Canvas/90o CW.
Применяем фильтр Filter/Stylize/Wind Method-Wind Direction-From the right. Используем фильтр Filter/Distort/Ripple Amount-40 Size-Large. И возврвщаем изображение в горизонтальное положение Image/Rotate Canvas/90o CСW.
Придаем изображению цвет огня Image/Adjust/HueSaturation включаем Colorize и ставим значение Hue от 30 до 50 и Saturation от 80 до 100.


Студия JS дизайн - Photoshop - Рисуем трехмерную кнопку стиль "3"

Создадим новое квадратное изображение, к примеру 50x50а пикселов. Выбираем светлый цвет для первого цвета и темный для второго. Используем инструмента [image] и заполняем изображение так как показано на рисунке.
Используем команду Select/All (CTRL A), а затем SELECT/MODIFY/BORDER и в поле Width вводим небольшое число, я использовал 5. Затем опять используем инструмент [image] ано заполняем в обратном направлении.
А теперь напишем какой-нибудь текст на кнопке.


Студия JS дизайн - Photoshop - Тень

Тень

Создадим новое изображение и напишем текст [image].

Используем команду Select/Load Selection ,а там в Chennel: Layer 1 Transparency. Потом Layer/Flatten Image. Затем запускаем фильтр Drop Shadow из набора Eye Candy 3.0 . Установите параметры по вашему вкусу.


Студия JS дизайн - Photoshop - Выдавливание

Выдавливание

Подбираем хороший фон для выдавливания.
Создаем новый Chanel : Chanels/New chanel. Закрашиваем белым цветом области рисунка которые предполагается выдавливать.

Переходим в chanel RGB и загружаем выделение: Select/Load Selection. Затем используем плюгин Inner Bevel из набора Eye Candy 3.0. Устанавливаем параметры по вкусу. Далее жмем Select/Inverse и Edit/Fill, для заполнения используем Белый цвет (White).

И напоследок отбрасываем тень.


Студия JS дизайн - Photoshop - Лед

Лед

Создадим новое изображение и напишем на нем текст [image] черным цветом. Затем Select/Load Selection и Layer/Flatten Image.
Выполним команду Select/Inverse, и применим фильтр Filter/Pixelate/Crystallize с коэффициентом кристаллизации 8.
Опять выполняем команду Select/Inverse, и применяем фильтр Filter/Noise/Add Noise с коэффициентом шума около 70 (не забудьте включить Distribution: Gaussian).
Размываем избражение фильтром Filter/Blur/Gaussian Blur с коэффициентом размывки около 2. Затем отменяем выделение Select/None и используем фильтр Filter/Blur/Blur.
Выполняем команду Image/Adjust/Invert (Ctrl-I).
Выполняем команду Image/Rotate Canvas/90 CW. Затем применяем фильтр Filter/Stylize/Wind. (Method: Wind, Direction: From the left) и возвращаем картинку в горизонтальное положение Image/Rotate Canvas/90 CCW.
Придадим изображению цвет льда с помощью команды Image/Adjust/HueSaturation (Включите кнопку Colorize, установите параметр Hue в положение -175, а Saturation - 80)
Добавим искрящиеся блики с помощью дополнительных кистей. В меню Brushes выберите команду Load Brushes и откройте файл assorted.abr из подкаталога Brushes. Установите текущим белый цвет и нанесите искорки на некоторые выступающие льдинки.


Студия JS дизайн - Photoshop - Эффекты с фоткой

Эффекты с фоткой

Для начала подбираем фотку.
Создаем новый channel - channels/New channel. Создаем выделение прямоугольником [image], затем Select/Inverse и заливаем его белым цветом (Edit/Fill Use:White).
Отменяем выделение - Select/None и используем какой-нибудь фильтр, например Filter/Pixelate/Color Halfone (Параметры подберите по вкусу).
Переходим обратно в RGB channel и загружаем созданный нами шаблон - Select/Load Selection/#4. Затем заполняем (Edit/Filд) цветом фона на котором будет лежать фотка. Готово :).
Ниже приведено несколько примеров с разными фильтрами:
Filter/Brush Strokes/Sprayed Strokes | Filter/Distort/Ripple
Filter/Scetch/Water Paper | Filter/Texture/Stained Glass


Студия JS дизайн - Photoshop - Фотомонтаж

Фотомонтаж

Подбираем две картинки с которыми будем делать фотомонтаж. | фон: картинка:
Переходим в картинку и выделяем часть картинки которую мы хотим переносить при помощи инструмента path [image] . |
Открываем меню Paths - Window/Show Paths, а там в меню выбираем Make Selection (Anti-aliased включено и Feather Radius = 1). Затем копируем полученное выделение - Edit/Copy, переходим в картинку с фоном и вставляем туда скопированную часть - Edit/Paste. Используя инструмент [image] аи размещаем вставленную часть подобающим образом. Вот и все :) |


Студия JS дизайн - Photoshop - Разбитый текст

Разбитый текст

Создадим новое изображение и напишем текст
Select/Load Selection/Layer 1 Transparency, затем Select/Inverse и Save Selection. Переходим в созданный нами channel, жмем Select/Inverse и применяем фильтр Filter/Noise/Add Noise Amount ставим в положение 300-400.
Запускаем фильтр Filter/Pixelate/Crystallize с Cell Size 20-30. Затем используем фильтр Filter/Stylize/Glowing Edges с параметрами: Edge Width - 2, Edge Brightness - 20 и Smoothness - 1. Отменяем выделение - Select/None и применяем фильтр Filter/Blur/Smart Blur с параметрами: Radius - 1 , Threshold - 0.1, Quality: High, Mode: Overlay Edge.
Загружаем выделение - Select/Load Selection/#4, затем Select/Iverse, Select/Modify/Expand by 1 pixel и Select/Inverse. Потом переходим на слой с текстом и используем команду - Edit/Fill/White. Применяем Layer/Flatten Image и фильтр Filter/Eye Candy 3.0/Drop Shadow (параметры установите по вкусу). Все.


Студия JS дизайн - Photoshop - Скругленые углы

Скругленые углы

Создаем новый chanel. Рисуем на нем то, что собираемся скруглить

Запускаем фильтр Filter/Blur/Gaussian Blur параметр Radius устанавливаем в зависимости от желаемого округления (чем больше значение Radius тем боле скругленными будут углы), я использовал значение Radius: 4 pixels.

Использеум команду Image/Adjust/Levels. В открывшемся окне необходимо переместить крайние треугольники ближе к центральному. Их необходимо расположить так ,чтобы изображение было четким, и гладким по краям.


Студия JS дизайн - Photoshop - Вдавленная надпись

Вдавленная надпись

Вот у нас есть кнопка и на ней мы хотим сделать вдавленный текст. Делается все это очень просто.

Создаем выделение (selection) в виде текста

Создаем новый слой - Layer/New/Layer. Затем заливаем по выделению белым цветом - Edit/Fill (установки - Use: White и Opacity: 100%)

В менюшке Layers (Если менюшку невидно включить ее можно командой Window/Show Layers) возвращаемся обратно в Background. Потом размываем выделение командой Select/Feather с установками Feather Radious: 1 pixels. Затем смещаем выделение вверх и в лево на 1 пиксель, для этого жмем по одному разу кнопки верх и лево. И еще проверьте чтобы во время перемещения выделения не была нажата кнопка [image]. Затем используйте команду Image/Adjust/Brightness/Contrast и установите значение Brightnes: -100.

Смещаем выделения вниз и в право на 2 пикселя нажатием по два раза кнопок право и низ. Потом используем команду Image/Adjust/Brightness/Contrast с установками Brightnes: 100. Готово :)

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


Студия JS дизайн - Советы

Советы, секреты, практикум

Логотип. Как это делается
Содержание странички
Прежде чем начать
Уникальность
Куда пойти учиться?
Размышления о фреймах
Чайнику
Сервера раздающие бесплатные веб страницы
Сервера раздающие бесплатные счетчики
Правила хорошего тона в веб дизайне
Нарезка изображений
Активные картинки
Текст и Шрифт
Фон в таблице
Подсвечивание ссылки
Как запретить пользователю изменять размер шрифта?
На самом краю
После загрузки на сервер пропадает картинка или не работает ссылка
Мгновенная загрузка изображений
 Лишнее расстояние между картинками

Photoshop

Изучаем панель инструментов
Создаем тень
Выдавливание
Скругленые углы
Рисуем трехмерную кнопку стиль "1"
Рисуем трехмерную кнопку стиль "2"
Рисуем трехмерную кнопку стиль "3"
Создаем "бэкграунд"
Пишем льдом
Эффекты с фоткой
Фотомонтаж
Разбитый текст
Пишем огнем
Вдавленная надпись

HTML

Создаем фреймы
Ссылка на EMAIL
Добавляем звук и видео на страничку

Java

Волны
Часы

Java-скрипт

Нажимающаяся кнопка
Бегающий треугольник
Выпадающее меню
Уничтожитель фреймов
Автоматическая пересылка на страничку
Определение типа браузера
Прибамбас к фреймам
Использование буквы я в java-script`е
Дата обновления документа
Свой текст в строке состояния
Самодельная кнопка "назад"
Меняем строку состояния мышкой


Студия JS дизайн - Советы - Чайнику

Чайнику

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

Для начала необходимо освоить какой-нибудь WYSIWIG редактор. Я советую Microsoft Front Page или Встроенный редактор Netskap`а. Многие описывали данные программы но не рассказывали о их существенных недостатках:

1. Они имеют свойство делать вызов файла локально, то есть указывают полный путь к файлу, например C:/serv/img.gif (на самом деле file:///C:/serv/img.gif) и тогда у вас страничка после закачки выглядит нормально, но у других людей, у которых нет файла img.gif в директории serv на диске C она выглядит ужасно (наверно вы не раз видели прямоугольники с подранным листком слева вверху). Эта неприятность обычно возникает когда используются команды copy и paste над картинкой. Поэтому следует либо не использовать данные команды, либо проверять файл странички после сохранения на наличие file:/// .

2. Когда долго работаешь в Netscape Editor`е 3.0 с таблицами он имеет свойство зависать, а также если указываешь в нем border=0 для таблиц он вообще не включает тег border в документ (и если тег border не указан, при просмотре Netscape берет значение border=2 а Internet Explorer border=0).

Хочу отметить, что при создании файлов следует придерживаться некоторых правил. Большинство серверов работает под операционной системой UNIX, она немного отличается по устройству от Виндов - чувствительна к регистру файлов, то есть img.gif и img.GIF под UNIX`ом разные файлы. Я советую пользоваться таким правилом: создавать все файлы маленького регистра, т.к. некоторые программы под Виндами могут искажать имена файлов, например если закачивать файл Img.gif при помощи программы CuteFTP после закачки он превращается в IMG.GIF, вот такие бывают чудеса :)

И так вы уже создали простенькую страничку с парой картинок. Теперь стоит подумать о выборе местечка под страничку. Если вы выбрали сервер без перекодировки то уже можно приступать к закачке, для этого необходимо использовать какую-нибудь FTP программу, я советую CuteFTP . А если сервер с перекодировкой (предпочтительней, потому что вашу страничку смогут читать пользователи разных операционных систем), то скорее всего необходимо закачивать на него файлы в кодировке KOI-8 (стандартная кодировка кириллицы под UNIX`ом) для этого необходимо эти файлы перекодировать в эту самую KOI-8. И теперь закачиваем файлы используя тот же CuteFTP.


Студия JS дизайн - Советы - Счетчики

Счетчики

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

Российские

counter.rambler.ru | Неплохой счетчик посещений, помимо счетчика - статистика посещения странички. А по желанию Вас включат в рейтинг серверов (Top 100).
counter.dux.ru | Здесь можно выбрать счетчик почти с любым начертанием.

Иностранные

Еще один очень интересный счетчик, он сделан на JAV`е. Он показывает как крутятся диски счетчика когда заходишь на страничку. И если вы находитесь на своем сайте и к вам заходят посетители, то счетчик покажет это, переключаясь на ваших глазах. Для его установки необходимо вставить следующий код на Вашу страничку, заменив красный текст на свой URL (адрес странички):

<applet ARCHIVE=http://counter.bloke.com/Counter.zip CODEBASE=http://counter.bloke.com/ CODE=Counter.class WIDTH=75 HEIGHT=20>
<param name=URL value="http://смени.на.свой.url">
</applet>


Студия JS дизайн - Советы - Ссылка на EMAIL

Ссылка на EMAIL

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

Если вы хотите чтобы в почтовой программе кликнувшего на ссылку указывался ваш EMAIL в месте где вы обычно пишите имя файла ссылки введите:

mailto:ваш@email.ru,

HTML код будет соответственно выглядеть так:

<A HREF="mailto: ваш@email.ru">EMAIL</A>

Также вместе с email`ом можно указать ваше имя и фамилию:

mailto: Имя Фамилия <ваш@email.ru>,

А еще можно задать subject. Например вы хотите сделать ссылку для сообщении о "глюках" на вашем сервере :)

mailto:Имя Фамилия <ваш@email.ru>?subject="bugs"


Студия JS дизайн - Советы - Фрэймы

Фрэймы

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

1. Создается html файл (обычно это первая страничка сервера по имени index.htm) в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма.

2. Создаются отдельные html странички для каждого фрейма.

Попробуем создать html файл реализующий разбиение экрана на две части. Для этого нам понадобится два обычных html файла с именами homepage.htm и menu.htm. Главный файл обзовем к примеру index.htm, вот как он должен выглядеть:

<HTML>
<TITLE>Название вашей странички</TITLE>
<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
</HTML>

Рассмотрим каждый тэг по отдельности:

<HTML></HTML> и <TITLE><TITLE> - стандартные тэги для всех html файлов

<FRAMESET> в этом тэге задается количество рядов или столбцов ROWS и COLS соответственно, а также их размеры и расположение. Существует три способа задания их размера:

по пикселам - просто напишите высоту или ширину в пикселах.
процентами - пишите сколько процентов от окна браузера вы хотите отдать фрейму и после цифр ставите знак % Также позаботьтесь чтобы все ваши %`ы в суме составляли 100%.
звездочка - все оставшееся место в окне равняется значку *. Например вы можете написать 20%,20%,60% или 20%,20%,* и никакой разницы не будет.

В этом же тэге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где x и y толщина в пикселах.

В нашем случае (<FRAMESET cols="*,140">) мы разделяем окно на два столбца, правое шириной в 140 пикселов, а левое шириной во весь оставшийся экран

<FRAME> - здесь задаются атрибуты для каждого фрейма персонально.

Команда SRC задает имя файла который загрузится в этом фрейме, в нашем случае имя файла homepage.htm (<FRAME SRC="homepage.htm" ...).

Команда NAME задает имя данного фрейма, в нашем случае имя "frame1" . Имя необходимо для того чтобы в последствии указать к какому фрейму использовать ссылку. К примеру мы хотим чтобы нажимая на ссылку в фрейме содержащем файл menu.htm содержимое файла ссылки показывалось в фрейме содержащем файл homepage.htm. Для этого нам необходимо откоректировать html код ссылки:

<A HREF="file.htm">file</A> - что было
<A HREF="file.htm" TARGET="frame1">file</A> - что должно быть
А если вы хотите чтобы файл загрузился в главном окне браузера то напишите в ссылке TARGET="_top"

Также в этом тэге можно задать величину граници фрейма за которую ничего кроме бэкграунда не может заходить. Это делается командами MARGINWIDTH="x" и MARGINHEIGHT="y", где x и y величина в пикселах.

</FRAMESET> закрывающий тэг.

Вот несколько примеров создания фреймов:

<FRAMESET cols="*,140">
<FRAME SRC="homepage.htm" NAME="frame1">
<FRAME SRC="menu.htm" NAME="frame2">
</FRAMESET>
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="45%,55%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
</FRAMESET>
</FRAMESET>
<FRAMESET cols="*,55%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
<FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>

А теперь на закуску несколько трюков с фреймами:

1. Если ваш сервер поддерживает кэширование можно создать один невидимый фрейм (толщиной в 0 пикселов) и загружать в нем разные картинки чтобы они в последствии моментально грузились в другом документе.

2. А еще можно создать фрейм соответствующий размеру картинки бэкграунда , выключить бордюр и окаймляющую рамку и тогда когда документ загрузится он будет выглядеть как обычный одно-экранный документ.


Студия JS дизайн - Советы - Правила хорошего тона в веб дизайне

Правила хорошего тона в веб дизайне

Желательно чтобы сайт нормально выглядел как в Netskap`е так и в Internet Explorer`е и в разных режимах монитора (640X480, 800X600, 1024X784). Правда я считаю, что рассчитывать на пользователей с разрешением 640X480 неверно, потому что большинство работает в 800X600 и все больше переходит к 1024X768.

Не стоит использовать на страничке много анимации или JAV`ы, у некоторых одна картинка или JAVA аплет грузится более минуты. Также не очень здорово когда на страничке установлены часы или бегущая строка.

Еще один очень важный момент - это использование правильных цветов на страничке. Текст должен быть контрастным и прекрасно читаться.

При использовании лBACKGROUND`а» необходимо установить цвет под слойки (BGCOLOR) похожим на цвет картинки используемой в качестве лBACKGROUND`а»

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

Не желательно использовать значки типа лUnder Construction», хороший сайт должен и так постоянно обновляться.

Если вы создаете корпоративный сайт не используйте картинки из бесплатных коллекций

Чтобы расположить все на страничке подобающим образом, хорошо использовать таблицу со значением BORDER=0. Для создания отступов можно использовать прозрачный gif размером 1x1 пиксель используя теги HSPACE и VSPACE для достижения нужной цели.

Желательно предложить альтернативную версию сайта - без наворотов для пользователей старых браузеров и низкоскоростных соединений.


Студия JS дизайн - Советы - Сервера раздающие бесплатные веб страницы

Сервера раздающие бесплатные веб страницы

РОССИЙСКИЕ
www.chat.ru | Дают 3mb дискового пространства и email. Регистрация через WWW форму. Основная кодировка сервера koi-8, но на нем есть файл менеджер который автоматически перекодирует ваши файлы в нужную кодировку. Возможна загрузка zip файла который автоматически распаковывается (очень удобно). Сервиса почти нет, но говорят, что скоро сделают. Также можно работать по FTP.
www.i-connect.ru | Выделяют 2mb дискового пространства и 1mb под email. Регистрация через WWW форму. Доступ к серверу по FTP. Из CGI-скриптов есть счетчик посещений и часы. Говорят что можно самому написать CGI-скрипт на perl`е и отдать администратору, который после проверки кинет его в директорию CGI-BIN.
home.vibor.ru | Предоставляют 2mb на диске. Доступен только для пользователей Intenet Explorer`а , потому что Netscape не берет их глюкавую страничку на которой происходит регистрация. Доступ к серверу по FTP.
www.halyava.ru | Места дают всего 512kb. Каждому пользователю странички дают email. На каждую страницу впихивают свой банер с рекламой (очень неприятно). Страницы надо обновлять не реже раза в 2 месяца (тоже очень плохо, вдруг в отпуск уедешь или на АТС ,что-нибудь нехорошее случится). Загрузка файлов по EMAIL`у или FTP.
lgg.orc.ru | Место для пользователей пока не ограничивают, единственное это то, что страничка должна быть в готовом виде и соответствовать какой либо теме. Предоставляется неограниченный по размерам E-mail ящик, разрешено использовать CGI, и будующем планируется предоставлять еще и личный FTP. Доступ к серверу осуществляется по FTP любой удобной для пользователя программой. Запрещено размешать странички комерческого содержания.
ИНОСТРАННЫЕ
www.geocities.com | Санта Моника, Калифорния, США Самый известный сервер раздающий бесплатные страницы и email. Регистрация производится через www форму, необходим существующий почтовый ящик в него придет письмо с паролем. На один email дают одну страничку. Объем файлов 3mb. Прежде чем разместить свою страницу вы должны выбрать район. После выбора района вы ищете свободный номер под которым и будете дальше жить.


Студия JS дизайн - Советы - Добавляем звук и видео на страничку

Добавляем звук и видео на страничку

Вы можете добавить на свою страничку звуки или видео клипы. Они могут запускаться автоматически при загрузке странички. Вот несколько примеров использования звуковых/видео клипов:

WAV файл со стандартным пультом управления:
<EMBED SRC="файл.wav" WIDTH=145 HEIGHT=55></EMBED>

MIDI файл со стандартным пультом управления:
<EMBED SRC="файл.mid" WIDTH=145 HEIGHT=55></EMBED>

Если Вы просто хотите сделать ссылку на звуковой файл:
<A HREF="фаил.wav">текст</A>

AVI видео:
<EMBED SRC="файл.avi" WIDTH=300 HEIGHT=200></EMBED>

Ниже находится список атрибутов которые вы можете использовать для достижения нужной цели (все они используются в теге <EMBED ...></EMBED>):
SRC=name.ext - имя звукового, видео клипа.
ALIGN=CENTER - расположения пульта управления (LEFT | CENTER | RIGHT).
WIDTH=X - где X ширина видео клипа в пикселах.
HEIGHT=Y - где Y высота видео клипа в пикселах.
AUTOSTART=TRUE - разрешает или запрещает браузеру запускать клип при загрузке странички (TRUE | FALSE).
REPEAT=TRUE - разрешает или запрещает повторять звуковой/видео клип (TRUE | FALSE) .
PLAY_LOOP=Z - если Вы указали REPEAT=TRUE, укажите здесь вместо Z количество повторений.
CONTROLS=SMALLCONSOLE - используйте этот атрибут если хотите, чтобы пульт управления был маленьким.
HIDDEN=TRUE - а этот атрибут необходим для того, чтобы не показывать пульт управления (TRUE | FALSE).


Секреты HTML

Лишнее расстояние между картинками.

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

<

img src="image1.jpg">
<img src="image2.jpg">

В таком случае Netscape оставляет расстояние между картинками. Чтобы этого не происходило, не вставляйте пробелы и перевод строки между тэгами:

<

img src="image1.jpg"><img src="image2.jpg">

В таком случае все изображается правильно. То же самое относится и к рисункам в таблицах: все тэги от <td> до </td> лучше писать в одну строку без пробелов:

<

td><img src="image1.jpg"><img src="image2.jpg"></td>


Секреты HTML

Мгновенная загрузка изображений.

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

<

img src="image.jpg" height=1 width=1>

При этом картинка загружается, но остается невидимой. Этот тэг надо вставлять в самом конце body-части, чтобы загрузка не мешала показу самой странички.
Этот же прием можно использовать и для других целей. Например, если вы хотите разместить счетчик на странице, но не хотите, чтобы ваши поситители его видели, пока он не наберет 100 000.


Секреты HTML

После загрузки на сервер пропадает картинка или не работает ссылка.

Вы создали страничку и проверили ее на своем компьютере - все прекрасно работает. Пришла пора загрузить все на сервер. И после загрузки вы с удивлением обнаруживаете, что некоторые картинки пропали. Дело в том, что серверы обычно работают под операционной системой Unix, которая, в отличие от Windows, чувствительна к регистру букв (большие или маленькие) в именах файлов - так если файл называется image.jpg, то ссылка Image.jpg не будет работать на сервере. Внимательно проверьте все ссылки и имена файлов перед загрузкой.


Секреты HTML

На самом краю.

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

<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>

На самом деле последние два дублируют первые два - дело в том, что Netscape понимает marginwidth=0 marginheight=0, а Internet Explorer - leftmargin=0 topmargin=0.
Такая штука пройдет в Netscape 4 и Explorer 3 и 4, чтобы заставить сделать тоже самое третий Netscape придется повозиться с фреймами.


Секреты HTML

Как запретить пользователю изменять размер шрифта?

В любом броузере пользователь может изменить заданный вами в HTML размер шрифта, при этом часто при большом размере сложный дизайн, построенный на таблицах, начинает трещать по всем швам и разъезжаться.
Запретить пользователю изменять размер можно используя каскадные таблицы стилей CSS. При этом Internet Explorer 4 не позволит изменять размер шрифта, если задать его в любых единицах измерения, а Netscape 4 только если задать размер в пикселях (px), а не пунктах (pt).

<

head>
<style>
.noresize { font-size : 12px; }
</style>
</head>

<body>
<div class="noresize">Попробуй измени</div>
</body>

или непосредственно

div style="font-size: 12px;">Попробуй еще раз/div>

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


Секреты HTML

Подсвечивание ссылки.

Сделать ссылку изменяющейся, когда над ней оказывается курсор мыши очень просто (в Internet Explorer 4). Для этого надо использовать каскадные таблицы стилей (CSS) - вставляем в head:

<

style>
A { color : #0000FF; }
A:Hover { color : #FF0000; }
</style>

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

A { text-decoration : none; }

Работает в обоих броузерах 4 версий. Как я уже писал, изменять текстовые ссылки под мышью позволяет только IE4, что переполняет его любителей чрезмерной гордостью за фирму Microsoft и заставляет писать: "Этот сайт содержит элементы оформления, поддерживаемые только Internet Explorer". Однако, сделать это можно и в четвертом Netscape. Не верите? Пожалуйста. Приятного копания в коде.


Секреты HTML

Фон в таблице.

И Netscape и Internet Explorer позволяют задавать фоновый рисунок не только для всей страницы в тэге body, но и для таблиц и даже отдельных ячеек таблицы. Это очень полезное свойство позволяет создавать интересные эффекты, например накладывать один рисунок на другой (попробуйте сохранить водочные этикетки в статье про шрифт) однако не все так хорошо, как кажется.

Начнем с Netscape - 3 версия про фон в таблицах вообще ничего не знает, тут уж ничего не попишешь. А вот четвертая версия имеет так сказать «особенность» - если задать фон для таблицы, то он будет начинаться с каждой новой ячейки заново - в результате любая ваша задумка будет напрочь испорчена.

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

<

table background="back.gif">

А для внутренней что бы вы думали - ? -

<

table background="">

Теперь про IE - в 4 и 5 версиях все нормально, а вот в третья показывать-то фон умеет, да как-то кривовато. По моим наблюдениям, IE3 правильно отображает фон, заданный для самой таблицы, но выдает нечто несуразное, если задавать фон для отдельной ячейки. Выход - стараться создавать страничку так, чтобы применять фон к таблице целиком, а не к ячейкам. Обычно этого можно добиться правильным разбиением на ячейки и применением вложенных таблиц. Другое решение предлагает Иван Бойко - прописывать для ячейки таблицы

<

td background="background.gif" background="">

Все основные браузеры, кроме IE3, воспринимают первый параметр, а IE3 - последний и соответственно просто не будет показывать фон вообще.

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


Logo | Как енто делается

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

Итак приступим...

Введение

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

Автору неоднократно приходилось выслушивать пожелание, чтобы один только внешний вид логотипа привлекал к фирме новых клиентов. В качестве примера для подражания приводилась как правило торговая марка Мерседес фирмы Даймлер Бенц: простой донельзя знак, а как много нам всего говорит. Но позвольте, ведь именно качество автомобилей принесло известность и популярность знаку, а никак не наоборот.

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

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

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

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


Logo | Как енто делается

Эти уже...

В повседневной жизни мы постоянно сталкиваемся с тысячами логотипов. Некоторые быстро забываются или же просто проходят не замеченными. Другие откладываются в нашей памяти благодаря каким-то удачным/неудачным изюминкам или из-за вызываемых ассоциаций.

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

1. Только текст.
2. Только знак.
3. Комбинированное исполнение: знак+текст.

Остановимся на каждом способе более подробно.

Только текст

Логотип изготавливается путем написания названия фирмы/товара выбранной шрифтовой гарнитурой. В зависимости от типа использованной гарнитуры данную группы можно разделить на две подгруппы: классическое исполнение и декоративное исполнение. К классическим шрифтам отнесем шрифты с засечками типа Times и рубленные типа Pragmatica:

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

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

Не без исключений.

Выделить свой логотип можно частой рекламой и/или высоким качеством сопровождаемой продукции, как это сделали, к примеру, электронные гиганты Sony и Matsushita (Panasonic).

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

Отмечу, что не всегда (практически никогда) декоративная гарнитура и оригинальная есть одно и то же. Никогда не используйте декоративные гарнитуры из стандартных (Windows, MS Office, Corel и др.) шрифтовых наборов. Такой логотип СОЧТЕТ ДЕШЕВКОЙ каждый дизайнер (имеющий дело со шрифтами в силу своей професси), а также каждый, кто видел эту гарнитуру в другом исполнении (в рекламе, журналах, других логотипах).

Только знак

Для того, чтобы клиенты с одного взгляда на знак узнавали организацию, необходимо либо провести массированную рекламную атаку с целью отложения в сознании масс стойкой ассоциации знака с названием фирмы, либо само название превратить в знак. Как дизайнеров нас интересует второй вариант. Отметим, что он реален только если название организации-заказчика НЕ ДЛИННОЕ - как правило 3-4 буквы и менее. Так слово "Sun" легче превратить в знак, чем газвание типа "Украина-Русь". Чем больше букв в слове, тем сложнее сплести их друг с дружкой, и тем труднее получившийся знак читается (и, следовательно, запоминается), не говоря уже о размерах и количестве деталей.

Вот примеры логотипов типа "только знак":

Текст + знак

Этот тип логотипов объединяет в себе два предыдущих и наиболее распространен по следующим причинам. Использование изобразительного элемента в логотипе делает его, во-первых, более запоминаемым (чего не скажешь о текстовых логотипах), и во-вторых, позволяет сделать длинное имя вашего заказчика визуально более привлекательным.

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

Как правило знак либо располагается сверху, либо предшествует сопровождаемому слову

Реже в качестве знака выступает одна или несколько букв слова. В этом случае в знаке должна однозначно читаться опущенная буква, либо cам знак должен помещаться внутри области, однозначно описывающей букву (как правило, буквы D, I, O или Q )

Не забудем и о такой важной составляющей логотипа, как рекламный слоган. Навязать потребителю прямую взаимосвязь между фирмой клиента и качеством его товара/услуг можно не только визуально (а визуально это сделать намного труднее), но и простым лаконичным, по возможности стихотворным, легко запоминающимся словосочетанием - слоганом. Удачный слоган обречен не расставаться с именем фирмы долгие годы и поправу занимает свое место рядом с логотипом, образуя его часть > Philips.

Сделать так, чтобы слоган не отрывался от основного логотипа, чтобы он лаконично с ним сочетался - есть наша [дизайнеров] задача...


Logo | Как енто делается

Эти eще не...

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

А где это будет?

Первый вопрос, которым должен задаться дизайнер (а значит и клиент) при проектировке будущего логотипа, это - Где потребитель чаще всего увидит мой логотип? Ответ на этот вопрос может быть самым разнообразным: на бланке фирмы, на упаковке продукции, в полиграфической/видео рекламе, наружной рекламе/вывеске магазина и пр. Но, отвечая на этот вопрос, мы сможем сделать ряд выводов, которые помогут нам в дальнейшем.

Определите для будущих размеров соответствующую крайность (Например, 3 х 5 м или 0,5 х 1 см) и станут очевидными сдедующие факты:

Если логотип предполагается маленьким (например, на упаковке медпрепаратов), то мелкие/тонкие элементы логотипа визуально превратятся в серое пятно, каким бы хорошим ни было качество печати. А использование шрифтов с засечками или декоративных, сделает текст нечитабельным или плохо читабельным. Следовательно формы знака должны быть по возможности более обтекаемыми, без подробных мелких элементов (таких как мелкие полосы или цветочки, например), а шрифт ипользовать из серии классических рубленых как более читабельных в мелком исполнении.

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

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

Композиция

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

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

Положим наш логотип на плоскость, ограниченную размерами нашего логотипа.

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

В идеальном случае центр равновесия лежит в точке пересечения вертикальной и горизонтальной осей (1). Хуже, но не смертельно, если он незначительно смещен, но оcтается на вертикальной оси (2). Если же равновесие достигается в другой точке, значительно удаленной от идеальной (3) - Вам предстоит еще поработать...

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

Цвета и эффекты

Автор не является сторонником конкретизации цвета логотипа, ибо, задавая логотипу конкретный "фирменный" цвет, Вы автоматически:

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

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

К сожалению, в Соединенных Штатах, Канаде и многих других странах тенденция раскрашивать логотип во все возможные цвета, получила широкое распространение (автор делает подобные выводы после ознакомления с коллекциями логотипов на дисках Corel ArtShow 1992-1997, а также в результате анализа галлерей логотипов, представленных в сети Интернет). Вероятно это связано с технологическим прогрессом, когда полноцветная печать на самых различных материалах становится более и более доступной. Но мне кажется, что причина намного более прозаична. Дизайнер, взяв с заказчика приличные (а уважающий себя дизайнер берет очень и очень приличные) деньги, он уже не может показать слишком простой или слишком лаконичный логотип, ибо заказчик не проведет соответствия между потраченными деньгами и полученным результатом. И в результате появляется нЕчто, иногда даже обладающее художественным вкусом, но уже перестающее быть логотипом...

Цвета в логотипе несут не только декоративную нагрузку, но и ассоциативную. Если деятельность организации связана с морем, имеет смысл задействовать морские цвета: синий, голубой, лазурный или их сочетания. Так фирменный цвет (по задумке авторов) логотипа Аристон, должен был бы символизировать огонь (к этой мысли во всяком случае подталкивает и сопровождающий знак).

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

Еще несколько примеров ассоциативной роли цвета:

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

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

< Красный свет сам по себе является цветом предупреждения об опасности. Он всегда обращает на себя внимание и заставляет остановить на нем свой взгляд.

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

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

< Пример ахроматического контраста. Цвета расположены в одной области спектра, но имеют различную яркость/насыщенность (HSB: H - постоянно, SB - изменяется).

< Пример хроматического контраста. Цвета расположены в различных областях спектра, но имеют одинаковую яркость/насыщенность (HSB: H - изменяется, SB - постоянно).

< Белый и черный цвета являются нейтральными сами по себе. Они не вступают в конфликт с другими цветами логотипа, а дополняют их. Аналогично нейтральными являются все градации серого.

спец. спасибо Пороховой Л.Батьковне
(художнику с бА-Альшим стажем)

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

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

В то время, как менее сухой логотип останется неизменным во всех рекламах:

Ему уже ничего не поможет...

Лед тронулся...

А теперь, господа присяжные заседатели, рассмотрим методы, с помощью которых дизайнеры во всем мире делают свои логотипы

1. Логотип за 5 секунд

Самый простой способ сделать логотип нам уже известен - это обычный набор текста выбранной гарнитурой, выполненный в любой программе, позволяющей это сделать. И основным недостатком этого способа, как мы уже говорили, является его ординарность, что не способствует запоминаемости в сознании потребителя. Улучшить положение (хотя и не всегда координально) позволит Способ Одной Буквы, заключающийся в том, что абсолютно произвольную букву в слове названия Вы делаете отличной от других размером и/или цветом и/или гарнитурой и/или чем-либо еще.

2. Липучка

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

Естественным назовем то сливание, при котором окончание (более понятным было бы использовать здесь анатомический термин конечность) буквы совмещается с началом соседствующей путем банального горизонтального смещения последней. Иными словами обе буквы можно было бы изобразить вместе, не отрывая пера от поверхности бумаги, по крайней мере в месте их соединения. Естественно соединенными выглядят такие буквенные пары, как VZ, ET, LM, AN и многие-многие другие, включая пары, характерные только для национальных алфавитов.

Классическим примером логотипа, полученного таким способом является

А вот пример соединения всего двух букв в слове:

"Естественно" переходить друг в друга буквы могут не только в одной точке, но и целой лоскости. Как правило это буквы, образующие кернинговые пары: VAW, AY и другие. Но крайне редко это приносит положительный эффект (к исключениям можно отнести уже упомянутый выше CNN). Чаще такие буквосочетания лучше смотрятся в раздельном написании, чем в слитном:

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

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

3. Заполняем...

Еще одним способом оживить сухой текст есть Способ Заполнения Букв(ы), который заключается в том, что букву (буквы) слова заполняются некоторой заливкой: от простой текстуры до рисунка. Как говорилось выше, лучше всего для заливки подходят буквы (как правило плотных гарнитур), обладающие большой площадью закраса (если удалить внутренний контур): Q, O, D, I . Заполнить впрочем можно и другие буквы.

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

Задавшись вопросом "а что может быть внутри?", приходим к выводу - все что ваша душа пожелает. Используя текстуру, лучше применить ее двухцветный (черный+белый) вариант. Картинка же может существовать как в одной букве, так и перетекать из одной буквы в другую.

4. Геометрия

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

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

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

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

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

5. Аббревиатура

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

Удивительно, но этот способ по праву считается лидером по количеству логотипов им произведенных.

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

6. Ассоциативный знак

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

Главное только чтобы он своим внешним видом не отталкивал потребителя, а наоборот располагал к себе. Иными словами логотип должен вызывать положительные ассоциации и/или не вызывать отрицательных. Ассоциациям посящена вся следющая глава, поэтому здесь говорить об ассоциациях мы не будем.

7. Такого еще не было...

А теперь наступила очередь способа, благодаря которому созданный Вами логотип станет недосягаемым примером для подражания. Заказчик за такой логотип сразу отстегнет Вам очень кругленькую сумму любимых денег, и за первым заказчиком потянется второй, третий... А называется этот способ просто - Ваша Безграничная Фантазия.


Logo | Как енто делается

Каждый понимает в меру своей распущенности

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

Не является ни для кого секретом, каждый человек обладает индивидуальным субъективным мировосприятием, и одни и те же знаки у разных людей, в силу различного опыта, образования, круга общения и пр. и пр. могут вызывать абсолютно разные, зачастую противоположные по своему значению ассоциации, и соответственно различные эмоции. Казалось бы, невозможно предугадать "уровень распущенности" миллионов потребителей, но...

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

Посмотреть на окружающую нас действительность глазами двух людей, один из которых бедный и больной, а другой - богатый и здоровый. Один обижен судьбой, другой обласкан ею.Что они думают, скажем, о солнце? Солнце приносит свет и тепло обоим, следовательно изображение солнца вызовет в сознании обоих ассоциации с теплом и светом, жизненно необходимыми каждому человеку. А какое впечатление произведет на обоих изображение сексуальной женщины? У больного не вызовет ничего, кроме раздражения, ибо он болен, он неспособен, ему эта радость недоступна по незавсящим от него обстоятельствам. У здорового же наоборот - изображение вызовет положительные эмоции, быть может он вспомнит приятно проведенный вечер со своей женой/любовницей или обеими одновременно.

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

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

Географический фактор: народы, заселяющие нашу планету, имеют самые разнообразные обычаи. Отношению к одному и тому же животному/растению в разных точках земного шара могут разительно отличаться. Так животное или растение, не вызывающе абсолютно никаких ассоциаций в Европе, может иметь значение жизни и смерти где-нибудь в Африке или на Ближнем Востоке. Поэтому, выходя с товаром не некоторый рынок, потрудитесь узнать, что вызывает негативную (позитивную) реакцию в данном регионе, дабы избежать хатя бы намека (сделать упор) на это в рекламе товара Вашим логотипом.

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

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

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

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

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

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

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

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

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

Ничто или нЕчто?

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

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

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

В конечном итоге популярность и известность логотипа с нейтральным знаком полностью зависят от рекламной политики фирмы и качества предостовляемых фирмой товаров/услуг.

Конкретика

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

1. Национальная символика

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

Герб и флаг Украины легким движением руки превращаются...
в логотип национальной авиакомпании

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

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

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

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

2. География

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

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

Отметим, что не только знак может указывать на географическое положение организации, но и шрифтовая гарнитура, которой выполнено название фирмы. Правда, теперь предполагаемая область нахождения организации расширяется до площади нескольких соседних государств, имеющих общие культурные корни. Так кириллическая гарнитура говорит о принадлежности к словянам, то есть место определяется как Восточная Европа; аналогично готике соответствует Центральная Европа, арабской вязи - Ближний Восток и т.д.

3. Сфера деятельности

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

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

4. Животные

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

1. Схожесть свойств. Фирме приписываются те качества, которые в большей или меньшей степени присущи данному животному. Так невероятное число авиакомпаний используют в своих логотипах изображение птиц, и это естественно, потому что никто из живых существ не умеет летать [самостоятельно], кроме птиц. Птицы у всех разные, но принцип один.

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

2. География вида. Известно, что некоторым видам животных свойственно конкретное место обитания, или же они издревле являются символом некоторой страны (имеется в виду, геральдика средних веков и позже). Так медведь во всем мире считается животным русской национальности, а все сумчатые живут исключительно в Австралии.

Австралийская авиакомпания Qantas - пожалуй единственная, использующая в своем логотипе наземное животное.

Ни рыба ни мясо

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

Логотип LG Elrctronics настолько оригинален сам по себе, насколько заставляет вообще задумывается над тем, что появилось раньше: собственно логотип из названия, или же название из логотипа?


Logo | Как енто делается

Почему мой логотип
такой гадкий?

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

Знакомая гарнитура

Если Вы решили остановить свой выбор на логотипе вида "только текст", не используйте приевшиеся гарнитуры. Ваш заказчик вам не заплатит, а ваши коллеги будут над вами смеяться (см.подробности в первой главе).

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

Проблемы композиции

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

В идеальном варианте "цетр тяжести" рисунка должен находиться в центре пересечения вертикальной и горизонтальной осей.

Буквы соединились через Ж...

Соединяя друг с другом две соседние буквы, делайте это естественно (см. подробности в главе 2).

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

Цвета не те...

Чем больше у Вас цветов в логотипе, тем труднее согласовать их друг с другом и с будущей рекламой (см. подробности в главе 2).

Постарайтесь не использовать количество цветов более двух.

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

Много гарнитур

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

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

Легкое и тяжелое рядом

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

Выбирая шрифтовую гарнитуру или создавая знак, следите за тем, чтобы самая широкая часть логотипа (W max) не превышала самую узкую (W min) более, чем в три раза.

Много толщин/ширин

Избыточное число различных толщин/ширин дисбалансирует логотип в целом и действует на потребителя угнетающе.

Любое графическое решениеможет быть охарактеризовано набором некоторых величин/параматров.

Так приведенный выше логотип имеет в своих характеристиках всего 2 (два) значения ширин (A - максимум и B - минимум) плюс 1 (одно) межстрочное расстояние (С). Расстояние между буквами L и O корректируется в соответствии с правилами кернинга.

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

Заглавные и прописные...

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

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

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

Негативная ассоциация

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

Вызываемые Вашим логотипом ассоциации не должны нести негативных или нежелательных эмоций.


Logo | Как енто делается

Линки

Библиотека логотипов

Не только богатейшая коллекция логотипов (более 600), но и их исходники - Corel Draw / Adobe Illustrator упакованные в zip архив. То, о чем мечтают дизайнеры, когда им приходится обрисовывать всемирно известный логотип в надцатый раз :). Рекомендую настоятельно.

Эротический логотип

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

Логотипы и фирменные знаки

Коллекция логотипов и фирменных знаков, созданных Александром Свешниковым..

Галерея логотипов NASA

Галерея логотипов Американского Национального Аэрокосмического Агенства.

Аудио/видео логотипы и торговые марки

Лейбы аудио/видео, такие как VHS, DVD и прочие.

Krea: галерея торговых марок

Галерея торговых марок, созданных итальянской дизайнерской конторой Krea Studios.

Фабрика логотипов

Народ поставил производство логотипов на конвейер. Форд бы за них порадовался...


Содержание вашей странички

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

Как оценить содержание собственной страницы? Представьте, что вы сами нашли в интернете такую страничку, но созданную кем-то другим. Досмотрели бы вы ее до конца (ну хотя бы дождались конца загрузки)? То-то.

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

Виртуальная библиотека Мошкова - один из самых популярных российских сайтов обходится вообще без дизайна. Очень простое (но вполне функциональное) оформление у советов по HTML & JavaScript Якова Каца, которые будут очень кстати начинающему. Эти сайты привлекают посетителей информацией, а не красивыми картинками. Однако, думается мне, что рано или поздно и у этих сайтов появится дизайн.

Достаточно большой популярностью (для рунета) пользуется сайт Омен. Достойный пример сайта, который сильно выиграл, если бы его автор не пытался заниматься дизайном. Через 30 сек. просмотра начинается резкая боль в глазах, через 5 мин. - головные боли. Однако там можно найти огромное число ссылок на все, что интересует среднего_пользователя_российского_интернета. Это заставляет такого пользователя смотреть, борясь с позывами эстетической тошноты (я больше 5 минут не выдержал).

Попав на сайт Asia Carrera мой взгляд попал на счетчик и цифры поплыли перед глазами - 8598062 за 2 года. Поясняю - Asia Carrera - актриса, снимающаяся в порнографических фильмах. Содержание соответствующее. При этом весь сайт делает она сама (по крайней мере так написано). Как вам 8,5 млн. посетителей у домашней странички? Так-то, а вы говорите сами_знаете_кто! Ссылки не даю, если очень хочется, сами найдете.

Кто бы что ни говорил, но от статистики не уйдешь - и в российском, и в забугорном интернете в запросах поисковых машин наибольшей популярностью пользуются слова sex, porno и т.д. Делайте свои выводы... Как и в других областях, в интернете основной инстинкт используется, чтобы скормить свой продукт - хитрые веб-мастера прописывают в ключевых словах своих соверешенно благообразных страниц десяток-другой sex & porno, что сразу повышает число попаданий на такую страничку. Другое дело, что страждущий человек, попав туда, испытыватет чувства ежика из анекдота, слезающего с кактуса со словами "Обманулся, как мальчишка".


Прежде чем начать

-У вас есть план, мистер Фикс?
-О, у меня есть отличный план!

Вы придумали интересное содержание. Не кидайтесь сразу как комок гнева и ярости к своему редактору (не важно Frontpage это или Notepad). Остановитесь, отойдите от компьютера, выйдете на свежий воздух и не возвращайтесь до тех пор, пока у вас в голове хотя бы смутно не возникнет образ того, как ЭТО будет выглядеть. Еще лучше прикинуть все на бумаге - даже если вы (как я) не умеете рисовать, можно расположить отдельные элементы - текст, картинки, кнопки и т.д. (есть такое слово - композиция). Ваша страничка должна выглядеть цельной, а не быть беспорядочным скопищем текста и попавших под руку картинок. Из этого несколько выводов:

Стиль.

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

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

Старайтесь использовать свою графику.

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

Навигация.

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

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

Работа над ошибками.

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


Уникальность

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

Under construction. Никогда не заводите таких значков, особенно если он является единственным содержанием раздела, в который попадаешь по ссылке. Вы видете ссылку, которая вам интересна, жмете, ждете загрузки и... посередине чистой страницы появляется человек, усердно махающий лопатой. Ничего, кроме раздражения это вызвать не может. У вас нечем заполнить раздел? Тогда зачем его вводить? Потерпите сами, а не испытывайте терпение посетителей.

Best viewed with... Тот, кто помещает такой значок наверно думает, что все сразу бросятся переставлять себе броузер из-за их самой распрекрасной страницы? Ну-ну, боюсь, что таких людей ждет разочарование. Так что показывает эта надпись? А только то, что ее создатель не слишком хорошо владеет HTML. Правилом хорошего тона является создание страниц, которые нормально смотрятся в любом броузере. Если вы заботитесь о своих посетителях, вы должны протестировать свое творение и в IE и в Netscape (the only browser was in the beginning).

Древние легенды, дошедшие до наших дней из глубины веков, гласят, что в древние времена был только один броузер - Netscape. До какой нелепости могут дойти человеческие суеверия! Сейчас самая прогрессивная наука - наука Microsoft, однозначно доказала абсурдность и реакционность подобных утверждений.

Оригинальная интерпретация стандартных тем очень привлекательна и занимательна. Пример - значок "Powered by Dneproges" у Арт. Лебедева на НЖМД. Но, думайте сами, а не стаскивайте его или значки с хахи.


Куда пойти учиться?

Как научиться делать хорошие странички? С одной стороны это сложно, так как надо очень много чего знать от HTML и JavaScript до графического дизайна и оптимизации графики и обратно (не говоря о всяких извращениях для избранных типа Perl). Тут могу посоветовать только одно - учите английский. Соответствующие русскоязычные ресурсы только начинают появляться и в большинстве своем не страдают оригинальностью. На английском же существует неимоверно больше информации (и что немаловажно наиболее свежей) - вы почти наверняка найдете все, что захотите. Как это не грустно, но по-английски пишут и наши соотечественники - Дмитрий Кирсанов о веб-дизайне, Ник Устинов и Тема Лебедев о графике, их можно понять - иметь большую аудиторию всегда приятней. Лучшие ссылки по разнообразным технологическим ресурсам собраны в разделе "Учимся".

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

Шаг первый - найдите в своем броузере команду для просмотра исходного кода, это позволит быстро заглядывать в исходный код странички. Кстати, если страница выполнена с использованием фреймов, то эта команда выдаст код самой неинформативной страницы с описанием фреймов. Чтобы посмотреть код фрейма надо в контекстном меню, вызываемом правой кнопкой мыши, выбрать что-то типа "View Frame Source".
Шаг второй. Если страница достаточно сложна, то разобраться во всем при одном взгляде на исходный код достаточно сложно. Сохраняем страничку у себя на локальном диске соответствующей командой броузера. При этом сохранится только сам код страницы без рисунков (о том, как с этим бороться чуть позже). Но теперь вы можете изменять код и тут же видеть результат. Исследуйте код и если вы найдете что-то непонятное, попробуйте просто удалить или изменить соответствующие тэги и посмотреть, к чему это приведет. Потом попробуйте переместить кусок кода в новый файл и играться с ним дальше. Воистину это лучший способ постичь HTML!
Шаг третий - сохраняем страничку вместе со всеми сопутствующими файлами. Для этого уже просто броузера недостаточно - понадобится специальная программа - оффлайн броузер (такая возможность встроена в новый Internet Explorer 5). Обзор нескольких оффлайн-броузеров можно посмотреть в разделе Soft, но принцип у всех одинаков - они сохраняют сайт целиком т.е. страничку со всеми картинками, так что потом ее можно посмотреть и, что для нас самое главное, - изменить в любой момент на своем диске. Вы можете создать коллекцию приглянувшихся вам сайтов в качестве источника вдохновения.

Сейчас на всех сложно оформленных страницах используется форматирование с помощью таблиц, при этом разобраться как же все устроено по коду очень сложно (особенно если встречается эдак 4 вложенных друг в друга таблицы). Чтобы увидеть как же устроена невидимая таблица, замените в исходном коде атрибут border=0 тэга table на border=1 и вы увидите рамку таблицы.

P.S. Не поймите меня неправильно.

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

P.P.S.

А как жалко, что также как html, нельзя препарировать графику! Как бы было здорово, если бы можно было заглянуть в исходные psd-файлы!


Размышления о фреймах

Размышления о фпеймах.

Почти все авторы, профессионально писавшие о веб-дизайне и создании сайтов, выражали свое более или менее отрицательное отношение к фреймам - Иван Бойко так вообще является Official Frame Hater’om (фреймоненавистником). Большинство же начинающих наоборот очень любят использовать на своих страницах фреймы, причем в единственном варианте - слева создается фрейм с навигационной панелью, а справа - с открывающимся по ссылкам из левого фрейма страницами (как лаконично такая структура описана в первом эпиграфе!). Когда говорят о удобстве таких фреймов имеют в виду, что не требуется перезагрузка навигационного фрейма, что дескать существенно увеличивает скорость загрузки страницы. Но, если вы создадите такую же навигационную панель без фреймов, то использованные в ней изображения при первой загрузке попадут в кэш броузера и при повторной загрузке будут быстро загружаться с локального диска.

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

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

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

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

if (self.parent.frames.length != 0)
self.parent.location=document.location;


Текст и шрифт

Использование различных шрифтов и их размеров - один из основных приемов оформления текста. Одним этим можно сделать страничку красивой.

Сразу замечание - не используйте много разных (особенно экзотических) шрифтов на одной страничке. 2-3 будет вполне достаточно. Больше будет хуже. Хуже будет... ну я предупредил.

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

<

font face="ManhattanCyr" size="+2">Супер Заголовок</font>

Пишем, проверяем - все прекрасно работает. Но, что увидит при просмотре этой странички человек, который не является счастливым обладателем шрифта ManhattanCyr? Броузер заменит его на стандартный шрифт и все тщательно продуманное вами оформление никто не увидит. Что же делать? Выход, обладающий одним недостатком и кучей достоинств, есть. Делаем из текста картинку - открываем графический редактор (Photoshop или что-то подобное) и впечатываем текст нужным шрифтом. Сохраняем картинку и вставляем ее на нужное место:

<

img src="title.gif" width=... height=...>

Не забывайте указывать параметры width и height - это нужно для правильного показа картинки)

Для графики в сети сейчас применяется два формата - gif и jpeg, хотя уже началось использование третьего - png, который должен заменить gif. Для сохранения картинок с текстом больше подходит формат gif, который в отличие от jpeg сжимает без потери качества. При записи в формате jpeg вокруг букв на контрастном фоне возникают дополнительные точки - шум, который сильно портит текст. Все же иногда для больших многоцветных надписей лучший эффект дает сохранение в jpeg. Более подробно об отличиях gif и jpeg можно прочитать в статье Максима Гросса в библиотеке вебклуба.

Чтобы сохранить каринку в gif из Photoshop надо выбрать не "Save as...", а "Export -> Gif89a Export". Еще лучше использовать дополнительную программу, позволяющую оптимизировать размер получающегося файла. Одной из лучших таких программ является Ulead Smart Saver фирмы Ulead.

При создании текстовых надписей в графическом редакторе существует одно маленькое свойство, которое оказывает огромное влияние на то, что вы получите в конце концов. Это свойство называется Anti-aliasing (сглаживание). Если сглаживание включено, то на границе буквы и фона появляются переходные цвета. Результат - границы букв выглядят плавно и аккуратно, если же сглаживание выключено, то буквы имеют резкие, рваные края. Бросающиеся в глаза несглаженные надписи можно увидеть не только на домашних страничках, но даже на страницах некоторых фирм!

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

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

Что мы имеем.

    Недостатки:

  • Графический файл имеет значительный размер.

    Преимущества:

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


Активныые рисунки

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

Итак, немного теории: когда курсор мыши грозно нависает над картинкой, она издает крик о помощи - генерирует событие onMouseOver - "мышь надо мной", а когда мышь наконец уходит, издает сигнал спасения - событие onMouseOut. На самом деле ситуация сложнее - просто картинка лишена возможности издавать крики о помощи и только картинка, являющаяся одновременно ссылкой (т.е заключенная в тэги </a> </a>), может это делать.

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

<a href="index.html" onMouseOver="img_act('img1')";
  onMouseOut="img_inact('img1')";>
<img src="1off.gif" name="img1" width=20 height=20
  border=0></a>;

Что это значит? Мы создали ссылку, которая при событии onMouseOver быдет вызывать функцию JavaScript img_act, а при событии onMouseOut - img_inact. Внутри ссылки располагается наша картинка, обратите внимание на параметр name в тэге img - name="img1" - он дает картинке уникальное имя, которое передается "спасательным" функциям img_act и img_inact, чтобы они знали, над какой именно картинкой нависла грозная опасность.

На самом деле вся работа еще впереди - надо сделать функции-спасатели. Прежде всего надо зарезервировать 2 картинки, которые будут соответствовать включенному и выключенному состояниям. Обратите внимание, что называются они img1on и img1off т.е. как наша картинка img1, с прибавкой on и off (это не имеет никакого отношения к именам файлов):

img1on = new Image ; img1off = new Image ;

Теперь надо указать, какие именно это картинки, т.е. прописать реальные имена файлов для включенного и выключенного состояний:

img1on.src = "1on.gif"; img1off.src = "1off.gif";

А теперь можно написать и сами функции-спасатели:

function img_act (imgName) {
imgOn = eval (imgName + "on.src");
document [imgName].src = imgOn; }

function img_inact (imgName) {
imgOff = eval (imgName + "off.src");
document [imgName].src = imgOff; }

Эти функции получают имя картинки и сохраняют его в переменной imgName. Мы вызывали функции img_act(img1), значит в нашем случае imgName=img1. Дальше к этому имени привешивается "on" или "off" - помните как мы обозначили имена для включенного и выключенного состояний - img1on и img1off. Наконец производится замена картинки c именем imgName (т.е. img1) на включенную (функция img_act) - img1on или выключенную (функция img_inact) - img1off.

Вот вроде и все - но есть еще маленькая заминка - Internet Explorer 3 кое-что не понимает и разразится кучей ошибок при обнаружении такого кода - необходимо определить броузер и исключить выполнение кода, если это IE3. Тут возможно несколько вариантов - как всегда решение в лоб не самое короткое и красивое (код взят у Евгения Савельева на www.js.ru):

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion);

if (browser_name == "Netscape" && browser_version >= 3.0) { roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0) { roll = 'true'; }
else { roll = 'false'; }

Тут анализируется броузер и если это IE3, то переменная roll получает значение false и тогда дальше надо выполнять проверку roll и запрещать выполнение, если roll не равно true. Более элегантное и короткое решение:

if (document.images)

это выражение равно false в случае IE3 - единственная строка выполняет те же функции, что и весь предыдущий код проверки броузера.

Итак привожу весь код (для примера пусть у нас будет 2 картинки): Эта часть вставляется в head вашего документа. Не забудьте, что содержимое между тэгами script должно быть вложено в комментарии для совместимости со старыми броузерами и некоторыми поисковыми системами:

<SCRIPT language="Javascript">
<!--
if (document.images)
{
img1on = new Image ;    img1off = new Image ;
img2on = new Image ;    img2off = new Image;

img1on.src = "1on.gif";    img1off.src =
  "1off.gif";
img2on.src = "2on.gif";    img2off.src =
  "2off.gif";
}

function img_act(imgName) {
if (document.images)
{ imgOn = eval (imgName + "on.src");
document [imgName].src = imgOn; } }

function img_inact(imgName) {
if (document.images)
{ imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff; } }
//-->
</SCRIPT>

Эта часть вставляется в так сказать тело (body):
<a href="1.html" onMouseOver="img_act('img1')";
    onMouseOut="img_inact('img1')";>
<img src="1off.gif" name="img1" width=20 height=20
    border=0></a>

<a href="2.html" onMouseOver="img_act('img2)";
    onMouseOut="img_inact('img2')";>
<img src="2off.gif" name="img2" width=20 height=20
    border=0></a>

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


Нарезка изображений

Пазла Если вы создали большой и сложный рисунок для своей страницы, то имеет смысл его нарезать на несколько маленьких, которые затем поместить в таблицу с невидимыми разделителями (border=0). Зачем это надо? Во-первых, скорость загрузки такой страницы увеличится, за счет параллельной загрузки сразу нескольких файлов. Во-вторых, если правильно подойти к делу, то суммарный размер нарезанных картинок можно сделать меньшим, чем исходного файла. Допустим, на всей картинке у вас используется 256 цветов и вы записываете ее в соответствующий файл gif. Теперь если вы правильно порежете картинку, то обнаружите, что в отдельных областях достаточно 128 или 64 цветов (правильная нарезка как раз и состоит в выделении областей с небольшим количеством цветов). Убирая лишние цвета, вы уменьшите размер файла. Эта же техника позволит сделать как бы единую gif-картинку, содержащую больше 256 цветов - думаю понятно как.

Если кто не знает, поясняю - формат gif может показывать не больше 256 цветов, но эти цвета могут быть любыми из TrueColor (16 млн). Описания цветов, используемых на картинке, хранится в самом файле в проиндексированном виде, например так - цвет номер 0 имеет RGB составляющие 0,0,0 (черный), а номер 2 -255, 255, 255 (белый). Соответственно, чем больше цветов вы используете на картинке, тем больше размер файла. Если у вас на картинке используется только 16 цветов, а вы записали файл gif в 256-цветном режиме, то лишние цвета просто занимают место в таблице, увеличивая размер.

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

Теперь о самой нарезке - берем в правую руку скальпель, в левую - стакан со спиртом (ой, простите увлекся). Значит так - первый вариант - резать в Photoshop. Для этого надо расставить в изображении guides (ну не знаю как это будет по-русски - ну пусть направляющие) - это горизонтальные и вертикальные линии, не влияющие на само изображение. В первую очередь выберите режим показа guides - (View /Show guides или Ctrl+;) и показа линеек (View/Show Rulers или Ctrl+R). Теперь на линейке нажимаем на мышь и тянем ее с нажатой кнопкой на изображение - появляется синенькая линия - вот это guide и есть.
Guides Show
Теперь, если вы выберете инструмент перемещения, guides можно таскать туда-сюда или уничтожать (чтобы временно убрать показ guides, но не уничтожать их перейдите в режим Hide guides). Расставьте guides так, как вы собираетесь порезать картинку. Следующий момент - включаем режим "прилипания" инструментов к guides (View/Snap to Guides). Теперь все инструменты выделения будут липнуть к расставленным направляющим. Все что осталось сделать - выделить соответствующие области и скопировать их в отдельные файлы (или наоборот сделать так сказать crop) и записать их. При записи лучше пользоваться не самим Photoshop’ом, а какой-нибудь программой, позволяющей оптимизировать размер файла - например замечательной программой Smart Saver фирмы Ulead.

Для автоматической нарезки картинок существуют и специальные программы - Adobe ImageReady, Macromedia Fireworks и Image cutter (последняя freeware, остальные shareware). Я работал только с Image Ready, так что речь пойдет о ней. В общем все делается так же, как в Photoshop (они вообще очень похожи) - расставляете guides, а потом программа сама разрежет по ним картинку и даже создаст html-код для таблицы. Все быстро и здорово, но как всегда автоматика справляется с делом несколько хуже - Image Ready не позволяет оптимизировать размер таблицы цветов в каждом отдельном куске gif’a - дело в том, что таблица цветов строится одна для всего изображения еще до нарезки. Так что если вы хотите добиться супервысококачественных результатов используйте Photoshop+Smart Saver, а для быстрой работы - Image Ready. Предлагаю еще промежуточное решение - режете в Image Ready и задаете сохранить нарезанные куски ни в gif и ни в jpeg, а в TrueColor PNG-формате (новый такой очень многообещающий формат, в том числе поддерживает полупрозрачность (!)). Потом открываете PNG файлы и оптимизируете их до нужного количества цветов по отдельности.

В сложных случаях приходится нарезать изображение на большое количество кусков. Для их компоновки можно использовать вложенные друг в друга таблицы или атрибуты тэга table, позволяющие объединять столбцы (colspan) и строки (rowspan).

Успехов в первом опыте хирургического вмешательства.


обратно