эффекты

конструктор карусели на флеше
www.flashxml.net/3d-carousel-menu.html

прикольные эффекты jquery - двигать, менять обороты, вкусно и няшно!
ricostacruz.com/jquery.transit/

@темы: Дизайн, Ссылки, web, IT, javascript, flash, карусель, jquery, эффект

---

@темы: Дизайн, IT

---

Прикольные уроки для анимации в фотожабе

egraphic.ru/photoshop/animation/
Прикольные уроки для анимации в фотожабе

@темы: Дизайн, Ссылки, IT

---

Скрытые возможности text-shadow

Скрытые возможности text-shadow

Суббота, 8 января 2011

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

Помимо того, что здесь не используется никакой дополнительной разметки (типа :before и :after), особо внимательные дизайнеры могут заметить, что у текста есть не только «объём» (в коде, строки параметров 1-5), но и тень (остальные строки, с указанием цвета через RGBA, что позволяет делать слои-тени прозрачными) .

В принципе, весь код изложен на той же странице. Суть подхода — многократное повторение параметровtext-shadow через запятую. При этом первый параметр указывается для тени «первого слоя», второй — слоя ниже и т.д. (Для тех, кто вообще не в курсе, как работает text-shadow — читайте).

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

Работает во всех современных браузерах, кроме IE (неожиданно, правда?

Кроме того, как пишут здесь, подобный многослойный подход можно использовать и в box-shadow.

Развитие

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

Слегка доработанный эффект вдавленного текста (за счёт добавления верхней тени выглядит естественнее, чем растиражированные в сети примеры):

Inset Text

.inset {
	font-size: 72px;
	color: #666;
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

Наоборот, выдавленный текст:

Outset Text

.outset {
	font-size: 72px;
	font-weight: bold;
	color: #666;
	text-shadow: -2px -2px 2px #fff, -2px 0 2px #fff,
		0 -2px 2px #fff, 2px 2px 2px #000,
		0px 2px 2px #000, 2px 0 2px #000;
}

Радужная тень:

Rainbow

.rainbow {
	font-size: 72px;
	font-weight: bold;
	color: rgba(0, 0, 0, 0); /* сам текст невидим */
	text-shadow: 3px 0 0 #d91f26, 6px 0 0 #e25b0e,
		9px 0 0 #f5dd08, 12px 0 0 #059444,
		15px 0 0 #0287ce, 18px 0 0 #044d91,
		21px 0 0 #2a1571;
}

Текст с обводкой:

Stroke

.stroke {
	font-size: 72px;
	font-weight: bold;
	color: #999;
	text-shadow: 1px 1px 0 #e47e0f, -1px -1px 0 #e47e0f,
		1px -1px 0 #e47e0f, -1px 1px 0 #e47e0f;
}

Неоновый текст:

Neon Text

.neon {
	background: #000;
	font-size: 72px;
	font-weight: bold;
	color: #407ec4;
	text-shadow: 1px 1px 0 #4da2fc, -1px -1px 0 #4da2fc,
		1px -1px 0 #4da2fc, -1px 1px 0 #4da2fc,
		4px 4px 8px #2c5889, -4px 4px 8px #2c5889,
		4px -4px 8px #2c5889, -4px -4px 8px #2c5889;
}

Такой модный сейчас анаглиф:

3D Anaglyph

.ananglyph {
	font-size: 72px;
	color: #333;
	text-shadow: -4px 0 1px #1ef2f1, 4px 0 1px #f6050a;
}

Удачи в освоении!

@темы: Дизайн, IT, css: html

---

Закрытая запись, не предназначенная для публичного просмотра

---

Ссылки шаровых клипартов и текстур

www.texturebase.ru - много шаровых текстур и клипарта, так же 3Д текстур
www.sxc.hu - клипарт и текстуры

@темы: Дизайн, Ссылки

---

Flash плеер, проигрыватель

Симпатишный флеш-плеер.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="dewplayer" height="24"> 
<param name="allowScriptAccess" value="always" /> 
<param name="movie" value="http://dl.dropbox.com/u/493679/marla/player.swf" /> 
<param name="FlashVars" value="playerID=1&autostart=no&loop=no&soundFile=http://dl.dropbox.com/u/37852097/The%20Bear.mp3"> 
<param name="quality" value="high" /> 
<param name="wmode" value="opaque" /> 
<param name="menu" value="false"> 
<embed src="http://dl.dropbox.com/u/493679/marla/player.swf" quality="high" bgcolor="FFFFFF" name="dewplayer" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" FlashVars="playerID=1&autostart=no&loop=no&soundFile=http://dl.dropbox.com/u/37852097/The%20Bear.mp3" quality="high" wmode="opaque" height="24" menu="false" /></embed> 
</object> 
<a href="http://dl.dropbox.com/u/37852097/The%20Bear.mp3">

@темы: Дизайн, IT

---

Урок Adobe Flash создания реалистичной воды без использования ActionScript

Этот урок показывает простой способ создания реалистичной поверхности воды без использования ActionScript

В предыдущем сообщении есть хороший урок по созданию водной поверхности с использованием Action sсript и DisplacementMapFilter, но для людей, далёких от ActionScript, интересно будет взглянуть на альтернативный способ без использования скриптов.

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

1) Создаём документ во флеш
2) Подготавливаем картинку с водой, делая её на 2-5 пикселей шире и выше размера документа
3) Импортируем картинку в библиотеку. Вставляем на первый слой в координаты (0,0)
4) Копируем картинку с первого слоя (ctrl+C), создаём второй слой выше первого, и вставляем туда в те же координаты нашу картинку (ctrl+shift+V). Щёлкаем по картинке на втором слое, чтобы выделить её, и с помощью стрелочек на клавиатуре двигаем на 1 пиксель вниз (либо на панели свойств меняем значение координаты Y на "1"
5) Затем создаём новый мувиклип (ctrl+F8, либо в верхнем меню Insert -> New Symbol). Символ назовём "движение волн".
Здесь мы будем делать волнистую маску. Для этого нам потребуется волнистая текстура. Наша цель в том, чтобы получить что-то, что выглядит так:



Её можно сделать 2-мя способами.
1:
Делаем волнистую текстуру в фотошопе и заливаем этой текстурой документ. Документ можете сделать такого же размера, как и ваша исходная картинка с водой. Сохраните файл фотошопа например в png. Затем импотртируйте во флеш и вставьте в наш новый символ ("движение волн""> и воспользуйтесь трейсом (Modyfy --> Bitmap --> Trace Bitmap). Щёлкая на области между полосками - выделяйте их по очереди и удаляйте. Полученную текстуру конвертируйте в символ (выделите всю (ctrl+A) и щедкнув по ней правой кнопкой мыши в выпадающем меню выберите convert to symbol. Символ назовите "текстура волн".

2 способ:
Нарисуйте такую текстуру прямо во флеш, например пером. Вначале нарисуйте одну волну

вверх, а потом вниз. чтобы начало и конец совпали - я рисую вспомогательную линию другим цветом - зелёным, щёлкнув по неё дважды мышкой можно выделить её целиком, и подвинуть туда, где середина по вертикали. Затем выберите Selection Tool (чёрную стрелочку на панели инструментов), и убедитесь, что включён режим привязки к объектам (магнитик как на скриншоте). теперь, подводя мышку к краю чёрной линии (нашей волны) мы видим, что под курсором появляется уголок. Мы можем ухватиться за край чёрной линии и подтащить её к зелёной, она как бы примагнитится.
Так пристыковав оба края чёрной линии к зелёной линии мы получим стыкующуюся часть волны. Дважды кликнув по зелёной линии - выделяем её всю и удаляем (delete). Дважды щёлкнув по чёрной - задаём ей например ширину = 35 и высоту = 10 на панели свойств. Конвертируем её в символ, называем "текстура волн".
Заходим внутрь этого символа (двойным щелчком по волне). Выделяем волну (двойным щелчком по ней). Нажимаем сtrl+C (копируем), затем ctrl+Shift+V. Далее делаем опять клик по волне (один) и на панели свойств выставляем координату X в 35 (=ширине волны, если она у вас другая). У вас должно получиться уже 2 волны.
Теперь осознаём что мы только что сделали, понимаем принцип, и долго сидим и повторяем то же самое, высчитываем и двигаем, пока не заполним нужную область волнами (по ширине равную ширине документа, и по высоте - примерно так же. если больше - ничего). Копировать каждый раз можно всё больший участок волн - на втором разе уже 2 волны, и двигаем их на 70 пикселей, дальше уже будет 4 и т.д. Потом целый ряд, потом 2 ряда, и т.д.

Итак, вы каким-то образом сделали текстуру, и у вас есть символ "текстура волн". Он должен находиться внутри символа "движение волн", если он не там - откройте символ "движение волн" из библиотеки, и перетащите в него символ "текстура волн". он должен находиться в координатах (0,0).

Теперь вернёмся на главную временную шкалу. Там создаём третий слой, и на нём размещаем символ "движение волн" так, чтобы координата X у него была равна "0", а по Y он был где-то там, где у нас вода, только несколько выше.

Затем двойным щелчком по волнам зайдём опять в символ "движение волн". Создадим зацикленое движение. На временной шкале на 30-м кадре жмём F6. Выделаем область временной шкалы от начала до конца, правой кнопкой мыши выбираем из выпадающего списка create motion tween.
Теперь мы хотим знать, как подвинуть волны так, чтобы анимация их движения была зацикленной.
Идём на 1 кард и создаём новый слой. На первом кадре копируем (ctrl+C) символ с волнами и втавляем ctrl+shift+V на второй слой. Теперь на втором слое у нас копия начального положения волн. Идём на последний кадр первого слоя. Второй слой закроем, чтобы он нам зря не попадался


(щёлкаем на точку под замком около нашего слоя, надеюсь из скриншота понятно)

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

Вернёмся на главную временную шкалу. Третий слой у нас теперь содержит символ с анимацией волн. Делаем его маской (правой кнопкой щёлкнув по названию слоя и выбрав в выпавшем меню "Mask". Когда вы делаете маску - слой-маска и тот, к кторому она применяется закрываются. Можете теперь нажать ctrl+enter и протестировать вашу флешку. Определитесь, устраивает ли вас скорость, размер волн и всё остальное. Я рекомендую также ставить для флешек количество fps равным где-то 20 - 30 (frane rate на панели свойств, когда у вас не выбран ни символ ни объект).
Если вас что-то не устраивает - подправьте. Скорость движения волны меняем внутри символа "движение волн" (заходим в него двойным щелчком из главной временной шкалы, предварительно отомкнув слой-маску). Увеличиваем/уменьшаем количество кадров в моушен-твине, пока не получим желаемую скорость движения воды.
Когда добились нужной скорости - сделаем ещё один штрих. Анимация движения у нас зациклена, но есть небольшой глюк - на первом и последнем кадре у нас одинаковое положение волн, это создаёт некоторую едва заметную зарердку. Чтобы её убрать, выберем на временной шкале моушен твина предпоследний кадр, и там нажмём F6. Последний же кадр удалим (щёлкнув по нему правой кнопкой мыши и выбрав "Remove Frames".

Вот и всё, анимация готова.

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

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

исходник по уроку

Присоединённые файлы

 water_my.zip ( 161.04к )

запись создана: 29.10.2011 в 09:10

@темы: Дизайн, IT, Flash, Урок

---

Урок Adobe Flash - водная рябь, анимированная вода, анимация воды ActionScript

Пример №1

Этот урок для тех, кто хочет воспроизвести реальное движение на поверхности воды - "рябь на воде".

В этом уроке используется Action sсript

Вот такой результат должен получиться:

Открываем Флеш, выбираем Action sсript 3.0
Импортируем заранее подготовленную картинку.

File - Import to stage
Центрируем картинку с помощью вкладки Align при необходимости.
Даём название нашему слою с картинкой. Дважды щёлкаем на слое и пишем image. Затем конвертируем нашу картинку в символ. Нажимаем F8 и пишем название backImg1 Далее нам нужно ввести имя в Instance, что на в кладке Properties Следите что имена были точно как нас скринах - это важно!!! Создаём новый слой и называем его actions.
В итоге у вас должно быть два слоя вот с такими названиями и располагаться они должны вот в таком порядке.
Нажимаем мышкой на первый кадр во вновь созданном слое и жмём F9
Вводим код

var bm:BitmapData=new BitmapData(backImg1.width, backImg1.height); 
var disp:DisplacementMapFilter = new DisplacementMapFilter(bm,new Point(0,0),1,2,10,60); 
var pt1:Point = new Point(0,0); 
var pt2:Point = new Point(0,0); 
var perlinOffset:Array = [pt1, pt2]; 

addEventListener(Event.ENTER_FRAME, onFrame); 
function onFrame(evt:Event):void { 
         perlinOffset[0].x +=1; 
         perlinOffset[1].y +=0.1; 
         bm.perlinNoise(45,9,2,50,true,false, 7,true,perlinOffset); 
         backImg1.filters=[disp]; 
}

Всё готово! Нажимайте Сtrl+Enter и тестируйте мувик

Пример №2 (идентичный первому с небольшими различиями)
Realistic Flash Water Effect

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





Нам понадобится эта картинка:



Шаг 1. Свойства документа.
Откройте Adobe Flash и создайте документ со следующими настройками (Modify > Document):
Размер: 390x293 аналогично размеру используемой фотографии)
Frame Rate: 30 fps (количество кадров в секунду)

Шаг 2. Импортирование фото и подготовка его.
Импортируйте файл lake_img.jpg на сцену. File > Import > Import to Stage...
Выделите фотографию и используя панель Align (Window > Align) отцентрируйте ее. Убедить что кнопка To Stage нажата и нажмите кнопки выравнивания как на скриншоте ниже:



На временной панели назовите этот слой Water. Создайте новый слой с помощью кнопки Insert Layer. Назовите новый слой Land & Sky (см. ниже):



Правый щелчок по фотографии в появившемся меню выберите Break Apart



Возьмите инструмент Lasso и выделите верхнюю часть фото (ту, которая останется неизменной - небо и землю).



Копируйте выделенную часть фотографии. Вставьте скопированное на слой Land & Sky с помощью команды paste it into place (Edit > Paste in Place)
Теперь вверитесь на слой Water и конвертируйте начальное изображение в MovieClip (Modify > Convert to Symbol). Назовите его: water_mc



На панели свойств Properties дайте мувиклипу instance name - 'water_mc'



Пришло время Actionscript.

Шаг 3. Создание эффекта с помощью Actionscript.
Создате новый слой над слоем Land & Sky и назовите его Actionscript.



Выберите первый кадр на временной шкале и откройте панель ActionScript - Window > Actions. Введите следующий скрипт:

CODE

// -----------------------------------------------
// Water Reflection Effect
// -----------------------------------------------
import flash.display.*;
import flash.geom.*;
import flash.filters.*;
myBitmap = new BitmapData(390,293,false,0);
pt = new Point(0,0);
mpoint = new Point(0,0);
myDispl = new DisplacementMapFilter(myBitmap, mpoint,1,2,10,50);
water_mc.myList = new Array();
water_mc.myList.push(myDispl);
water_mc.filters = water_mc.myList;
i = 1;
this.onEnterFrame = function()
{
filterList = water_mc.filters;
offset = new Array();
offset[1] = new Object();
offset[1].x = i;
offset[1].y = i/8;
myBitmap.perlinNoise(45,5,3,50,true,false, 7,true,offset);
filterList.mapBitmap = myBitmap;
water_mc.filters = filterList;
i++;
}

Пояснения к коду:
Строки 1 - 4: Импортируем необходимые классы Actionscript.
Строка 7: Создадим объект BitmapData с с пиксельным массивом, размером с нашу картинку.
Строка 11: Используем класс DisplacementMapFilter для смещения пикселей изображения (деформация картинки).
Важные параметры:
1 параметр - это наш Bitmap Object, объявленный в 7 строке.
Последние 2 параметра - множители деформации по осям Х и У.
Пока оставьте их. Позже поиграетесь с анимацией меняя данные параметры.

строки 13 - 15: Применяем фильтр DisplacementMapFiler к нашему клипу water_mc. /Или так:/

Строка 17: Определим процедуру, запускающуюся с частотой кадров (30 в секунду).
Строки 19 - 23: Подготовка к применению метода perlinNoise (шум по алгоритму Перлина) с различным ежекадровым сдвигом точек.
Строки 24 - 26: Применяем метод perlinNoise к нашей Bitmap data.
Важные параметры:
Параметр 1; Частота воздействия по Х оси.
Параметр 2: Частота воздействия по У оси.
Параметр 3: Число октав. Увеличение числа = б`oльшая детализация и повышенная загрузка процессора.
Последний параметр (сдвиг). Меняет точки сдвига для октав, по осям Х и У.


Сохраните и протестируйте вашу анимацию.
Присоединённые файлы

 water_effect.rar ( 32.01к )

запись создана: 27.10.2011 в 13:25

@темы: Дизайн, IT, Flash, Урок

---

Чем веб-дизайнер отличается от HTML кодера (копипаст)

Наверное каждому из нас, в свое время, приходилось изучать объявления о найме на работу, по прочтению которых появляется мысль, “ — ну нет, здесь я работать точно не буду”. В нашей индустрии таких несуразных “вакансий” особенно много. Я думаю это по молодости и, соответственно, из-за нехватки специальных знаний у многих HR менеджеров. В качестве примера —

ИT-Компания приглашает на постоянную работу квалифицированного Веб-дизайнера. Основные обязанности включают разработку дизайна веб-сайтов, интерфейсов приложений, продвижение веб-сайта в Интернете. Требования к кандидату: Практический опыт работы на позиции Web дизайнера свыше 2 лет; Профессиональное владение инструментами автоматизированного создания сайтов; Обширные знания и умение применить HTML/DHTML, XML, Javasсript, PHP, PERL, ASP, Pho­to­shop, Flash, Free­Hand or Corel draw, знание веб-технологий; Креативность, хорошие дизайнерские способности, творческий подход к решению задач, умение работать на результат.

Мда, “Профессиональное владение инструментами автоматизированного создания сайтов” или вот “PHP, PERL, ASP” в одном ряду с “Pho­to­shop, Flash, Free­Hand or Corel draw”. Заметили вот это “or”, — “Free­Hand or Corel draw”. Это простой copy-paste совершенно другой позиции, я думаю. Вот так вот они нас c вами и нанимают. Впрочем я отвлекся, разговор пойдет о другом, еще немного примеров:

Требуется веб-дизайнер. Функции: создание и поддержка сайта, внесение описаний новых товаров на веб-сайт. Девушка/парень 20–27 лет. Высшее или незаконченное высшее техническое образование, знание ПК, базовые знания графических редакторов, навыки обработки фотографий товаров, способность быстро находить в интернете нужную информацию.

Вот черт, мне 32, наверное я уже “старый пердун”.

И еще один пример:

Требуется дизайнер сайтов.
Обязанности:
– Создание окончательного макета сайта по эскизам ведущего дизайнера.
– Обработка и доводка фотографий до состояния, когда придраться не к чему.
– Подготовка макетов для создания html-страниц и последующая «нарезка» картинок.
Обязательно:
Знание Pho­to­Shop
Знание Интернет
Желание учиться
Желание делать САЙТЫ

Дамы и господа, как я и предполагал, без знания ПК, в XXI веке оказывается никуда Да и без Photoshop’a картинку на “нарежешь”. К тому же нам вменяется в обязанность писать код “инструментами автоматизированного создания сайтов”. Какие серьезные требования предъявляют эти компании, ну да ладно, — думаю, большинство из нас справится. Но, скажите мне, Христа ради (в комментариях), неужели я, как веб-дизайнер с высшим образованием, должен мечтать “доводить” фотографии? Довести фотографию, если она нормальная, это значит изменить размер (или вес в килобайтах) или наложить на нее маску. И это моя работа? Увольте.

К СВЕДЕНИЮ HR’ОВ ВЕБ-СТУДИЙ, ИНТЕРНЕТ-АГЕНТСТВ И ИЖЕ С НИМИ
Производство информационных ресурсов в Сети Интернет, очень условно, можно разделить на три (минимум) взаимо“не”связанных составляющих. Я ориентируюсь в этой статье на минимум, по очевидным причинам. (Если у вас есть бюджет собрать большую команду — это роскошь на рынке наших услуг, не используйте эту роскошь вхолостую). Эти составляющие следующие: визуально-архитектурная, веб-серверная (бизнес-логика приложения, Back-end) и редакционная (web-writing). В этой статье речь пойдет о визуально-архитектурной компоненте, собственно, о работе веб-дизайнера.

ВИЗУАЛЬНО-АРХИТЕКТУРНАЯ КОМПОНЕНТА — FRONT-END
Веб-дизайнер должен, прежде всего, обладать навыками планирования и проектирования. (Учтите, чтобы планировать, нужно иметь с чем работать, но это тема для другой статьи). Этими навыками “заведует” Информационная архитектура (ИА), знакомство с которой, как часто пишут, “большой плюс” для веб-дизайнера.

Веб-дизайнер воплощает результаты своего проектирования, используя знание (а не знакомство технологий форматирования (структурирования) и презентации информации в гипертекстовой (HTTP) среде. К таким технологиям относятся XHTML — структурирование информации (контента), CSS — презентация (визуальная) информации; используя Javasсript, веб-дизайнер может регулировать (воздействовать или реагировать на) некоторые действия пользователя веб-страницы.

ОПРЕДЕЛИМСЯ С ТЕРМИНОМ “ДИЗАЙН”
Подавляющее большинство русскоязычной аудитории под термином “дизайн”, к сожалению, понимает его (дизайна) графический аспект. Это в корне неверно. Особенно это утверждение касается веб дизайна. Веб-дизайн, как и брендинг, это гораздо больше, чем красивые картинки на экране вашего монитора.

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

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

ВЕБ-ДИЗАЙНЕР VS HTML КОДЕР
Веб-дизайнер — это профессия. HTML-кодирование — это “умение” (skill). Я ни в коем случае не хочу обидеть начинающих веб-дизайнеров. Этот веблог — именно для них. Друзья, судите сами, со временем, (да и сейчас это возможно) закодировать любой текст в HTML — сможет множество программ, а создать уникальный веб-сайт, отвечающий всем требованиям потенциального клиента — отнюдь. Без участия компетентного человека это попросту нереально. Плох тот солдат…

ВЕБ-ДИЗАЙНЕР VS ВЕБ-РАЗРАБОТЧИК (WEB DEVELOPER)
Вспомним первую цитату: “Обширные знания и умение применить HTML/DHTML, XML, Javasсript, PHP, PERL, ASP.…” Языки программирования, относящиеся к “Веб-серверной” компоненте (бизнес-логика) производства Интернет-ресурсов — совершенно иная “епархия”. PHP, Perl, ASP(x), Ruby, Java — это области знаний, компетентное использование которых гораздо сложнее и требует гораздо большего количества времени и опыта, чем XHTML и CSS. Я говорю о действительно компетентном, экспертном использовании этих знаний. Проектным менеджерам стоит знать, что среди таких веб-разработчиков практически нет идиотов, которые будут работать за месячную компенсацию в 700 долларов на фактической позиции HTML-верстальщика.

Но есть одно “но”. Мой опыт подсказывает, что чем “круче” программист, тем меньше внимания он уделяет значимости интерфейса. Это естественно, — правое и левое полушарие С точки зрения развития бизнеса напрашивается простой вывод, — в серьезных проектах использовать и веб-дизайнера и веб-разработчика. Каждый должен заниматься действительно своим делом.

ВЕБ-ДИЗАЙНЕР VS ГРАФИЧЕСКИЙ ДИЗАЙНЕР
Оптимальный вариант — совмещение этих позиций в одну. Идеальный вариант, если претендент, обладая профессиональными знаниями и навыками веб-дизайнера, свободно оперирует такими понятиями как композиция, цветовая теория, баланс, ритм и так далее. Гениальный вариант, — это человек с высшим образованием в области дизайна, желательно с бэкграундом в полиграфической индустрии, освоивший практику веб-дизайна.

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

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

ПОДВЕДЕМ ИТОГ. WEB-DESIGN SKILLS
Необходимые знания и навыки.

Высокий уровень знаний технологий XHTML и CSS.
Умение применять на практике CSS позиционирование.
Понимание разницы между HTML, XHTML, XML.
Понимание и уместное использование Javasсript, Ajax.
Умение писать эффективный код без ошибок, в соответствии со спецификациями W3C.
Понимание необходимости писать доступный код, — Accessibility.
Знание основ организации информации, проектирования Информационной архитектуры.
Уверенное владение программными пакетами (какими — не имеет значения).
Дополнительные навыки, “большие плюсы”.

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

(копипаст)

@темы: Дизайн, IT

---

Калибровка монитора для фотографии

www.cambridgeincolour.com/ru/tutorials/ru-monit...

@темы: Дизайн, Ссылки, IT

---

Простой и эффективный урок по созданию раппортного орнамента

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

В самом уголке на пересечении направляющих ставим метку — квадратик в 1 пиксель.
Скорее всего, у вас направляющие другого цвета, но как-то они сливались с моим рисунком и я поменяла их на красные, так что не надо пугаться.



Шаг второй
Зажимаем клавишу Alt и тянем наш элемент так, чтобы наши метки совпали с разметкой.
Тянем два раза, в моём случае — вверх и вправо.



Третий шаг
Стираем метки и заполняем пространство, образовавшееся в центре нашего прямоугольника, — или не заполняем.
Здесь использованы точки, но можно было бы зарисовать растительными мотивами или оставить пустыми.
Если где-то что-то нехорошо накладывается друг на друга, нужно ластиком (E) подтереть или закрасить (B).



Отрезаем всё лишнее
Если выбрать инструмент Crop (С) и просто всё отрезать, получившийся фрагмент можно сохранить как jpg, gif или png и использовать, например, как фон своего ЖЖ.



Или сохранить его как паттерн (pattern) в самом Photoshop и использовать его при рисовании картинок.
Тут всё просто: выделяем наш прямоугольный фрагмент сохраняем его как паттерн.



Теперь в любом файле мы можем нажать F5 или выбрать в меню Edit > Fill:



А затем выбрать из сохраненных паттернов нужный:




И вот что у нас получается в итоге



И ещё!
Не забывайте включать и выключать привязку к направляющим, чтобы точнее разместить и обрезать лишнее:

@темы: Дизайн, Ссылки, IT

---

Полезные онлайн приложения

Онлайн графический редактор
pixlr.com/editor/

Онлайн полезная таблица цветов для дизайнеров
colorschemedesigner.com/

@темы: Дизайн, Ссылки, IT