Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





Создание дизайна сайта Wellknown.as

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

Первое, что я, конечно, сделал – это составил концепцию чего я хочу получить в мозгу. В моем случае парни из Wellknow.as рассказали мне практически все, что они хотят видеть в дизайне. Также я воспользовался шаблонами CSS Framework и Fireworks. Вы можете скачать их с http://960.gs/.

С помощью Rectangle Tool (U) нарисуйте прямоугольник по размеру документа. Я использовал цвет #191D22. Затем в панели настроек щелкните на Add Icon (+) и выберите Add Noise. Я использовал значение 1.

С помощью Rectangle Tool (U) нарисуйте еще один прямоугольник, но сделайте его как полоску, начинающуюся с 200 пикселей по высоте. Я использовал цвет #1c202a.

Щелкните на Add > Shadow and Glow > Inner Shadow. Используйте значения 0 для дистанции, 40% для Opacity, 1 для Blur и 270º для Angle.

Снова щелкните по иконке Add и выберите Shadow and Glow>Drop Shadow. Используйте значения 0 для Distance, 65% для Opacity, 4 для Blur. Угол не имеет значение, так как дистанция равна 0.

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

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

Дублируйте слой и зайдите в Modify>Transform>Flip Vertical. Затем измените Opacity до 50% и зайдите в Modify>Mask>Reveal All. С помощью Gradient Tool (G) с черно-белым градиентом залейте маску слоя. То, где будет белый цвет, останется видимым, а то, где будет черный цвет, станет прозрачным. Так создается известный эффект мокрого пола.

Нарисуйте еще один прямоугольник с помощью Rectangle Tool и залейте его градиентом с обоими цветами. Измените только opacity: у первого цвета будет 100%, а второго 0%. Воспользуйтесь Gradient Tool (G), чтобы применить градиент под углом 90º.

Создание эффекта света очень простое. С помощью Ellipse Tool (U) нарисуйте эллипс, затем выберите белый цвет и измените Edge на Feather со значением 100. после этого измените Blend Mode на Overlay.

Теперь дублируйте, чтобы сделать свет ярче. Так же добавьте эллипсы для более реального эффекта света. Другая очень важная вещь – поэкспериментировать с opacity. Используйте значения 50-60% для новых эллипсов.

Для слогана я использовал шрифт Arial 35px, так как шрифт Arial шрифт iPhone, и градиент от светло серого к белому. Также я добавил тень с Distance 1px, 90% Opacity, Blur 1 и Angle 90º.

С помощью Round Rectangle Tool (U) нарисуйте прямоугольник с закругленными краями, залейте его серым цветом и измените opacity до 80% (1). С помощью Rectangle Tool (U) нарисуйте еще один прямоугольник внутри серого. Новый прямоугольник должен быть немного меньше первого (2). Снова с помощью Round Rectangle Tool (U) нарисуйте еще один элемент (3). Затем выделите 2 прямоугольника с закругленными краями и зайдите в Modify>Combine Path>Punch. Выделите все элементы и сгруппируйте их. После этого добавьте шум как описано в начале урока.

С помощью Line Tool (N) нарисуйте линию, затем зайдите в Modify>Mask>Reveal All. Выберите gradient tool с черно-белым градиентом овального типа и закрасьте им маску слоя. Так вы сделаете края прозрачными.

С помощью Ellipse Tool (U) нарисуйте черный эллипс и измените Edge на Feather, а значение amount установите 60. Затем с помощью маски слоя скройте часть эллипса ниже линии. Это делается очень просто, нарисуйте прямоугольник размером с область, которая должна остаться видимой и зайдите в Edit>Cut. Затем выделите эллипс и примените Modify>Mask>Paste as Mask.

Повторите эти действия для Id Card.

Теперь давайте добавим шнурок. Снова повторите действия по маскировке для шнурка. Также добавьте небольшую тень на карту и шнурок.

Разместите несколько иконок слева. И пришло время добавить содержание.

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

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

создание дизайна сайта Wellknown.as

Источник: abduzeedo.com
Просмотров: 5464

  Ваш коментарий будет первым

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама


Error. Page cannot be displayed. Please contact your service provider for more details. (10)