Урок по созданию стильного зеленого логотипа

Урок Фотошопа

кликайте на картинки, чтобы увидеть их полный размер!

Учимся создавать вот такой стильный логотип.

Начнем с создания нового документа 350x200px. Создайте новый слой и залейте его вот таким градиентом.

После чего напишите всё что угодно. Я написала “STYLISH LOGO”, используя шрифт Agency FB, болд, 45 pt. Оставьте место между словами.

Теперь примените к тексту следующие эффекты:

Вот что должно получиться:

Теперь, возьмите Custom Shape Tool, и нарисуйте звезду:

Примените к ней следующие эффекты:

Вот что должно получиться:

Теперь, выделите слой со звездой (Ctrl+click на иконке слоя в палитре слоев), идите в меню Select > Modify > Contract by 1 px, нажмите Оk.

Создайте новый слой, возьмите Gradient tool со следующими настройками:

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

Теперь, идите опять в меню Select > Modify > Contract by 1 px, создайте новый слой, возьмите gradient tool от белого к прозрачности, И протяните его от левого верхнего края звезды к её центру. Нажмите Ctrl+D чтобы снять выделение.

Теперь дублируйте наш слой со звездой. Удалите все эффекты в дублированом слое, переместите его под все слои кроме фона, нажмите Ctrl+T чтобы трансформировать, и увеличьте его, как показано. После чего задайте этому слою прозрачность 7%. Вот и всё!

Copyright © http://megatutorials.blogspot.com

Урок по созданию реалистичных волн во флэше

Урок по Флэш

кликайте на картинки, чтобы увидеть их полный размер


РЕАЛИСТИЧНЫЕ ВОЛНЫ (ПРИВЬЮ) ТУТ!

Начнём с того, что найдём картинку с закатом, типа этой:

Сохраним её как sky.jpg

После чего, октрываем её в фотошопе, идём в Edit – Transform > Flip vertical. Сохраняем перевёрнутую картинку как “water”

Размер каждой из наших картинок - 406x172 px,.

Теперь, открываем программу Флэш (Flash) и создаём новый документ размером 400x330 px.

Нажимаем Ctrl+R (импорт), и импортируем картинку sky.jpg. Помещаем её в верхнюю часть нашего документа, и убедившись что картинка выделена - нажимаем F8, превращаем её в movie clip, и называем sky_mc. Это обязательно!

Создаём новый слой, нажимаем снова Ctrl+R, импортируем картинку water.jpg, помещаем её под картинкой “sky”, точно так же, нажатием F8 переводим картинку в movie clip, и называем её water_mc. Слой помещаем под слой с небом.

Создаём новый слой, и за пределами документа рисуем прямоугольник, закрашиваем его градиентом от белого к чёрному. Убедимся что он выделен, и производим ту же процедуру F8, переводим картинку в movie clip, и называем её gradient_mc.

Теперь, кликая на каждую картинку - проверяйте их названия в этой строке:

После чего, создаём новый слой, нажимаем F9, и в появившемся окошке вставляем этот скрипт.

var w = water_mc._width;
trace(w);
var h = water_mc._height;
ripple = new flash.display.BitmapData(w, h);
ripple3 = new flash.display.BitmapData(w, h / 2);
ripple2 = new flash.display.BitmapData(w, h / 4);
ripple1 = new flash.display.BitmapData(w, h / 4);
gradient = new flash.display.BitmapData(ripple.width, ripple.height);
gradient.draw(gradient_mc, new flash.geom.Matrix(1, 0, 0, 1, 0, 0));
gradient_mc._visible = false;
offset3 = new flash.geom.Point(0, 0);
offset2 = new flash.geom.Point(0, 0);
offset1 = new flash.geom.Point(0, 0);
speed1 = -0.300000;
speed2 = -0.600000;
speed3 = -1.200000;
pt = new flash.geom.Point(0, 0);
rect = new flash.geom.Rectangle(0, 0, ripple.width, ripple.height);
this.onEnterFrame = function ()
{
offset1.y = offset1.y + speed1;
offset2.y = offset2.y + speed2;
offset3.y = offset3.y + speed3;
ripple3.perlinNoise(0, 15, 1, seed, true, true, 1, true, [offset3]);
ripple2.perlinNoise(0, 10, 1, seed, true, true, 1, true, [offset2]);
ripple1.perlinNoise(0, 5, 1, seed, true, true, 1, true, [offset1]);
ripple.copyPixels(ripple1, r1rect, r1pt);
ripple.copyPixels(ripple2, r2rect, r2pt);
ripple.copyPixels(ripple3, r3rect, r3pt);
ripple.merge(gradient, rect, pt2, 127, 127, 127);
dMap = new flash.filters.DisplacementMapFilter(ripple, pt, null, 1, 100, 100, "WRAP");
water_mc.filters = [dMap];
};
r1rect = new flash.geom.Rectangle(0, 0, ripple1.width, ripple1.height);
r2rect = new flash.geom.Rectangle(0, 0, ripple2.width, ripple2.height);
r3rect = new flash.geom.Rectangle(0, 0, ripple3.width, ripple3.height);
r1pt = new flash.geom.Point(0, 0);
r2pt = new flash.geom.Point(0, ripple1.height);
r3pt = new flash.geom.Point(0, ripple1.height + ripple2.height);

Вот и всё!!!

РЕАЛИСТИЧНЫЕ ВОЛНЫ (ПРИВЬЮ) ТУТ!

Исходник в виде файла формата*.fla можно скачать тут.


Copyright © http://megatutorials.blogspot.com

Урок по созданию замаскированного в джунглях текста

Урок Фотошопа

кликайте на картинки, чтобы увидеть их полный размер

Создаём замаскированный в ждунглях текст.

Начнём с открытия фотографии с изображением джунглей:

Пишем нужный нам текст:

И применяем к нему следующие эффекты:

Замаскированный текст готов :)

Copyright © http://megatutorials.blogspot.com

Урок по созданию оранжевого меню со стальной каёмкой для веб-сайта

Урок Фотошопа

кликайте на картинки, чтобы увидеть их полный размер

Создаём стильное оранжевое меню со стальной каёмкой.

Начнём с создания нового документа, размером 350 на 300 пикселей, с фоном чёрного цвета.

Используя Rounded Rectangle tool создайте прямоугольник с закруглёнными углами, как на рисунке:

И примените к нему следующие эффекты:

Теперь, с помощью Rectangular Marquee tool (прямоугольная область выделение) создайте выделение как показано на рисунке:

После чего, создайте новый слой и залейте его вот таким градиентом:

Наша первая кнопка готова:

Теперь, продублируйте этот слой столько раз, сколько у вас будет кнопок. Кнопки должны идти впритык друг к другу:

Дайте названия каждой кнопке:

Как показать что одна из кнопок активна? Легко, всего лишь выделите одну из них, например Products. Создайте новый слой и залейте его вот таким градиентом:

После этого возьмите инструмент Карандаш (Pencil Tool) диаметром 1 пиксель, и нарисуйте внутри выделения две линии, как показано на рисунке. Верхняя линиия цвета #ffb45a а нижняя цвета #ec8100. Вот как должно теперь выглядеть наше меню.

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

Добавим небольшой блик. Выделите верхнюю часть меню:

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

Copyright © http://megatutorials.blogspot.com