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

1) Открываем новый файл

2) Заливаем фон красным цветом,

3) Печатаем текст, пусть он будет серебряным (R 222, G 220, B220)

4) Текст можно немного искривить. Layer > Type > Warp Text.

5) Теперь еще украсим текст — для этого щёлкнем 2 раза по его инонке в панели Layers и нам откроетются свойства слоя. Сначала зададим Stroke…

6) Потом Outer Glow…

7) И, наконец, Drop Shadow

8) Оставляем пока этот документ и создаём новый Cmd/Ctrl + N, такой же по размерам.

9) Зальем его градиентом. Выбираем Layer > New Fill Layer > Gradient (у нас тут чёрно-белый)

10) Переводим картинку в режим Image > Mode > Grayscale

11) Теперь переводим в режим Bitmap Image > Mode > Bitmap

12) Осталось перекинуть это изображение в то, где мы печатали текст. Для этого выбираем Select > All, далее Edit > Copy, потом переходим в первое изображение и вставляем Edit > Paste. Битмаповский документ можно закрыть без сохранения.

13) Теперь очередь клиппинг-маски. Слой с точками должен быть выбран, слой с текстом — под ним. Зажимаем Alt и кликаем между слоями (там появится значек). Получится маска.

14) Ставим режим наложения Multiply 15%. Готово.

Я зашёл немножко дальше, вот что у меня вышло.

via

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

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 1 комментарий | Добавить в del.icio.us
теги: халфтон, эффекты photoshop

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

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

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

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

• Текст должен быть легким и удобочитаемым не только в плане организации и подачи информации, но так же и его формата.
• Смысл текста должен пониматься без усилий.
• Текст должен быть предельно понятен даже при «чтении по диагонали» — помните, что посетители веб-сайтов, как правило, часто просто просматривают статьи. Согласно исследованиям, читается только 28% объема всего текста на веб-странице.

Далее читайте, как просто и легко добиться этих целей.

1. Краткость — залог успеха

Всем хорошо известно, что пользователи не способны долгое время целенаправленно концентрировать внимание на каком-то определенном объекте в сети. Исследователи, раскрывающие изменения в наших поведенческих привычках при чтении цифровой информации, пришли к заключению, что большинство пользователей просто просматривают информацию и находят то, что им нужно без долгого и кропотливого прочтения всего контента страницы или даже сайта.
Нам нужны ключевые слова, мы привыкли читать по «диагонали», и быстро теряем способность концентрировать внимание на чем-то одном.
Мысль о том, что мы пытаемся сэкономить время на прочтении сайтов была подтверждена исследованием удобства и простоты использования веб-сайтов, проведенным Якобом Нильсеном. Согласно выводам исследования, эффективность ресурса можно повысить до 58%, просто сократив количество знаков на странице наполовину.
Более короткие статьи гарантируют большую удобочитаемость, так как именно от длины предложений и даже слов зависит наше пресловутое ридабилити и понимание текста, для достижения этой цели используйте следующие рекомендации.

• Не тратьте время на введение, переходите сразу к сути.
• Исключите ненужную информацию.
• Используйте легкие для понимания, более короткие, общие слова и фразы.
• Избегайте длинных абзацев и предложений.
• Используйте экономные и эффектные способы оформления мысли и текста, например, вместо того, чтобы писать «одна тысяча» ограничьтесь цифрой «1000». Это позволит пользователям быстро просмотреть текст и найти нужную информацию
• Проверьте свой стиль, используя формулы ридабилити, которые помогут вам оформить текст как можно правильнее. Инструмент для определения индекса ридабилити (The Readability Test Tool) позволяет вам подставлять URL, и показывает выдачу, основанную на популярных формулах ридабилити, таких как Flesch Kincaid Reading Ease (проверял на этом блоге, работает и с русским языком — прим. ред.).

2. Заголовки и подзаголовки, организация текста в больших статьях

Проведя исследование удобства и простоты использования сайтов, эксперт по организации веб-контента Джерри МакГоверн (Gerry McGovern), пришел к выводу, что интернет-пользователи просматривают страницы в интернете способом, который он назвал «блочным чтением».
Так, при просмотре страницы, мы подсознательно делим ее на отдельные блоки информации и быстро сканируем взглядом каждый из этих блоков, высматривая в каждом ту информацию, которая нас интересует.
Исследование движений глазного яблока, проведенное Нильсеном, только подтвердило этот вывод: сначала мы просматриваем текст слева направо, а затем скользим взглядом вниз по тесту и движения наших глаз напоминают латинскую букву F (по-английски это называется F-shaped pattern), что значит, что большое количество текста попросту остается непрочтенным.

Есть несколько вариантов работы с этим достаточно громоздким текстом. Одна стратегия состоит в том, чтобы разбить длинные статьи на абзацы для того, чтобы было удобнее быстро их просматривать. Данная стратегия отвечает особенностям блочного чтения (статья буквально разбита на эти самые блоки и каждый блок имеет заголовок), а так же тем, кто предпочитает просматривать статьи по модели буквы «F», потому, что заголовки мы так или иначе читаем.
Ниже вы видите этот текст в двух вариантах – без заголовков (вариант 1) и с заголовками (вариант 2). Думаю, понятно, с каким из двух вариантов читателю будет проще работать.

Что можно предпринять:

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

3. Помогите читателям максимально быстро просматривать ваш текст

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

Что можно предпринять:

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

4. Используйте маркированные списки и форматирование текста

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

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

Что можно предпринять:

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

5. Пробелы очень важны

Значения интервалов между символами, словами, строками и абзацами очень важны. От того, как текст расположен на странице, зависит его удобочитаемость (значит, и скорость прочтения).
В исследовании, названном Reading Online Text: A Comparison of Four White Space Layouts, исследователи обнаружили, что варьируя интервалы и пробелы в тексте можно влиять на его понимание читателем и скорость его прочтения.

Что можно предпринять:

• Обдумайте варианты верстки вашей странички в плане пробелов и интервалов и настройте CSS сайта соответствующим образом.
• Ознакомьтесь со статьей CSS properties that affect spacing in your text. Наиболее важными являются такие показатели как margin, padding, line-height, word-spacing, letter-spacing и text-indent.

6. Понятные и удобные ссылки

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

Что можно предпринять:

• Определите, какие ссылки уже были использованы пользователем, выделяя использованные цветом (поможет селектор CSS :visited). Это поможет посетителям видеть, какими ссылками они уже пользовались, а какими — нет.
• Используйте атрибут title, обеспечивая ссылки контекстом, на основе которого пользователи будут в общих чертах знать, что их ждет при переходе по ним.
• Если возникнет необходимость в дополнительной информации, читайте Visualizing Links: 7 Design Guidelines.

7. Стратегическое использование визуальных элементов

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

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

Что можно предпринять:

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

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

via

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 2 Комментариев | Добавить в del.icio.us
теги: Jakob Nielsen, ридабилити, юзабилити

Серия фотографий «Spectrum» немецкого фотографа Маттиаса Хеидериха (Matthias Heiderich) является отличным примером минимализма в фотографии, где всё внимание уделяется игре цвета и форм.

Сайт Маттиаса

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 1 комментарий | Добавить в del.icio.us
теги: Matthias Heiderich, Архитектурная съёмка, Германия, минимализм

Дизайнер Саймон Си (Simon C) представил отличную коллекцию обоев для iPad 3, очень интересные по своей геометрии работы

Скачать их можно со страницы Саймона

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 1 комментарий | Добавить в del.icio.us
теги: ipad, Simon C, абстракции, геометрия, обои

Сегодня я привожу эту статью, написанную Патриком Коксом (Patrick Cox), как повод для размышления. Не скажу, что я во всём согласен с автором, но такое мнение имеет место быть, и оно довольно популярно. Поговорим в том числе и о дизайне сайтов на чистом CSS и HTML, т.е. без использования Photoshop.

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

Инакомыслие это плюс

В течение многих лет мы разрабатываем макеты сайтов в таких программах, как Photoshop, Fireworks, Illustrator и всегда тщательно выверяем каждую деталь, чтобы все выглядело идеально. Затем разделяем макеты на кусочки и собираем их воедино снова, как паззл. Но если умело пользоваться CSS, нужда в этом отпадает, тем более с появлением CSS3.Так как создание веб-страницы сейчас стало динамичней, учитывайте несколько принципов, которые оптимизируют процесс создания хороших макетов.
Итак, всегда держите в голове:

• Реалистичные шрифты
• Кнопки без изображений
• Размер дисплея
• Изображения
• Что можно сделать с помощью CSS?
• Возможно ли это?

Кстати, ниже вы найдёте несколько примеров сайтов, созданных с минимальным использованием Photoshop.

Реалистичные шрифты

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

Кнопки без изображений

Кнопки могут вызвать много проблем. Лучше задумывать кнопки, которые можно создать через CSS или JavaScript. Есть в этом много преимуществ: живой текст, масштабируемость кнопок, не нужно загружать картинки, не надо спрайтов кнопок и фоновых изображений, которые нужно подгонять по размеру и прочее. Простые кнопки могут сэкономить огромное количество времени дизайнера, поэтому, прежде чем создать супер-навороченные кнопки в Photoshop подумайте, вдруг это можно сделать в CSS. Если да — сделайте это, а если нет, подумайте, стоит ли оно того.

Размер экрана

Так как размеров дисплеев сейчас великое множество, от 320×480 до 2560×1440, продумайте, как дизайн будет смотреться на каждом из них. Хороший дизайн — работа, которая требует основательной работы головой, так что прежде, чем приступать, подумайте над следующим:

• Что за аудитория будет у сайта, нужна ли будет мобильная или респонсив-версия.
• Как будет расположено содержание: по центру или по левому краю?
• Насколько настраиваемым должен быть этот макет

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

Изображения

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

Можно ли все сделать в CSS?

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

Возможно ли это?

Не мудрите и не размещайте огромное фоновое изображение, (которое, возможно, придется ещё и разделить на 40 частей, чтобы оно более-менее быстро подгрузилось). Не проектируйте сайт 1280px в ширину. Ограничивайтесь размерами среднестатистического дисплея, ограничениями изображения, ограничениями файла и общими ограничениями сети. Конечно, можно делать исключения, но не стоит этим злоупотреблять.
Сеть — довольно открытое и гибкое понятие, и в ней можно создать практически что угодно, главное, помнить, что нужно укладываться в рамки. И начинать их учитывать лучше всего до того, как вы начнете проектировать дизайн сайта. Приступайте к конкретным действиям только тогда, когда будете твердо уверены в том, что ваша задумка не из области фантастики. Только удостоверьтесь, что задача. Я считаю, что каждый веб-дизайнер должен владеть HTML/CSS.

Допустили ошибку? Исправьте ее!

Огромный плюс веб-дизайна таков: ошибки и неточности всегда можно исправить. Сайт легко обновить. Стоит только загрузить обновления — и все в полном порядке. Для того, чтобы усовершенствовать дизайн, не обязательно возиться с Photoshop.

У нас полная свобода действий, которая ограничивается лиш тем, что вы на самом деле хотите спроектировать. Поэтому не путайте веб-дизайн с дизайном полиграфическим. Лучший способ освоить веб-дизайн в совершенстве — это освоить HTML/CSS/Javascript. В свободное время попробуйте спроектировать веб-сайт, ни разу не воспользовавшись Photoshop, я думаю, что вы будете удивлены тем, каких результатов можно достичь при работе исключительно в браузере.

via

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 7 Комментариев | Добавить в del.icio.us
теги: Patrick Cox, Дизайн без Photoshop

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

В данной статье мы будем работать с набором иконок под названием Uicons.

Шаг 1: Изучение

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

Шаг 2: Найти нишу

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

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

Шаг 3: Планирование

Планирование означает принятие решения о том, какие иконки мы хотим включить в набор. На этом этапе необходимо принять во внимание на кого именно будет рассчитан ваш набор иконок, а затем создать список (лучше всего сделать в виде таблицы) на основе этих параметров.
Хорошим способом проработать данный этап будет разбить список на подкатегории, например, социальные иконки, типы файлов, транспорт, и т.д. Такой подход не только позволит держать данные в порядке, но и будет полезным на стадии дизайна, так как проверка по списку по мере выполнения работ сделает ваш перечень иконок менее сложным.
Стадия планирования также идеальное время для решения того, в каком размере (или размерах) вы будете делать ваши иконки. Принятыми размерами являются 16, 32 и 48 px, но мы видим, что все больше и больше наборов иконок предлагается в масштабируемых форматах, таких как .CSH (формат файлов Photoshop), и в виде форматов шрифтов. Подробнее о форматах вы прочитаете ниже.

На этапе планирования следует задуматься о первом этапе, в ходе которого вы провели соответствующее изучение ситуации. Есть сотни значков и иконок, которые следует учесть с целью комплектации набора, но вы не сможете запомнить их все без некоторых справочных материалов.
Будьте строги с собой на этапе планирования. Не бойтесь сказать нет идее или отбраковать часть списка — ведь он может раздуться чрезвычайно быстро. Создание качественных иконок занимает много времени и создание набора из 5000 штук (например) не только будет длиться вечно, но таким набором будет трудно пользоваться и конечному потребителю.
Например, за те 4 месяца, которые потребовались, чтобы создать Uicons, его автор Кенни Вильямс (Kenny Williams) постоянно отбраковывал часть списка и добавлял в него что-то новое вплоть до релиза набора.

Шаг 4: Дизайн

Итак, у нас уже есть список полный идей для суперских иконок. Теперь мы готовы приступить к работе по дизайну.
Во время этапов 2 и 3 вы определились со стилем иконок. Выбранный вами конкретный стиль повлияет на приложение или метод, который вы будете использовать для создания ваших иконок.
В случае с Uicons создавались масштабируемые иконки (в векторе), чтобы пользователи могли изменить размер без потери качества. Большинство дизайнеров используют Illustrator или другие приложения векторной графики, однако, векторная программа может усложнить вашу жизнь, если вы создаете рисованные пиксельные иконки. Выбирайте правильное приложение для работы.

Когда вы будете вдохновляться чем-то, не стоит увлекаться плагиатом — создавайте нечто собственное.
Иконки состоят из основных форм для того, чтобы сделать что-то узнаваемым. Может быть трудно представить себе все ваши иконки и визуализировать их с нуля. К счастью, у вас есть исследования, которые вы провели на этапе 1, и в вашем распоряжении находится список ориентиров для визуального вдохновения.
Будет хорошей идеей поиграть с альтернативными видами дизайна для иконок. Существует несколько способов для представления, например, магазина, инструментов, да чего угодно. Будьте изобретательны. Сделайте и альтернативный вид. Если бы каждый дизайнер иконок представлял одни и те же идеи одинаковыми способами, то мир пользовательских интерфейсов был бы довольно скучным.
Если вы уже создали что-то, это не означает, что это окончательный вариант. Будьте избирательны в том, что вы в конечном итоге представите общественности. В случае с Uicons, около 10% из иконок в итоге оказались «не у дел».
Стадия дизайна, очевидно, является самым трудоемким этапом всего проекта, поэтому важно быть стойким, выносливым и последовательным.

Шаг 5: Целостность

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

Шаг 6: Формат представления

Возможно, вы выбрали в качестве формата представления вашего набора иконок векторный, такой как .EPS, .AI или .SVG. В таком случае вы вырезаете кусок работы из всего процесса. Вы можете поступить еще умнее и выпустить ваши иконки в виде файла с комплектом шрифтов или в виде .CSH файла. Любой из этих вариантов приведет к тому, что каждый опытный дизайнер просто влюбится в ваш набор иконок. Но следование такому выбору потребует несколько больше усилий, так как вам придется конвертировать иконки из программы Illustrator в другой формат, хотя дополнительная работа дает огромные преимущества.
Так, при дизайне Uicons было затрачено несколько больше работы на данном этапе. Смуысл в том, чтобы создать многослойные векторные иконки, которые были бы идеальны в пикселях. Можно было бы сделать многослойные образы с помощью Illustrator и оставить их в таком виде, чтобы пользователи могли их скопировать и вставить в Photoshop, но по-хорошему нужно создавать идеальные с точки зрения пикселей векторные изображения в растровой программе.

Программа Photoshop просто удивительна, если только речь не идёт о создании иконок. Photoshop позволяет создавать вариации по ширине пикселей — можно указать половину пикселя или даже две трети, если хотите. Сглаживание, как это называется, отлично подходит для шрифтов и кривых Безье, но может помешать, когда речь идет о создании идеальных пиксельных иконок.
При создании набора иконок Uicons потребовалось импортировать независимо друг от друга несколько векторных фигур из программы Illustrator в программу Photoshop. Затем понадобилось выравнивание, изменение их размера и стиля, после чего была выполнена их оптимизация в плане пиксельных размеров путем сведения контуров шаг за шагом, что позволило, в конечном итоге, получить изображения с чистыми краями.

Шаг 7: Распространение

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

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

Заключение

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

via

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 2 Комментариев | Добавить в del.icio.us
теги: иконки

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

В чем уникальность? Начнем с того, что здесь у фрилансера на самом деле честный рейтинг (я сейчас о том, что вы наверняка уже слышали про накрутки и плату за рейтинг в других местах). На PROhq рейтинг не только не покупается, но еще и отражает твою реальную компетентность. Складываются твои качества как профессионала + активность в проектах + отзывы клиентов по различным параметрам + доходность твоего профиля + другие параметры, и, в итоге, мы имеем возможность повыситься в рейтинге. Здесь о том, как доказать, что ты гуру

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

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

При этом важно заполнять свои навыки, чтобы расширить возможности быть найденным заказчиком. Но не сидите и не ждите, что проекты придут к вам сами собой… Впрочем, для ленивых есть автоподборка проектов прямо в личном кабинете
Интересные проекты можно найти и воспользовавшись полем поиска. Работу с клиентом можно вести прямо на сайте, разбить по этапам, получать оплату здесь же за каждый этап и отчитываться по ходу работы.
Помимо этого важно, что на сайте помогают зарегистрировать ИП (индивидуальный предприниматель) и дают возможность затем подключить ИП или ООО для работы с заказчиком по безналу, а это требование все чаще звучит, да и надежнее ориентироваться на белый бизнес.
Подводя итог сегодняшней статьи, можно сказать, что современный бизнес в Интернете строится на абсолютно новых началах. Максимальной простоты и удобства ведения проектов, в любом месте из любой точки мира. И потому так ценна биржа PROhq дающая нам возможность оставаться мобильными и зарабатывать с помощью своего таланта.
В общем, проект интересный, и, безусловно, заслуживает внимания. Посмотрите, попробуйте.
PS: Кстати, у них там еще есть партнёрская программа за привлечение новых пользователей, где можно денег даже заработать)

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 2 Комментариев | Добавить в del.icio.us
теги: PROhq, фриланс

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

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

Убедитесь, что редизайн вам необходим

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

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

Привлекайте ваших посетителей

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

Тестирование веб-сайта

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

Не меняйте макет сайта сразу

Данную стратегию применяет большинство социальных сетей. Всякий раз, когда они меняют внешний вид сайта, они либо позволяют пользоваться старым сайтом в течение определенного периода, либо предлагают перейти на новый сайт и дают вам возможность вернуться к старому стилю. Почему они это делают? Ответ очень прост. Не у всех есть время, необходимое для привыкания к новому дизайну сайта тогда, когда дизайнер этого хочет. Привыкание к новому стилю требует времени и, если пользователь не хочет тратить время сразу, дайте ему эту возможность.
Разрешите пользователям перейти на новый дизайн (и укажите, что это пока еще бета-версия) и дайте им возможность вернуться к старому. Конечно, не оставляйте эту опцию навсегда, в этом вопросе следует брать пример с Facebook: они переводят всех своих пользователей на новый дизайн только после того, как пройдет один или два месяца с момента его релиза.
Возьмём в качестве примера новый дизайн Facebook, который называется «Timeline». Не всем он нравится, возможно, просто от непривычки, и люди продолжают пользоваться старым, более привычным видом. Однако уже совсем скоро все пользователи сети перейдут именно на новый «Timeline»-вид.
Данная стратегия интересна и очень хорошо реализована на социальных сайтах. Поэтому подумайте о ее применении при выполнении редизайна сайта.

Обеспечьте обратную связь даже после завершения редизайна

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

Поясните причины вашего решения

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

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

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

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

Речь идет о ваших ошибках

Если описанная выше ситуация всё-таки произошла, то это ваша ошибка как дизайнера — что либо вы что-то не так сделали в процессе разработки, либо не смогли наладить контакт с пользователями. Ясно, что если они не в восторге от нового дизайна, значит что-то с ним не так и это требует немедленного исправления.
Это идеальный момент для того, чтобы показать, как близки вы к пользователям. Можно использовать Twitter, Facebook, Vkontakte или даже сам сайт, чтобы рассказать людям о работе над ошибками. Позвольте им высказаться, и пусть они скажут вам, что именно сделано не так — и вам будет проще принять решение по внесению изменений.

Используйте их отзывы

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

Возвращайтесь назад при необходимости

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

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

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

Сейчас то самое время, когда нужно начать более тесно общаться с посетителями и спрашивать их о том, что они считают выполненным недостаточно хорошо. Суть в том, что многие посетители предпочтут пользоваться плохой страницей, если дизайнер заинтересован в их мнении, чем пользоваться очень хорошей страницей, дизайнера которой ничего не волнует. Вы должны показать своим пользователям, что заботитесь о них.
Еще одним способом узнавать мнение посетителей является внимательное отслеживание сообщений в социальных сетях. Большинство пользователей для обсуждения таких изменений предпочитают Twitter (ну ещё, возможно, Facebook и Vkontakte), так что стоит приглядеться к этим сайтам. Это еще одна возможность показать вашим пользователям, что редизайн выполнен для их блага.

Итог

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

via
 

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 1 комментарий | Добавить в del.icio.us
теги: редизайн

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

via

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 3 Комментариев | Добавить в del.icio.us
теги: жизненное фото

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

1) Создаём основу нашего объекта, нарисуем обычный круг, используя Ellipse Tool (U). Открываем панель его свойств и заливаем применяем вот такой Gradient Overlay:

2) Создаём новый слой Shit + Ctrl + N и заливаем нейтральным серым. Можно это сделать в меню Edit > Fill, и выбрать там 50% gray.

4) Добавим шума Filter > Noise > Add Noise

5) Теперь время получить основу той самой текстуры. Переходим в Filter > Blur > Radial Blur

7) Чтобы текстура не заползала на фон, нужно применить Clipping mask. Для этого зажмите Alt и наведите стрелкой мыши между иконок слоёв в панели Layers.

8) Теперь наложим текстуру на основу. Для этого скопируем слой Ellipse (Ctrl + J) и конвертируем его в смарт-объект (левый клик по иконке слоя в панели Layers — Convert to smart object). Слой Ellipse скрываем, он может потом понадобиться, если будет нужно, например, изменить размер детали.

Нашему серому слою с текстурой зададим стиль наложения Color Burn, 60% Opacity.

Получаем вот такой результат

Где это можно применить?

© Найко Михаил для PRO веб-дизайн, 2012. | Ссылка | 3 Комментариев | Добавить в del.icio.us
теги: металлический эффект, текстуры