Позиционирование проекта и сегментация ЦА

[web-design]

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

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

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

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

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

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

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

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

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

2. К какому типу веб-сайтов вы относите вашу разработку:
- Домашняя страница;
- Презентационный сайт фирмы (товара, услуги);
- Информационный сайт;
- Корпоративный сайт;
- Электронный магазин.

3. Какая целевая аудитория проекта (опишите не только их возраст, должность или сфера деятельности, степень "обученности" пользованию on-line сервисов и другие характеристики - обязательно следует учесть их потребности.)

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

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

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

1. Для cайта любого типа и любой сложности:
- Помощь (она же - поддержка, она же - support, может включать в себя FAQ, или - Часто Задаваемые Вопросы, которые могут пополняться)
- Сервис поиска. Поиск может быть простым - по слову или словосочетанию или сложный - с учетом критериев, выбора рубрики, языка, регистра etc.
- Карта сайта.

2. Для сайта любого типа - есть ли необходимость предоставлять дополнительные сервисы обратной связи с посетителями:
- Гостевая книга
- Форум
- Опросы посетителей
- Подписка на новостийную рассылку
- Сервис мгновенной обратной связи

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

4. Для коммерческого сайта, цель которого - продажа товара или услуги, необходимо так же описать наличие динамических документов/разделов, таких как:
- Каталог товаров/услуг (обязательно следует оценить как объем товаров в каталоге, так и наличие/отсутствие рубрикатора каталога)
- Оперативно обновляемый прайс-лист
- Регистрация партнеров и диллеров (т.е. возможность предоставления посетителю "приватной" зоны проекта)
- Регистрация клиентов - потребителей товара/услуги
- Электронный магазин - собственно продажи.

Сформируйте на основании подобного опроса древовидную структуру - в будущем этот документ вы сможете использовать при формировании "карты сайта".

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

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

• Навигационное меню - простой список, ряд кнопок, выпадающие (или всплывающие) меню.
• Хлебные крошки - сквозной маршрут сквозь иерархическую структуру сайта
• Карта сайта - пример развернутой иерархической структуры.
• Текстовая навигация - перемещение по документам проекта, да и всей сети в произвольном порядке.
• Каталог - структура представления данных, удобная для электронных магазинов (предоставить каталог продукции по типам, подтипам...), для каталогов сайтов по рубрикам (Яндекс, Рамблер...)
• Пейджинг - перемещение страницам (применяется в многостраничных галереях, в длинных списках ссылок...)

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

Источник

@темы: Статьи

---

Неделя портфолио: Дизайним портфолио фотографа

[web-design]

Photo Portfolio Web Page Layout

Рисуем

1) Создаём новый файл (File>New), 766x750px и разрешением 72 dpi.
2) Далее берём Paint Bucket Tool (G) и заливаем цветом #0F1715.

3) Находим в интернете текстуру, похожую на эту:

4) Создадим новый слой. Идём в Edit>Fill, выбираем нашу текстуру, жмём ОК.

На этом же слое добавим маску, которую вы найдёте внизу слоёв (Add Vector Mask).
5) Выбираем BrushTool(В), ставим Opacity на 20%, чёрный цвет, и стираем верхнюю часть.


6)Меняем Blanding mode на Soft Light:

7) Берём Rectangle Tool (U) и рисуем тонкую полосу в нижней части, цвет #0F1715.
8) Тем же инструментом рисуем будущее меню.

9) Применим следующие параметры слоя:



10) Берём Rounded Rectangle Tool (U), с радиусом 10рх и рисуем кнопку меню. Далее зажав Alt и используя Rectangle Tool (U), вырежем ненужные элементы.

Параметры слоя:



11) Выбираем Line Tool (U) (weight 2px), чтобы сделать линию выше группы меню. Цвет белый. Затем тем же инструментом, зажав клавишу Alt, прерываем линию в трёх нужных местах. Все сегменты должны соответсвовать длине предыдущей (зелёной) кнопке.


Параметры слоя:



12) Используя тот же инструмент Line Tool (U), вставляем в рисунок 4 вертикальные линии. Для всех слоёв с линиями (последние четыре) поставим Fill 30%.

13) Напишем названия кнопок со следующими настройками:



Home Page

Параметры слоя:


14) Вставьте также название сайта.
PHOTO

PORTFOLIO


15) Теперь выбираем Rectangle Tool (U), чтобы изобразить слой для размещения фотографий нашего портфеля. Не важно какой цвет вы выберете.

Параметры слоя:


16) Выберите фото и разместите поверх предыдущего слоя.

17) Удерживая клавишу Alt, сделайте щелчок мышью между слоем с фоткой и предпоследним. Фотография разместится ровно в рамках предыдущего слоя.


18)Вставьте необходимые заглавия разделов.
WELCOME, PHOTO
TO MY PORTFOLIO, CATEGORIES
19) Сейчас мы представим маленькими прямоугольниками слева каждый раздел. Они должны быть расположены на разных слоях. Используем RectangleTool (U).
Параметры слоёв (пряиоугольников):



20) заполните разделы соответствующим тестом.
Жирный текст :

Обычный текст:

Линки:


21)Заполните следующий раздел соответствующим текстом.


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

Напишите об авторских правах:

И вот наконец финальный результат!!!

Спасибо за внимание!

Источник
Перевод Trisha.
Оригинал здесь Adobe-Software

@темы: Уроки, Web-дизайн

---

[мурк@]

привет ))) А МОЖЕТЕ ТАК СДЕЛАТЬ , чтобы когда наводишь мышкой на эту картинку она както менялась ( темнела , углублялась , выпячивала , а ещё круче еслеб вообще одна надпись оставалась )
ребят если кто сможет памочь , я буду просто очень счастлива )))
а если нет , то посаветуйте хотябы куда обратиться или через какие програмы делаеться .

---

Спорно, но как вариант - имеет вес: Заметки о портфолио

[web-design]

Чем меньше опыта у веб-дизайнера, тем активнее он стремится доказать свою "крутизну".

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

Рекомендации по сайтам-портфолио

Рекомендации по сайтам-портфолио

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

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

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

3. Работы на сайте не должны быть свалены в одну кучу. У посетителя должна быть очевидная возможность просмотра лучших работ. Длинный список никому особенно не интересен — интересны две-три хорошие работы. Автор сайта должен эти работы выбрать сам и поставить на главную страницу.

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

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

Источник

@темы: Мнение, Портфолио, Статьи

---

Неделя сайтов-портфолио: Портфолио дизайнера

[web-design]

Рисуем

Создайте новый файл, размером 766*699 px и 72 dpi.
Инструментом Rectangle Tool (U), делаем выделение, как на рисунке:



Применяем следующие параметры: (Blending Options>Gradient Overlay)






Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Карандаш, основной цвет - белый. Создаем изображение, как на рисунке, после чего Edit>Define Pattern.





Вверху страницы, рисуем инструментом - Rectangle Tool (U), полосу:





Параметры слоя: Fill 0%, Blending Options-Pattern Overlay:





Выше нарисованной полосы, инструментом - Rectangle Tool (U), рисуем полосу и закрашываем цветом - #BBDD03:





Создаем копию полосы (белые точки), используя - Free Transform переверните копию полосы в основание фона:



Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Карандаш, основной цвет - #729C06. Создаем изображение, как на рисунке, после чего Edit>Define Pattern.





Ниже нарисованной полосы, инструментом - Rectangle Tool (U), рисуем полосу:





Fill 0%, Blending Options-Pattern Overlay:





Инструментом Pen Tool (P), рисуем украшения фона, цвет - #AAD500:



Другой рисунок, цвет - #AAD700



Цвет - #AECD01





Создайте новый документ 4*4 px и 72 dpi. Выберите инструмент Карандаш, основной цвет - #E3E3E3. Создаем изображение, как на рисунке, после чего Edit>Define Pattern.



Инструментом Rounded Rectangle Tool (U), рисуем:





Blending Options>Drop Shadow



Blending Options>Pattern Overlay





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



Вставьте картинки:



Rounded Rectangle Tool (U), цвет - #EBEBEB, настройки:





Копируем последний слой, свободная трансформация, уменьшаем размер, цвет - #49BD14



Blending Options>Stroke



Инструментом - Rectangle Tool (U) делаем выделение, как на рисунке:



Зажав Alt нажимаем мышкой между двумя последними слоями. Fill 50%.





Для заключительного результата, мы объединяем слои с иконками, и копируем их 2 раза. После чего перемещаем иконки на 2 оставшиеся картинке, после чего меняем их цвета. Первая копия - #ED9300; вторая копия - #5EA9D1. Blending Options>Stroke, как показано выше.



Пишем номера в иконки, после чего Free Transform, поворачиваем их:





Blending Options>Drop Shadow





Напишите название сайта:





Blending Options>Drop Shadow





Новый слой. Точки, цвет - #D7FF00:



Создайте таблицы, и подпишите карточки:



About us, О нас





Создаем меню:





Инструмент карандаш, рисуем точки:





Копируем слой с разделительной полосой:



Полосы должны иметь следующие настройки. Blending Options>Outer Glow





Rounded Rectangle Tool (U), настройки:





Blending Options>Drop Shadow





Копия слоя. Инструментом свободная трансформация, уменьшаем, цвет - #6DD800



Blending Options>Stroke



Rectangle Tool (U), рисуем как на рисунке, цвет - #A9DB7C



Удерживая ALT, жмем мышкой между последними слоями:





Тоже самое делаем, для двух остальных картинок. Меняем только цвет: вторая кнопка #F6C073; третья - #89B4C7 (Blending Options>Stroke как выше):



Пишем название кнопок:





Blending Options>Drop Shadow





Rectangle Tool (U) рисуем белые квадраты:



Blending Options>Drop Shadow





Вставляем картинки в квадраты:



Rectangle Tool (U), рисуем двойную линию, левая сторона должна быть зеленая, правая - белая:



Параметры для левой полосы: Fill 0%, Blending Options>Pattern Overlay



Параметры для правой полосы: Opacity 70%, Fill 0%, Blending Options>Pattern Overlay







Копируем слой с полосой и перемещаем ее на другой край:



Напишите необходимый текст (ниже настройки для различных текстов):









Навигационный текст:



Цифровой:





Ellipse Tool (U), рисуем круг, цвет - #FFD40F



Blending Options>Drop Shadow



Blending Options>Stroke





Итог:



Полная версия
Автор: Adobe Tutorialz.
Перевод: Tin231
Источник

@темы: Уроки, Web-дизайн

---

Неделя сайтов-портфолио: Сайт-портфолио № 1

[web-design]

Часть 1.

Результат:

Рисуем

1. Создайте новый файл размера 800x720 px 72 dpi.

Создайте новый слой и залейте градиентом



Параметры градиента:






2. Используя Rounded Rectangle Tool (U), создайте на новом слое основную панель сайта, как показано на рисунке:



Установите следующие параметры слоя:

Blending Options>Gradient Overlay:




Параметры градиента:



Blending Options>Stroke:




3. Используя Rounded Rectangle Tool (U), на новом слое нарисуйте кнопку панели меню в заголовке сайта и поверните ее (Ctrl+t). Цвет кнопки #C92130.



Установите следующие параметры слоя:

Blending Options>Stroke:



Сделайте 4 копии слоя с кнопкой и установите цвета кнопок, как показано на рисунке:




4. Используя Ellipse Tool (U ), нарисуйте круг снизу меню:



Установите следующие параметры слоя:

Fill 0%

Blending Options>Gradient Overlay:



Параметры градиента:



Blending Options>Stroke:



5. Используя Ellipse Tool (U), нарисуйте маленький круг снизу сайта:



Установите следующие параметры слоя

Blending Options>Drop Shadow:



Blending Options>Inner Glow:



Blending Options>Stroke:



6. Используя Ellipse Tool (U), нарисуйте еще один круг, как показано на рисунке:



Установите параметры слоя с кружком:

Blending Options>Gradient Overlay:



Параметры градиента:



Blending Options>Stroke:



7. Сделайте несколько копий слоев с кругом, трансформируйте (CTRL+T) и разместите как показано на рисунке:




8. Нарисуйте еще три круга для того, чтобы отделить участок сайта:



Все три слоя должны иметь одинаковые параметры:

Цвет: #FF627A

Blending Options>Drop Shadow:



Blending Options>Stroke:




9. Нарисуйте еще один маленький круг:



Установки слоя с кругом:

Blending Options>Drop Shadow:



Blending Options>Stroke:



10. Теперь подпишите названия пунктов меню сайта, применяя свободную трансформацию (CTRL+T) слоев с текстом. Установки для текста представлены ниже:






11. Добавьте название сайта. Параметры текста для названия:

WEBSITE:



NAME:





Установите следующие параметры слоя с названием сайта:

Blending Options>Stroke:




12. Добавьте названия подразделов сайта.

Параметры текста:





Установите следующие параметры слоев с названиями подразделов:

Blending Options>Gradient Overlay:



Параметры градиента:




Blending Options>Stroke:




13. Используя Pencil Tool, белым цветом нарисуйте иконку на кнопке:






14. Пронумеруйте подразделы сайта. Используйте шрифт с параметрами:







15. Заполните подразделы текстом с параметрами:

Текст оранжевого цвета:



Основной текст:




Утолщенный текст:






Найдите в интернете логотипы и разместите их в подразделе сайта:






16. Используя Ellipse Tool (U), нарисуйте окно для представления скриншота сайта:



Установите следующие параметры слоя:

Blending Options>Drop Shadow:



Blending Options>Stroke:




Сделайте 3 копии слоя с кругом и разместите их как показано на рисунке:



Часть 2.
17. Найдите 3 скриншота, которые будут размещены в окнах (ALT+click между слоем с окном и слоем со скриншотом)







Повторите то же самое для других окон:



18. Используя Ellipse Tool (U), создайте кнопку-скроллинг для переключения скриншотов. Цвет #FD9B00.



Параметры слоя:

Blending Options>Drop Shadow:




Blending Options>Stroke:




Создайте новый слой. Используя Pencil Tool, нарисуйте на кнопке белый указатель.







19. Объедините в группу слои, которые образуют кнопку-указатель. Скопируйте группу, примените свободное преобразование (CTRL-T) и поместите ее с другой стороны скриншотов.

Окончательный результат:




Автор: Adobe Software
Перевод: Nastia
Источник

@темы: Уроки, Web-дизайн

---

Макет сайта недвижимости

[web-design]

Real Estate Layout

Сегодня я покажу, как создать сайт по недвижимости.

Рисуем

Начнем с нового документа
Размер, как обычно 760x770пикселей
Фон: белый

Продублируйте фоновый слой (чтобы сделать дубликат, убедитесь, что у вас выбран фоновый слой на вашей панели слоев, затем нажмите CTRL+J)

Идите в Filter > Noise > Add noise (Фильтр > Шум > Добавить шум) , и используйте те же настройки, что и я



Затем нажмите CTRL+U , и используйте следующие настройки :



У нас прекрасный фон для нашего макета.



Возьмите Rounded rectangle tool (Инструмент "Прямоугольник с закругленніми краями"), и создайте фигуру, как моя



Теперь скачайте следующее изображение ,



и расположите его как я:



Убедитесь, что этот слой выделен на вашей панели слоев, затем с помощью " Single Column Marquee Tool "(Инструмент "Область (вертикальная строка)") сделайте выделение как у меня



Затем нажмите CTRL+J ( это клавиатурное сокращение создамт новый слой сверху слоя с домом )
Я создал ноый слой посредством копирования
Выберите этот новый слой на панели слоев, затем нажмите V на вашей клавиатуре, и выберите Move tool (Инструмент "Перемещение") , и затем нажмите CTRL+T
Вы увидете на экране элементы управления трансформацией



С помощью Move toоl (Инструмента "Перемещеиние") измените горизонтальный масштаб, до тех пор, пока у вас не будет тот же результат, как и у меня



Выберите Rounded rectangle Tool (Инструмент "Прямоугольник со скругленными углами") , и создайте немного фигур. Вы можете увидеть, что я создал 6 маленьких фигур белого цвета и расположил их вверху нашего макета. Эти фигуры будут нашими кнопочками.
Затем я создал фигуру с левой стороны голубого цвета.



Для слой с голубой фигурой добавьте следующие стили слоя











Вот мой результат. Вы можете увидеть, что я добавил также некоторый текст. Это простая работа и я думаю, что каждый может сделать ее сам. Если вы хотите, можете скачать 3D логотип с www.logo-3d.com ( talk-mania сайт ) и использовать вместо моего текстового логотипа



После этого, я расположил некоторые формы и текст на этой оранжевой фигуре



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



Если у вас есть Talk-Mania Big-Pack, то вы можете найти прекрасный набор пиксельных иконок для следующего шага. Пожалуйста загрузите кисти пиксельных иконок и создайте 3 или 4 иконки на правой стороне вашего макета



Теперь выберите Line Tool (Инструмент "Линия") (убедитесь, что ширина установлена в 1 пкс ), и создайте 2 маленькие линии, как я.
Вы можете заметить, что я расположил другой текст на макете



Теперь, пожалуйста зайдите в www.photo-shop-brush.com ( Talk-mania сайт ) и скачайте следующий набор кистей : Free Photoshop Brushes
После того как вы загрузите кисти, создайте новый слой поверх всех слоев, и добавьте простые детали с помощью brush tool (инструмента "Кисть").



Надеюсь, вы найдете этот урок полезным.

Автор: Talk-mania
Перевод: BerdArt
Источник

@темы: Уроки, Web-дизайн

---

ОКОЛО темы: Креативные рабочие места

[web-design]

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

Смотрим дальше

Источник

@темы: Интересно, Дизайн

---

Новости Интернет

[web-design]

Discovery испортил репутацию веб-дизайнеров

Злата Николаева

Канадская студия веб-дизайна SmashLAB обиделась на телеканал Discovery из-за телешоу. Как сообщает TechCrunch, причиной претензий дизайнеров из Ванкувера стала одна из передач телеканала, которая называется точно так же, как и студия.

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

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

"Дорогой телеканал Discovery, - пишут сотрудники студии в открытом письме на специальном открытом для этого сайте Smash Lab Sucks, - у нас была небольшая милая студия дизайна, и мы очень много работали, а наши клиенты оставались довольны и писали положительные отзывы о нашей работе. Постепенно мы заработали хорошую репутацию, пока вдруг не появились вы с вашим проклятым телешоу!"

Проблема заключается в том, что обширная аудитория телеканала после старта новой передачи заспамила просторы Интернета негативными рецензиями, большинство из которых сводится к тому, что "Smash Lab sucks". Поэтому если кто-то из потенциальных клиентов дизайн-студии вводит в Google словосочетание "smash lab", чтобы почитать отзывы о работе, несчастные ванкуверские дизайнеры страдают "по ассоциации". Интересно, что канадцы вовсе не собираются подавать на телеканал в суд или предпринимать какие-либо другие решительные действия - они всего лишь просят Discovery сделать свою передачу чуть менее ужасной.
Источник

Сторонники Чичваркина открыли два сайта в его поддержку



В среду 28 января в интернете открылись два сайта в поддержку бывшего владельца "Евросети" бизнесмена Евгения Чичваркина.
Один сайт – chichvarkin.info – открыли активисты партии "Правое дело". На сайте Чичваркин представлен в образе известного кубинского революционера Че Гевары, "товарища Чи". На сайте расположены лента новостей, форум и раздел, содержащий интервью Чичваркина (на полночь 28 января в разделе было представлено три интервью).

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

Напомним, 28 января Басманный суд Москвы выдал санкцию на арест Евгения Чичваркина, накануне объявленного в международный розыск. Адвокат Чичваркина назвал арест его подзащитного незаконным, так как против него не возбуждено никакого уголовного дела.

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

По делу о похищении также проходят в качестве обвиняемых замначальника службы безопасности "Евросети" Андрей Ермилов и сотрудник компании Сергей Каторгин. О том, что к делу в том же качестве обвиняемого привлечен и Евгений Чичваркин, стало известно в начале 2009 года.

Как передает агентство РИА Новости, находящийся на Всемирном экономическом форуме в Давосе первый вице-премьер России Игорь Шувалов заявил журналистам, что следственные действия в отношении Чичваркина не являются сигналом российскому бизнесу. "Бизнес - это приоритет, и его надо законным способом в законных устремлениях защищать", - заявил Шувалов. При этом он также заметил, что бизнесмены должны нести ответственность за противозаконные действия, не исключив, впрочем, что в некоторых ситуациях власть может ошибаться

Источник

Рунетчикам дали мессенджер для художников

В офисе компании "КСАН" запустили мессенджер для общения с помощью рисунков - "Рисоваську". Пользователи мессенджера смогут обмениваться собственными картинками, устраивать конференции в рисованных каналах, создавать комиксы - одним словом, развлекаться.

Программа не поддерживает популярные протоколы обмена сообщениями и позволяет общаться только пользователям, зарегистрированным в "Рисоваське". Мессенджер работает под Windows (Vista или XP), версия для "маков" в процессе создания (пока "Рисоваську" можно запускать через CrossOver suite или Wine), версия под Linux пока не разрабатывается. Существует версия проекта на английском языке - MoodBox.

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

Мессенджер с таким оформлением и функционалом, скорее всего, может понравиться самым маленьким интернет-пользователям. С другой стороны, недавний скандал, связанный с очередной сменой протокола ICQ заставил многих пользователей QIP, Miranda и Adium задуматься о поиске альтернативных каналов общения. Вполне возможно, что кому-то из задумавшихся понравится как раз альтернатива в виде "аськи" для художников.

Предыдущая версия "Рисоваськи" - ArtyTalk.com - тестировалась с марта прошлого года. Стоит отметить, что новая версия сильно отличается от ArtyTalk - как внешне, так и благодаря расширенному функционалу.

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

Источник

@темы: Новости

---

Тренды веб-дизайна в 2009 году. Часть1

[web-design]

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

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


1. Напечатанные буквы (оттиск)

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











2. Продвинутые пользовательские интерфейсы

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

В частности мы видели гораздо больше светлых мест, отступов и свободного пространства для различных элементов дизайна. Мы также заметили, что многие интерфейсы используют интуитивно понятные визуальные подсказки для пользователей. Например, часто кнопки меняют свой внешний вид в зависимости от состояния - «нормального» или «нажатого». Помимо этого, все больше и больше сервисов сейчас могут быть «персонализированы» пользователем, то есть настроены по его усмотрению. Для нас это четкий знак того, что в 2009 будут популярны адаптивные пользовательские интерфейсы.




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









3. PNG прозрачность

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

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









4. Огромная типографика

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

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









5. Замена шрифта

Также как дизайнеры уделяют много внимания типографике, они смотрят за использованием шрифтов на странице сайта. Хотя классические Helvetica, Arial, Georgia и Verdana, несомненно, доминируют, мы наблюдали некоторые тенденции по замене шрифтов (например, с sIFR).

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







Источник

@темы: Интересно, Статьи

---

Требуется помощь: взгляд со стороны

[web-design]

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

Заранее спасибо тем, кто примет участие.

@темы: вопрос

---

Профессиональный сайт

[web-design]

Professional Modern Web Layout

Рисуем

Откройте фотошоп, создайте новый документ размерами 800x700px и 72dpi.
Установите главный цвет - #131313, возьмите Paint Bucket Tool (G) и залейте весь документ.

Создайте новый слой, возьмите Ellipse Tool (U), попробуйте создать элемент для заголовка сайта, сделайте овальное выделение и залейте его белым цветом.

Параметры слоя:
Blending Options>Outer Glow

Получили:

Применяя предыдущий инструмент, пробуйте сделать следующий слой, принадлежащий к заголовку сайта. Изменение формы делаем с Convert Point Tool.

Параметры слоя:
Blending Options>Inner Glow
цвет #143453.

Blending Options>Gradient Overlay

Gradients parameters:

Получили:

Сделайте копию нового сделанного слоя и выберите Free Transform и изменинте его так чтобы было похоже на это:

Параметры слоя:
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Создайте новый документ, размерами 20x20px и 72dpi, инструментом Rectangle Tool создайте три прямоугольника и с помощью Free Transform поверните их под углом, чтобы создать паттерн белого цвета..


Сохраните узор:

Сделайте новый слой используя Rectangle Tool (U) и создайте широкую полоску, которая будет фоном сайта.

Параметры слоя:
Blending Options>Gradient Overlay

Gradient’s parameters:

Blending Options>Pattern Overlay

Получили:

Сделайте копию недавно созданного слоя и выберите Free Transform, переместите копию в правую сторону и смотрите на рисунок:

Возьмите Rounded Rectangle Tool (U), представьте форму заголовка сайта, на которой будут его кнопки, покрасьте её в #010101.


Параметры слоя:
Blending Options>Outer Glow


Сделайте копию нового сделанного слоя и выберите Free Transform чтобы сделать её меньше немного и изменить у этой копии параметры:

Параметры слоя:
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Возьмите Ellipse Tool (U) и пробуйте нарисовать вспышку на правой стороне всех кнопок, расположенных на заголовке сайта.

Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

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


Сделайте копию нового сделанного слоя и переместите копию в лево, как показано на рисунке:

Выберите Rectangle Tool (U), чтобы создать и покрасить самую низкую часть фона сайта, этим цветом #1A1A1A.

Параметры слоя:
Blending Options>Outer Glow

Blending Options>Bevel and Emboss

Получили:

Возьмите Rounded Rectangle Tool (U) чтобы создать слой где будет одна из секций сайта.


Параметры слоя:
Blending Options>Drop Shadow

Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Сделайте копию в последний раз сделанного слоя и обратитесь снова к Free Transform, чтобы сделать копию более маленькой, после изменяем её параметры.

Параметры слоя:
Fill 0%
Blending Options>Stroke

Получили:

Потом нам придется выбрать два инструмента и создать один элемент, который будет на магистрале сайта. Выберите Rectangle Tool (U) и создайте первоначальный слой, а затем щелкните по кнопке Alt, в тоже вермя возьмите Ellipse Tool (U) и выделите 2 раза (как показано на рисунке), чтобы вырезать ненужные элементы.


Параметры слоя:
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Теперь создайте другой элемент магистрали, который должнен быть размещен сверху и посередине. Сделать его мы должны с помощью Rectangle Tool (U).


Параметры слоя:
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Используйте Line Tool (U), пробуйте сделать две вертикальных линии вдоль краев недавно созданной полосы, покрасьте их в #8D8D8D.


Возьмите Pencil Tool (cool.gif чтобы подвести двойную вертикальную черту на форме, где будут кнопки, смотрим скрин:

Параметры слоя:
Blending mode-Soft Light

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

Возьмите Ellipse Tool (U) и создайте слой для логотипа сайта.

Параметры слоя:
Blending Options>Outer Glow

Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

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

Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Возьмите Ellipse Tool (U), создайте ещё один слой поменьше, опять же для логотипа. Красим в #0A0F12.

Параметры слоя:
Blending Options>Stroke

Получили:

Выберите в последний раз Ellipse Tool (U), чтобы нарисовать вспышку на логотипе.

Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Зажмите кнопку Alt и нажмите мышью между слоями, после этого вспышка будет применена в пределах слоя с логотипом.

Получили:

Выберите Ellipse Tool (U), чтобы создать слой, для дополнения логотипа.

Параметры слоя:
Fill 0%
Blending Options>Outer Glow

Blending Options>Inner Glow

Blending Options>Stroke

Получили:

Следующий шаг включает создание специальной секции, расположенной с левой стороны сайта.
Берём Rectangle Tool (U) для этой операции.


Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Сделайте копию нового сделанного слоя и выберите Free Transform, чтобы повернуть копию и разместить её парралельно, смотрите следующий рисунок:

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

(самая низкая линия)

(Высшие линии).
Blending Options>Drop Shadow

Получили:

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

Идем дальше...
Введите после этого названия кнопок для на загаловке сайта.


Напишите также заглавие логотипа сайта, как на скрине.


Параметры слоя:
Blending Options>Gradient Overlay

Gradient’s parameters:

Получили:

Назовите секции сайта, смотрим скриншёты.
(about me)

(portfolio)

Вставьте текст в названную секцию “about me”, смотрите скриншёт:

(orange text)

(the rest of the text)

Вставьте скриншёты наших проектов в следующую секцию “portfolio”.
Параметры слоев(смотрим скриншёты)
Blending Options>Stroke


Последняя стадия включает добавление авторского права сайта:


Готово!
Полный размер


Автор: Adobe
Перевод: Glebash
Источник

@темы: Уроки, Web-дизайн

---

Логотип: работа над ошибками. Избыточная детализация и не технологичность

[web-design]

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

Эта статья открывает серию «Логотип. Работа над ошибками». В ней мы попробуем выявить последствия безответственного подхода к корпоративной символике и классифицировать основные недостатки, которые присутствуют в безграмотно разработанных логотипах, а также дать какие-то рекомендации по их устранению.

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

Казалось бы, ничего страшного: досконально все прорисовать, показать с помощью детализированной картинки товар, ассортимент, качество и т.д. Однако с такими «логотипами» возникает гигантское количество сложностей.

Во-первых, технологические сложности, о которых речь пойдет ниже.

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

В-третьих, сложный логотип сложно воспринимается и соответственно сложно запоминается.

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

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

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

Исключения. Логотипы, символизирующие традиции и аристократизм компании: «под старину», гербового типа, в штриховой манере, exlibris. Детализация этих логотипов обоснована.

Ресторан Марио. Дизайн-студия «Директ-Дизайн»
Примечание. Приведенный выше пример про овощи для простоты был основан на ассоциациях первого уровня. Хороший дизайнер, как правило, смотрит глубже помидоров и огурцов и мыслит категориями второго (а то и третьего) порядка. Но это тема для отдельной большой беседы.

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

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

Объемность. Зачем она здесь?
Как видно из вышесказанного, технологичность или не технологичность логотипа обусловлена сферой его использования. Если вам не нужна сувенирная продукция, а для факса и черно-белой печати разработан адаптированный вариант логотипа, то можно не переживать по поводу этого недостатка. Однако не стоит забывать, что даже в этом случае с логотипом «не все чисто». Тени, объемность и обилие градиентных растяжек в логотипе -- первые признаки того, что к нему приложил руку дилетант.

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

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

Логотип НТВ. Блики и объемность на шарике могут быть удалены без ущерба для конструкции

источник

@темы: Статьи

---

День логотипов: Футуристичиское лого

[web-design]

1.Открываем картинку по вашему выбору



2.Идем FILTER>BLUR>RADIAL BLUR



3.Изменим настройки как показано на рисунке




4.Жмем CTRL+F чтобы повторить эффект



5.Чтобы улутшить еффект про дублируйте слой и измените color mode to Overlay



6.Создайте новый слой и напишите "Motion Element"
7.Правым кликом на слой с текстом и выберите convert to shape



8.Выберите custom shape tool и там выберите "arrow2"



9.Изпользуем overlapping shape areas



10.Рисуем большую линию которая прикрывает текст



11.Из custom shapes tool выберите линию и нарисуйте пару линий на верху рисунка




12.Открываем Blending Options (Layer>Layer Style>Blending Options)
И делаем всё как на картинке показано



13.Правый клик на слой Motion Element и выбираем copy layer style



14.Правый клик на слой shape layer и выбираем paste layer style




15.Нарисуйте Круг с помощю custom shapes tool



16.Из layer mode измените на overlay и смените opacity на 50%




17. Сделайте копии из слоя с кругом и transforn to scale up sequencially



автор
Перевод Mongoose
Источник

@темы: Уроки, Web-дизайн, Дизайн

---

Логотип: работа над ошибками. Штампы, мода, плагиат

[web-design]

Данная статья продолжает серию «Логотип. Работа над ошибками». Сегодня мы поговорим о всякого рода клонах на рынке айдентики: случайных и не очень.

Штампы
Представьте, что вы ничего не понимаете в дизайне, а вас просят разработать логотип для стоматологической клиники. Что вы рисуете? Правильно -- зуб. Вы, конечно же, попробуете его нарисовать так, как до вас никто не рисовал: таким здоровым-здоровым, таким белым-белым, таким кругленьким и вкусненьким. Но как бы вы не старались, а против природы не попрешь, даже у негров в Африке зубы такие же, как у вас, и вы 100% нарисуете то, что красуется на сотнях стоматологических клиниках по всему миру: белоснежный зуб на фоне какого-нибудь голубого кружочка. Почему кружочка? А потому что у кружочка нет углов, которые могут ассоциироваться с болью. Почему голубого? А потому что голубой успокаивает и меньше всего ассоциируется с болью... И главное -- красивый такой, мощный корень, как будто это зуб не человека, а кобылы. Зачем корень? Вот это остается для меня загадкой. Ведь обычный человек такой зуб может видеть только в одном случае, когда его лишают этого зуба. Только болтающегося нерва с кусочком мяса не хватает для полной картины...

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

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

Перелом сознания должен произойти прежде всего у заказчиков дизайн-услуг, и не без помощи работников этой сферы: бренд-менеджеров, менеджеров по работе с клиентами и, конечно, самих дизайнеров. Для дизайнеров стоит очень сложная задача: сначала переломать себя («ааа, все равно зарубят!») и сделать что-то совершенно новое, а потом переломать заказчика («нууу, батенька, что ж вы мне такое принесли?... может просто зуб нарисуем?»). Задача сложная, но возможная.

Выводы. Ассоциации первого уровня -- в корзину.

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

АрбатПрестиж. Дизайнер Андрей Логвин. Оригинальная подача избитого символа
Мода
Мода приходит и уходит, а логотип в идеале должен быть вечен. Конечно, есть такая штука как омоложение логотипа или попросту редизайн. До этого рано или поздно доходит любая Компания, даже та, которая кичится своими традициями. И все же для того, чтобы редизайн проходил безболезненно для бренда, необходимо, чтобы у логотипа была крепкая основа, на которую время от времени можно «напылять» модность. Т.е. для хорошего логотипа мода -- вторична. И наоборот, айдентика сделанная только по веянью моды быстро устаревает и нуждается не в редизайне, а в ребрендинге, когда от старого логотипа ничего не остается. Понятно, что второй вариант связан с большими затратами, и возможно с утратой Компанией каких-то позиций, потому что даже плохая марка со временем приобретает ценность.

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

Также модными логотипами грешат веб-дизайнеры. По моему скромному убеждению, веб-дизайнер вообще не должен заниматься разработкой айдентики, как дизайнер айдентики и полиграфист не должен соваться в веб-дизайн. В каждой области дизайна своя специфика. Каждый должен заниматься тем делом, в котором он специалист. Сейчас же, к сожалению, повсеместно практикуется «комплексный подход»: «Мы разработаем вам обалденный сайт, только у вас логотип не ахти. Хотите, мы вам его переделаем? Совсем за недорого».

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

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

Ренессанс Страхование. Дизайн-студия DirectDesign
Ныне естественным продолжение «точечного» направления стала его своеобразная мутация, которую можно обозначить как «заплавленные точечки». От их обилия вокруг рябит в глазах.

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

Данный пример, являясь клиническим случаем, гармонично завершает этот раздел и открывает новый: плагиат. Разработчики сверху вниз: switchfoot creative, Landor and Associates, Kontrapunkt. Про хронологию создания логотипов автору статьи ничего не известно
Выводы. Если кажется, что без модного приема не обойтись, подумайте еще раз хорошенько. У задачи разработки знака никогда не бывает единственного решения. Всегда есть нетривиальные варианты, которые могут быть найдены путем кропотливого поиска и упорной работы. Весь вопрос во времени.

Исключения. Решение о построении конструкции знака тем или иным способом должно быть обдуманным и взвешенным. Возможно, решение, которое примет дизайнер пересечется с «мейнстримом», и всегда найдется тот, кто скажет, что мол «уже видел где-то такое», но если оно будет обоснованным, главная цель будет достигнута: логотип будет принадлежать именно данной конкретной Компании, отражать именно ее ценности и работать в унисон с ее образом.

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

Логотип, условно говоря, состоит из 2 частей: идеи и конструкции. Можно «позаимствовать» идею и оригинально ее воплотить (интерпретация штампа), можно «позаимствовать» конструкцию для оригинальной идеи (модные тенденции). Пожалуй, плагиатом можно назвать тот случай, когда «заимствуют» и идею, и конструкцию. И этот недостаток уже ни при каких обстоятельствах не станет достоинством.

Источник

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

---

День логотипов: Night Club Logo

[web-design]

Рисуем

1) Создаем элипс используя elliptical shape tool.

2) Активируем subtract form shape area (как на рисунке)

3) Создаем прямоугольник используя rectangular shape tool.

4) Двойной щелчок по слою, открываются стили слоя. Применить настройки указанные на рисунке


5) Вставьте изображение танцующей девочки

6) "Обведите" девушку используя polygonal lasso tool

7) Нажмите Ctrl+Shift+I для инверсии. Нажмите delete

8) Уменьшите рисунок и поместите как показано

9) Позвольте захватить прозрачные пиксели от палитры слоя! Заполните черным цветом, должно получиться так

10) Двойной щелчок по слою! Примените настройки как на рисунке


11) Подобно вышеуказанному способу создаем других танцующих людей

12) Напечатайте название клуба и наложите на основание слоев

13) Скопируйте настройки слоя элипса и примините к тексту

14) Добавьте различных эффектов, подобие лучей!
и ваш логотип Ночного Клуба готов


Взято тут!
Переводил ufoo
Источник

@темы: Уроки, Web-дизайн, Дизайн

---

День логотипов: Неоновое лого - просто :)

[web-design]

Рисуем

1.Создайте новый документ, 300*300 с черным фоном, затем используя' Rectangular Marquee Tool' создаём квадрат

2. Применяем 'Filter' > 'Distort' > 'Polar Coordinates'

3.Теперь дублируйте слой и поверните его на 180 ° 'Edit' > 'Transform' > 'Rotate 180°'изменяем режим смешивания на 'Linear Burn'.

4.Прежде, чем мы продолжаем, мы должны слить наши два слоя в один, чтобы сделать это мы щелкаем 'Layer' > 'Merge Down'Теперь щелкните'Filter' > 'Artistic' > 'Plastic Wrap'.с такими настройками:

5.Наконец мы используем 'Filter' > 'Disort' > 'Polar Coordinates'.. Измените параметры настройки на:

6.Теперь, чтобы добавить цвет жмём 'Ctrl и U' – делаем желаемый оттенок для вашего лого


Перевод:OLJKA
Источник
Взято с 4des.ru

@темы: Уроки, Web-дизайн, Дизайн

---

Сверхбыстрый дизайн

[web-design]

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

Дальше

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

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

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

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

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

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

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

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

Другие недостатки идеи внесения исправлений после запуска:

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

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

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

Автор - Якоб Нильсен

@темы: Якоб Нильсен, Интересно, Статьи

---

"Психология дизайнера" или "Как создается дизайн?"

[web-design]

Обычно, процесс создания сайта "дизайнером" начинается с того, что человек, вообразивший себя "дизайнером" открывает dreamweaver или photoshop и начинает крутить-вертеть. Что-то да получится.

Вебсайт - это всего лишь способ публикации идеи.
Идея - это результат воспитания человека.

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

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

Небольшие советы о том, как стать творческим человеком:

1.Научитесь любить себя
2.Научитесь ценить свой труд
3.Научитесь критиковать чужие работы
4.Смотрите много кинофильмов не исключая однородные боевики.
5.Слушайте музыку не исключая дешевую музыку
6.Смотрите и критикуйте
7.Перестаньте придумывать каждый день новое название для своей "Студии дизайна" =) или "Вебстудии" =) У вас ее нет, вы - личность.

Дочитать

Будет у вас студия - будет. Главное, дойдите до того уровня, когда вы сможете быть уверенными в своих силах.

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

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

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

Идея совершенна тогда, когда она ваша, а не чья-то.

Это мой стиль, который я назвал "Graficioz".
К этому я пришел 2 года назад.

Занимайтесь саморазвитием а не гонкой "Кто лучше"

Автор: Patrick Yegor
Источник

@темы: Интересно, Мнение, Статьи

---

Гранджевый дизайн сайта

[web-design]

Photoshop paper texture from scratch then create a grungy web design with it

Рисуем

Часть первая. Создание бумажной текстуры.



У нас есть три способа получить текстуру бумаги:
1. Отсканировать вашу бумагу
Посмотрите отличную работу Bittbox's — Создание гранджевой текстуры бумаги
2. Использовать уже готовые текстуры

Найти эти текстуры вы можете по следующим ссылкам:
Bittbox | Texture King | PSDTUTS Textures

3. Сделать эту текстуру в фотошопе
Мы пойдем по этому пути!

Создание текстуры в фотошопе приводит к более стилизованному варианту, нежели реалистичному, однако есть и преимущества этого способа — вам не нужны никакие «внешние» изображения.

Шаг первый.


Естественно, первым делом мы должны открыть нашу программу, Adobe Photoshop. Создаем новый документ с размерами 1200 пикселей по ширине, и 900 пикселей по высоте. Затем заливаем наш фон бежевым цветом — #e8e8e2.

Шаг второй.


Создаем новый слой и выбираем главный и фоновый цвета: #979a8f и #cfd1c5 соответственно. Затем идём: Filter > Render > Clouds.

Шаг третий.


Сейчас выполняем: Filter > Artistic > Palette Knife с параметрами, показанными в изображении выше. Palette Knife превращает наши облака в капли, в конечном счете это добавит помятости нашей бумаге.

Шаг четвертый.


Теперь добавляем «шума» нашей бумаге, с помощью Filter > Noise > Add Noise, с настройками, показанными выше на картинке. Это добавит бумаге «грубости».

Шаг пятый.


Мы добавили шума нашей бумаге. Самое время изменить наложение этого слоя на Multiply, и снизить непрозрачность до 30%. Это придаст тон для заднего фона.

Шаг шестой.


Сейчас создаем новый слой поверх обоих слоев, выбираем главный и второстепенный цвета: #42433e и #cfd1c5 соответственно. Как вы заметили, этот фон более тёмен, чем предыдущий, созданный таким же образом (с помощью фильтра «облака»), это придаст контраст. Идём в Filter > Render > Clouds

Шаг седьмой.


Простой шаг. Идем в Filter > Artistic > Palette Knife, и ставим настройки как на картинке выше.

Шаг восьмой.


Опять же, изменяем наложение слоя на Overlay и понижаем непрозрачность до 60%
Вот видите, эти действия придали нашей бумаге больше глубины, рельефности.

Шаг девятый.


Можно считать, что для этого урока текстура уже совершенна, но вы можете легко сделать другие вариации, стоит только «поиграть» с режимами наложения. Например, чтобы сделать эту темную коричневую бумажную текстуру, нужно:
1. Возьмите легкую (светлую) версию текстуры и нажмите Ctrl+U, затем идите в Image > Adjustments > Hue/Saturation, измените «ползунки» этой настройки на -30, -10 и -5 соответственно.
2. Продублируйте слой и нажмите Ctrl+Shift+U, чтобы сделать его черно-белым
3. На слое с черно-белой текстурой идите в Image > Adjustments > Brightness/Contrast и измените параметры на -30 и +30 соответственно.
4. Измените наложение слоя с черно белой текстурой на Overlay.
5. Теперь создайте новый слой поверх всех, заполните его цветом #beac93 и измените наложение на Multiply.
6. Продублируйте этот слой.
7. Снова продублируйте черно-белый слой и переместите на самый верх. Измените наложение на Overlay, непрозрачность понизьте до 20%, и поверните слой на 90' (градусов), чтобы добиться глубины.

Шаг десятый.


Это цветовое решение не обязательно, вы можете сами настроить всё как вам надо.
Вот, например, еще один способ:
1. Возьмите самую первую «шумливую» текстуру и выполните Filter > Texture > Texturizer, используйте там Canvas, первый параметр поставьте на 75% и еще 2 настройте по своему усмотрению.
2. Возьмите вторую «шумливую» текстуру и выполните предыдущий фильтр.
3. Сейчас продублируйте второй слой и поверните на 90', измените параметры наложения на Overlay и непрозрачность снизьте до 60%.
4. Создайте новый слой сверху и заполните белым цветом — #ffffff
5. Выполните фильтр Filter > Texture > Texturizer и опять же выберите там Canvas, 200% и 16 соответственно, измените наложение на Overlay и непрозрачность на 20%.
6. Сейчас создайте еще один слой поверх и опять залейте белым цветом, но в этот раз смените наложение на Color, а непрозрачность на 53%, чтобы добавить текстуре белизны.

Финальный шаг о текстуре.
Теперь вы можете использовать текстуру, полученную из урока — turn it into a seamlessly tiled background
Во всех остальных частях урока будет использована первая текстура, полученная в 8 шаге.

Часть 2. Создание шаблона сайта.


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

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

Шаг тринадцатый.



Для начала разметим рабочую область чтобы облегчить работу с макетом. Задаем отступы макета от края фона, первый на отметке в 100 px по линейке (линейке программы Photoshop), а второй отступ на отметке в 1100 px по линейке — в итоге получаем ширину квадрата 1000 пикселей.

Затем создаем новый слой, и рисуем большой белый квадрат, как на рисунке.

Шаг четырнадцатый.



Затем понижаем непрозрачность этого слоя до 25%

Теперь нужно сделать наш прямоугольник «грубее». Есть очень много наборов гранджевых кистей, но для этого шага мы будем использовать одну из стандартных кистей фотошопа. Посмотрите скриншот — это кисть под номером 60

Если у вас нету этой кисти, щелкните по маленькой стрелке вверху этого окошечка кистей и выберите Wet Media Brushes, затем щелкните в появившимся диалоговом окне на Append. Всё готово, кисть у вас есть.

Шаг пятнадцатый.



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

Шаг шестнадцатый.



Потом создайте новый слой ниже белого прямоугольника, и используйте радиальный градиент (G), с настройками цвета от белого к прозрачному. Это место, где мы разместим фирменный знак (логотип). Измените режим наложения на Overlay и непрозрачность на 70%.

Шаг семнадцатый.



Теперь добавляем небольшой «фирменный знак» — в нашем случае это просто слово, зато с хорошим шрифтом. Шрифт, который я выбрал, здесь — Egyptian-710 BT, он очень известен, хорошо воспринимается и подходит для наших целей, потому что нам нужен шрифт, который подчеркивал бы неровность всего макета, стилизованного под бумагу.

Шаг восемнадцатый.



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

Я написал слово «Folio» этим шрифтом — HumstSlab712 Blk, а цвет выбрал такой — #c5c6ba.

Шаг девятнадцатый.



Меняем параметр наложения на Color Burn, непрозрачность 70%, и добавляем окантовку в Blending Options, 1 пиксель. Заметьте, что для пущего эффекта, я использовал паттерн (образец) а затем выбрал текстуру для окантовки. Теперь устанавливаем низкую непрозрачность (36%) и параметр наложения на Multiply, создается эффект «затухания» окантовки.

Шаг двадцатый.



Двигаем наш водяной знак под логотип с надписью Manilla

Шаг двадцать первый.



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

Шаг двадцать второй.



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

Шаг двадцать третий.



На слое под линией нарисуйте небольшой прямоугольник высотой 3—4 пикселя.

Шаг двадцать четвертый.



Измените наложение на Multipky и непрозрачность на 5%. Получилась тень от разделителя.

Шаг двадцать пятый.



Создайте новый слой и нарисуйте прямоугольник высотой в 20 пикселей .

Шаг двадцать шестой.



Измените непрозрачность на 50% и опять подотрите его инструментом ластик, той же гранджевой кистью.

Шаг двадцать седьмой.



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

Оба этих слоя смотрятся очень гармонично в соответствии со стилем сайта.

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

Шаг двадцать восьмой.



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

Шаг двадцать девятый.



Размещаем немного контента. Как вы видите, я использую шрифт с начертанием regular.

Я использовал шрифт Cambria, это стандартный шрифт ОС Vista. В CSS лучше задать шрифт Georgia, т.к. не у всех есть шрифты «висты». Если у вас нету этих шрифтов, вы можете получить их свободно и юридически, следуя этим инструкциям. Необязательно использовать именно этот шрифт. Мне, например, еще нравится шрифт Calibri.

Шаг тридцатый.



Как вы видите из картинки, я добавил нашу главную панель сайта. Я использовал очень темно-коричневый цвет — #1e1a19 и Rounded Rectangle Tool (U), с радиусом закругления 5 пикселей.

Шаг тридцать первый.



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

Шаг тридцать второй.



Теперь также приблизьте к правому углу и инструментом Polygonal Lasso (L) (Полигональное выделение/лассо) с зажатой клавишей Shift выделите правый верхний угол, как на картинке выше, и нажмите клавишу Delete.

Шаг тридцать третий.



Создайте новый слой, и с помощью полигонального лассо нарисуйте под обрезанным углом такой треугольник на расстоянии 1-ого пикселя от края, залив его цветом — #352f2b.

Шаг тридцать четвертый.



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

— Начните с точки нижней левой стороны, кликнув для её обозначения (на листе).

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

— Сейчас щелкните на третью позицию, и снова удерживая клавишу мыши, а также держа SHIFT зажатым, чтобы чертить все линии под правильным углом, чертите следующую линию, к четвертой позиции. Если у вас что-то не получается, и нужно вернуться на шаг назад — стоит только нажать CTRL-Z, чтобы уничтожить предыдущую линию; и если вам нужно вернуться назад больше, чем на один шаг — нажмите CTRL-ALT-Z.

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

— Наконец, держа нажатым SHIFT, протащите линию к пятому пункту и закройте кривую — вы получили красивую форму.

Шаг тридцать пятый.



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

Как только вы завершили эту форму, щелкаем на ней правой кнопкой и выбираем пункт Make Selection (Создать выделение).

Шаг тридцать шестой.



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

Шаг тридцать седьмой.



Теперь продублируем слой с нашей кнопкой, и разместим его под слоем с предыдущей кнопкой, также, как на картинке. Потом смените наложение на Color Overlay и залейте красивым, красно-оранжевым цветом — #cc5630. Переместите ее чуть правее, как на картинке выше.

Затем зажимаем CTRL и щелкаем по слою с первой кнопкой, затем выбираем Rectangular Marquee Tool, и нажимаем стрелку на клавиатуре несколько раз, пока наше выделение не закроет чуть-чуть оранжевую кнопку.

Шаг тридцать восьмой.



Затем создаем новый слой между двумя кнопками, и заливаем его более темным оранжевым цветом — #b44724. Потом, удерживая CTRL, щелкните по оранжевой кнопке, затем нажмите Ctrl-Shift-I, чтобы инвертировать выделение, и щелкните по среднему слою, и нажмите клавишу Delete. Теперь у вас осталась темно-оранжевая часть, которая частично покрывает ярко-оранжевую кнопку.

Шаг тридцать девятый.



Итак, мы получили что-то вроде стилизованной тени на второй, оранжевой кнопке.

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

Шаг сороковой.



Вот это — дизайн сайта на данный момент. Я добавил еще парочку кнопок, и, естественно ввел в них текст, обозначающий то, куда вы перейдете по их нажатию.

Шаг сорок один.



Сейчас создадим воображаемую рабочую область. Пока это просто белый прямоугольник, где будет потом какая нибудь картинка. Создаем новый слой, и, используя полигональное лассо, рисуем неровный прямоугольник с «заваленными» сторонами, и зальем его очень темным цветом, почти черным — #0e0c0c.

Шаг сорок два.



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

Также я добавил немного радиального градиента в рабочей области, от белого к бежевому — потому что я очень люблю такие градиент, и мне их никогда недостаточно :-)

Шаг сорок три, завершающий.



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

Поскольку кисти получились слишком размытыми, я использовал Filter > Sharpen > Unsharpen Mask , чтобы это компенсировать.

Итог урока: дизайн.



И внутренняя страница.




Автор: Collis;
Перевод: Art De Photoshop
Источник.

@темы: Уроки, Web-дизайн