Что такое хорошая статья по веб-дизайну?

[web-design]

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

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

Еще один очень важный момент заключается в том, что некоторые статьи пишут люди, которые мало или абсолютно не разбираются в данной области. У них нет ни опыта, ни желания его приобрести. Если статья о дизайне логотипов, то автор должен был САМ сделать хоть один. Если статья о разработке веб-сайта, то автор должен был сделать хоть один приличный сайт, в крайнем случае должен был принимать непосредственное участие при его разработке. Иначе невозможно понять суть проблемы (вопроса, мысли, идеи) излагаемой в статье. Причем одно дело, когда ты делаешь для себя, а другое — на продажу. Как вы думаете, у кого будет ценней совет: у того, кто создал СЕБЕ какой-то сайт и дизайн логотипа для него же, или у того, кто этим занимается профессионально и создал достаточное количество сайтов, баннеров и логотипов для заказчика извне? Конечно же, второй вариант предпочтительнее, так как опыт здесь играет первостепенную роль. Ведь когда слесарь учит как разработать дизайн логотипа очень неловко себя чувствуешь...

Итак, чтобы написать хорошую статью по веб-дизайну необходимо:

- писать только о том, в чем ОЧЕНЬ хорошо разбираешься;
- не писать слишком длинные статьи — это утомляет и не факт, что читатель ее дочитает до конца;
- как можно чаще делитесь своим реальным опытом в статьях;
- пишите понятно и свободно, не употребляйте лишних слов и «тяжелых оборотов» речи;
- если статья все-таки получилась большая, то в ее начале необходимо указать содержание в виде подразделов с ссылками на каждый;
- в конце статьи обязательно подведите итог, можно даже в виде упорядоченного списка или таблицы.
Если нет возможности (или необходимости) писать полноценную статью, напишите заметку, то есть министатью с четким изложением сути. Порой краткие заметки, полученные из повседневного опыта, значительно ценнее и полезней, чем большая статья, написанная за несколько недель.


Автор: Сергей Т. (www.duxlab.com)
Опубликовано: 20.05.2005

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

---

Стильная шапка для сайта

[web-design]

Creating A Cool 3D Web Design Effect



Шаг 1.
Создайте документ размерами 1000x750. Двойной клик на слой, Color Overlay > Ставим темно-коричневый цвет.


Шаг 2.
Включите линейки (View>Rulers). на своем документе и добавьте линии как показано ниже.
Поставьте 2 горизонтальные линии, первая на 30px от верха, вторая на 250px от верха. И две вертикальные, первая на 100px слева направо, вторая на 900px слева направо.


Шаг 3.
Создайте прямоугольник с помощью , пользуйтесь линиями для ориентира. Переименуйте слой в “header”.


Шаг 4.
Поставьте черный цвет как основной. Возьмите и создайте форму похожую на форму на скрине, чтобы сделать тень. Сделайте её немного больше чем прямоугольник, смотрим рисунок. Переименуйте слой в “shadow” и поставьте его под слой “header”.
После всего этого, сконвертируйте форму в Smart Filters и примените на нее Gaussian Blur. Непрозрачность 60%.


Шаг 5.
Откройте стили слоя “header”. Нажмите на вкладку Gradient Overlay. Измените стиль градиента на radial. А для цвета я использовал темно-красные тона.


Шаг 6.
Возьмите и используя более светлый цвет, чем в градиенте, создайте линию. После этого создайте ещё одну линию над ней, только черного цвета. Выделите 2 линии на панели слоев и сгруппируйтесь их. Переименуйте группу в "vDivider".
Идем Layer>Layer Mask>Reveal All. Используя , черно белый, на панели сверху стиль ставим на Radial и применяем маску на группу. Градиент ложим с уклоном от центра группы.


Шаг 7.
Создаем меню с помощью . Цвет белый. Все надписи группируем и называем группу “White Links”.
Создайте дубликат этой группы и переместите его под оригинальную группу. Измените цвет дубликата на черный (весь текст должен быть черным) и переместите группу на 1 пиксель в верх и влево. Это придаст красивый 3д эффект тексту.


Шаг 8.
Повторите Шаг 6, только создайте вертикальные разделители для надписей на меню. Используя , сначала нарисуйте темно-красную линию, потом справа от нее, черную. Сгруппируйте их и сделайте дубликат группы столько раз, сколько вам нужно для меню. У меня в меню 4 слова, я сделал 4 дубликата + оригинал. Разместите ваши линии на одинаковом расстоянии друг от друга, смотрим скрин:


Шаг 9.
Выделите все группы с линиями и сгруппируйте их в 1 группу, назовите её “hDividers”. После этого примените маску на эту группу, Layer>Layer Mask>Reveal All. И сделайте маску как на скрине:



Шаг 10.
Откройте файл с узором, который дан ниже. Edit>Define Pattern. Назовите его "webPattern". Создайте дубликат слоя “header” и переименуйте его в “pattern”. Откройте стили слоя, и уберите галочку с Gradient Overlay, поставьте на Pattern Overlay. Выберите "webPattern" и поставьте режим наложения на Overlay.
После этого примените маску на него с радиальным градиентом.

Шаг 11.
Теперь остается добавить нужный вам логотип.
Пишем текст, я написал PSDTUTS, и сделал PSD жирным шрифтом, а TUTS тонким.
Далее пройдите в стили слоя и измените параметры Drop Shadow, Gradient Overlay, and Stroke. После этого у вас будет прекрасный текстовый эффект.


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


Автор: Fabio
Перевод: Glebash

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

---

Пирогов Василий. Урок 1: Обработка некачественных фотографий

[web-design]

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


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


Шаг 1
Будем рассматривать только один, сильно увеличенный фрагмент изображения (для большей наглядности). Как видно на картинке, дом весь размытый. Мало чёткости. Много грязи и неоднородных фонов на картинке. Надо приводить фотографию в человеческий вид.


Шаг 2
Вначале разберёмся с колоннами. Как мы видим, колонны не гладкие, у них есть рельеф (симметричные выступы). Надо их выделить и сделать более чёткими. Нарисуем белые прямоугольники и добавим в углах тень (так как колонна сама круглая).


Шаг 3
Далее, следует добавить чёткости в изображение. Чёткость достигается контрастными линиями и меньшим количеством градиентов (особенно маленьких).

Шаг 4
Для этого попробуем максимально убавить количество градиентов у нас на фотографии.В начале доработаем колонны.


Шаг 5
Теперь покажем, как можно с помощью контрастных линий поднять чёткость отрезка крыши.


Шаг 6
Теперь добавим контрастных чётких линий во все другие области нашего фрагмента.


Шаг 7
Мы разобрались, фактически с гранями плоскостей обьекта. Теперь разберёмся с самими плоскостями. Обратим внимание, что они грязные и неоднородные. Убрать это можно заливкой однородным цветом. Если же всё-таки требуется сохранить какую-то текстуру, то можно регулировать прозрачность нашего нового монотонного слоя.

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


Примечание: Все эти работы желательно проводить на сильно увеличенном изображении. Иначе можно сломать глаза.

Обработанная картинка:


С официального сайта Василий Пирогова: www.pirogovv.ru/lessons/1.html

@темы: Известные люди, Уроки

---

Примеры: интересные работы

[web-design]

Дизайны от Anastasiya Ju

Примеры работ веб-дизайнера Anastasiya Ju [nid] (яркие дизайны)


Эти и другие работы Ju для вашего вдохновения на www.free-lance.ru/users/nid

@темы: Портфолио

---

Пиктография. Увидел. Узнал. Сообразил.

[web-design]

Увидел потому, что она привлекла внимание. Узнал то, что изображено на ней. Сообразил, что же именно она хочет тебе сообщить.

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

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

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

Термином пиктография обозначается такое письмо, знаки которого (пиктограммы) представляют собой схематические рисунки, наглядно изображающие предметы и явления действительности. Последовательности таких знаков передавали сообщения о тех вещах и явлениях, которые изображались знаками. Однако, вследствие нескольких, присущих пиктографии особенностей она со временем утратила своё значение.

Что такое пиктографическое кодирование?
"Типологически примитивнейшая форма графики - пиктография (рисуночное письмо) - засвидетельствована у ряда народов первобытной культуры в Северной Азии, Западной Африке и в особенности Северной Америке и, как ясно по сохранившимся образным надписям на скалах и в пещерах, существовала у доисторического человека. Она представляет собой сочетания рисунков, передающие сочетания известных простейших смыслов вне их звучания. Отсутствие условного и традиционного момента в пиктографии делает ее знаки доступными пониманию при незнании того язык, на котором говорит автор пиктографии, т. е. при отсутствии единства языковой культуры у "пишущего" и "читающего" пиктограмму. Недаром и современные культурные народы обращают используемые ими пережиточно пиктограммы (рисунки на вывесках и т. п.) к неграмотному, т. е. к члену общества, оставшемуся вне круга соответствующей письменной культуры".
Литературная энциклопедия - М., 1929-1939

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

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

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

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

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


Источник: www.ndn.su/text/text_pict.htm

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

---

Стильный зелёный сайт

[web-design]

Stylish Layout



Создаем новый документ 760 на 700 пикселей с фоном #012c3e.
Filter > Render > Lightning Effects с такими настройками:


Выбираем инструмент Rounded Rectangle и создаем маленькую фигуру.

Для этой фигуры добавляем такие стили слоя:






Результат


Скачиваем с сайта www.free-photoshop.com комплект фигур Custom Shape #1 – Banners. Загружаем этот комплект в фотошоп и добавляем такую фигуру:


Добавляем к этой фигуре такие стили слоя:







Результат


Берем инструмент Rectangle и рисуем прямоугольник:


Выбираем Edit > Transform > Warp с такими настройками:

Результат

Добавляем стили слоя:







Результат( этот слой под слоем со скачанной фигурой)


Добавляем текст:


Выбираем инструмент Type и нажимаем кнопку Create Warped Text


с настройками


После искажения текста результат


Создаем новую фигуру с инструментом Rounded Rectangle(цвет - #012c3e)


Загружаем комплект кистей Brush #6 –Flowers с сайта www.free-photoshop.com/
Создаем новый слой. Нажимаем на логотип один раз.


Добавляем стиль слоя:


Результат


Дублируем этот слой.(Ctrl+J)/. Выбираем оба слоя и склеиваем их(CTRL+E)


Загружаем выделенеие Select > Load selection

Используя кисти и разныме цвета добавляем мелких деталей на наши дубюовые ветви.

В итоге получаем следующее



Автор: Talk-mania.com
Перевод: Elensvs

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

---

Новости: Microsoft выпустила автоматический составитель коллажей

[web-design]

Корпорация Microsoft выпустила автоматический составитель фотоколлажей AutoCollage 2008, разработанный ее подразделением Microsoft Research. Программа создает из нескольких фотографий одну большую с незаметными переходами друг в друга.
Настройки AutoCollage 2008 сведены к минимуму: пользователь может лишь указать размер коллажа, число фотографий на листе и ориентацию листа. Получившийся коллаж предлагается отправить по e-mail знакомым или сделать из него фотографию одного из стандартных размеров.

Microsoft намерена продавать составитель фотоколлажей за 19,99 долларов в США и за 19,9 фунтов стерлингов в Великобритании. Таким образом, британская версия почти в два раза дороже. Бесплатно можно скачать тестовую тридцатидневную версию.

В конце августа Microsoft выпустила другой, бесплатный продукт для работы с фотографиями, разработанный той же Microsoft Research. Веб-сервис PhotoSynth позволяет загружать на сервера Microsoft фотографии и создавать из них трехмерные пространства.

Источник: lenta.ru/news/2008/09/04/autocollage/

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

---

Иконки и пиктограммы в web

[web-design]

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

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

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

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

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

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

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

---

Если дизайн у вас заказал дизайнер...

[web-design]

Если дизайн у вас заказал дизайнер, архитектор или специалист другой творческой профессии.

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

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

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


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

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

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

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

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

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

А вебер у вебера ни разу не видел, чтоб что-то заказывал. Это противоестественно


3. Отказаться от этой безумной идеи сделать сайт
Без комментариев.

Клюев М.
Источник: www.ndn.su

@темы: Web-дизайн, Статьи

---

Создаем серию иконок для сайта, веб-дизайн

[web-design]

Здраствуйте! Наверное все видели на сайтах возле разделов картинки, обозначающие данную тематику? Так вот, решил я написать урок о создании серии иконок в одном стиле.

Шаг 1.
Создадим документ размером 100х500 пикселей, 72 точки. Ширину я брал из расчета 5 иконок по 100 пикселей = 500.
"Разметим область". Создаем направляющие через каждые 100 точек. Для удобства я еще добавил линейки на месте самой крайней иконки.


Шаг 2.
Приступим к рисованию.
Выбираем инструмент "Custom Shape Tool"(U). В качестве форм я выбрал стандартные фотошоповские формы Web.


Рисуем "конвертик", режим - "Paths".


Новый слой (Ctrl+Shift+N). Сбрасываем цвета (D). Выбираем кисть диаметром 2-4px.
Далее инструмент "Pen Tool"(P) - Stroke Path - Brush (ставим галочку Simulate Pressure).
Да, важно, чтобы у кисти стояли такие параметры, иначе эффекта Simulate Pressure не выйдет


Результат:


Новый слой. "Pen Tool"(P) - Fill Path - Background Color(белый). Метод смешивания - Overlay. Сливаем слои (Ctrl+E).


Далее выбираем Polygonal Lasso Tool.
Ctrl+клик на слое с конвертом, и вместе с зажатой Shift рисуем вот такое выделение, то есть делаем фон конверта.
Вот пример:


Создаем новый слой. заливаем его белым цветом. И помещаем за слой с конвертом.
Настройки слоя: Gradient Overlay 7dbe0a(0%) - a1d54f(50%) - 80c218(50%) - a2d93f(100%)


Сливаем слои. Free Transform - Distort (Кстати лучше оставлять скрытую копию слоев)


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

Вот результат с 5-ю иконками.


П.С. Чтобы разрезать общую картинку, собственно на иконки, ограничте каждую иконку направляющими через каждые 100 пикселей, как в шаге 1, а потом выберите инструмент Slice, -> Get slices from guides и сохраните в формате, который Вам нужен.

Автор: xard
Источник: demiart.ru/

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

---

Творческий ступор, что делать? (Творческий кризис)

[web-design]

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

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

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

Это состояние может возникнуть, когда не проходят подряд несколько проектов или несколько вариантов проекта. Или неприлично часто меняется ТЗ. И вас все задолбало.

Это случается, когда вам надоели все ваши прошлые идеи, а новых вы пока не придумали.

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

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

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

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

А если идеи нужны вот сейчас и сразу?

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

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

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

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

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

Можно пойти домой, лечь спать, а вечером проснуться и работать в ночь.

А можно просто пойти и поработать дома.


Клюев М. www.rosdesign.com

@темы: Интересно, Из жизни дизайнеров, Статьи

---

Modern Clean Style Layout

[web-design]

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


Создаём новый документ 760x770 px с серым фоном(#464646). Создаём новый слой(SHIFT+CTR+ALT+N). Выбираем инструмент Rounded Rectangle и рисуем белый прямоугольник(радиус 10 px). Следующая картинка уменьшена.



Добавляем стиль слоя:

С тем же инструментом создаём другой прямоугольник.Я буду использовать светло-серый цвет(чтобы вам было видно)

Добавляем стили слоя:




Результат

Теперь создаём еще три прямоугольника и помещаем их как на рисунке.

Как вы видите, использованы предыдущие стили слоя. Зажмите CTRL и нажмите на иконку слоя, помеченного стрелкой:

Так вы выделили прямоугольник.

Выбираем инструмент Rectangular Marquee. Нажимаем на Subtract From Selection и удаляем нижнюю часть выделения.

Когда вы отпустите кнопку мыши вы увидите такое выделение:

Уменьшаем выделенную область - Select > Modify > Contract и выбираем Contract by 2 pixels
Создаем новый слой(CTRL+SHIFT+ALT+N). Заливаем выделение белым цветом с инструментом Paint bucket. Жмем CTRL+D чтобы снять выделение.


Добавляем стиль слоя:





Результат


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

Создаём заготовку заливки.
Создаём новый документ 3 на 3 пикселя.Увеличиваем масштаб до 1600%. Рисуем точку размером в 1 пиксель в центре документа.


Сохраняем шаблон заливки Edit > Define Pattern
Возвращаемся в исходный документ. Создаём новый слой(CTRL+SHIFT+ALT+N). Выбираем инструмент Rectangular Marquee с этими настройками:

И создаём маленькое выделение:



Выбираем инструмент Paint Bucket(выбираем нашу заготовку шаблона заливки) и щелкаем внутри выделения. Жмем CTRL+D чтобы снять выделение.



Дублируем слой несколько раз.



Создаём новый слой(CTRL+SHIFT+ALT+N). С помощью инструмента Rectangular Marquee делаем вертикальное выделение:


Заливаем его точечной заливкой. Жмем CTRL+D чтобы снять выделение.


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



Добавляем круги:

и стили слоя


Отдублируем кружочки:


Вы можете добавить еще кружков и поместить их по вашему желанию.



Добавляем еще прямоугольник:


Меняем настройку Fill на 0%.

Добавляем стиль слоя

Результат:


Дублируем эту фигуру и применяем стили слоя:



Добавляем свое фото:


Теперь добавляем текст и все готово:


Оригинал Talk-mania.com
перевод: Elensvs
источник: demiart.ru

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

---

Якоб Нильсен

[web-design]

Якоб Нильсен (Jakob Nielsen) - основатель и руководитель компании "Nielsen Norman Group", которую он создал вместе с Дональдом Норманом, бывшим вице-президентом "Apple Computer". До 1998 года Якоб Нильсен работал ведущим инженером в "Sun Microsystems", был специалистом по web-usability.

Нильсен имеет 31 патент, причем большая часть его изобретений направлена на облегчение работы пользователей Интернета. Он - автор девяти книг по пользовательским интерфейсам, web-дизайну, структуре сайтов и прочим аспектам web-usability. Кроме того, Якоб Нильсен ведет колонку "Users First!" на "Ziff-Davis Network", рубрики "Alertbox" на сайте www.useit.com и "Deconstructing" в журнале "Internet World", выступает он также и как консультант.

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

В 2000 году российское издательство Символ-Плюс издало перевод книги Я.Нильсена "Designing Web-Usability" под весьма противоречивым названием "Веб-дизайн. Книга Якоба Нильсена". Несмотря на то, что книга очень сильно устарела, она до сих пор может служить хорошим учебником по основам юзабилити.

Применение теории юзабилити на практике Я.Нильсен демонстрирует в своей второй книге "Homepage Usability: 50 Websites Deconstructed", в которой дается анализ 50 главных страниц сайтов ведущих компаний и организаций с точки зрения удобства пользования ими. Эта книга также была переведена и издана в 2002 году издательством Вильямс под названием "Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов".

Информационные технологии развиваются очень быстро. Книги, изданные два-три года назад, устаревают и теряют свою актуальность, но Якоб Нильсен постоянно публикует новые статьи, заметки и результаты новых исследований на своем сайте в рубрике "Alertbox". Проект Webmascon по мере сил переводит самые лучшие статьи Нильсена, которые могут быть интересны русскоязычным читателям.

Источник: www.webmascon.com/personas/nielsen.asp

@темы: Известные люди, Статьи

---

Как удержать пользователя на сайте?

[web-design]

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

1. Контент сайта, его наполнение

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

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

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

2. Удобство навигациии и поиска

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

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

3. Дизайн сайта, графика и читабельность

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

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

4. "Читайте также..."

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

5. Периодичность размещения материалов

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

6. Рассылки и RSS

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


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

Источник: www.goldenone.ru/?go=post&id=106

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

---

Стеклянная кнопка

[web-design]

Шаг 1. Создайте новый документ с белым фоном размером 200х100 рх. Создайте новый слой и выберите его. Используя Rounded Rectangle Tool выделите эллипс по середине. Он должен быть чёрного цвета. После этого в палитре слоёв устанавливаем Fill – 0%

Шаг 2. Овал должен исчезнуть. Layer > Layer Style > Drop Shadow и отмечаем параметры как на скриншоте. Вы можете поменять параметры как хотите, но НЕ ЗАКРЫВАЙТЕ ОКНО LAYER STYLE до конца 6 – го шага.

Шаг 3. Переходим на вкладку Inner glow и устанавливаем следующие параметры.

Шаг 4. Дальше случается волшебство. Перейдите во вкладку Bevel & Emboss. Вот нужные параметры.

Шаг 5. Теперь перейдём во вкладку Contour. Применяем следующие параметры.

Шаг 6. Для заключительного шага перейдите во вкладку Satin. Вводим параметры с картинки.

Вот и всё!!! Поменяйте фон и вы будете смотреть через кнопку как через стекло.

Примечание: желательно размыть кнопку немного по Гаусу (Filter – Blur – Gaussian Blur).

Вариант переводчика:


Источник и автор: www.biorust.com/tutorials/detail/30/en/
Источник : 4des.ru

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

---

Дизайн сайта архитектурной компании (просто)

[web-design]

Для начала создаем новый документ размером 760x700 с белым фоном. Затем берем инструмент Rounded Rectangle Tool ( ставим радиус = 5 ) и рисуем прямоугольник как на картинке ниже. Используем цвет #dfefff.

Затем идем в Blending Options и Drop Shadow:

Берем Line Tool (ставим weight = 1 pixel ), и на новом слое рисуем серую линию:


Добавим маску слоя:

Берем инструмент Gradient Tool , удерживаем клавишу SHIFT и делаем линию такой, как на картинке ниже:

Дублируем слой с линией и добавляем следующий стиль слоя:

Затем меняем настройки Fill на 0 %.

Берем инструмент Rectangle Tool. Меняем цвет фона на белый и создаем прямоугольник, который помещаем над линиями:

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

Вы можете купить такие картинки или найти в коллекциях бесплатных изображений.
Теперь добавим несколько деталей. Я думаю было бы неплохо добавить план дома (мы ведь создаем дизайн сайта архитектурной компании ):


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

Теперь нарисуем несколько линий около кнопок:

Добавим текст на нашу страничку:

Затем возьмем мелкий шрифт и при помощи Type Tool напечатаем ряд минусов" ------- ":

Добавим лого на header:

Поменяем угол текста.
И вот мой результат:


Надеюсь, вам понравилось!
И помните, что это не прямое руководство к действию, а идея, которая вдохновит вас на создание своего дизайна.

Перевод: Nadik
Автор/Источник: www.talk-mania.com/web-layouts/10345-architectu...
Источник : 4des.ru

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

---

Карбоновое волокно

[web-design]

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

В этом уроке я хотел бы рассказать о том, как создать углеродную волоконную текстуру.
1. Создаем документ с размером 4 : 4 с прозрачным фоном.

2. Приблизте изображение, нажав Ctrl и несколько раз на (+).

Выберите Pencil tool (Карандаш), Поставив настройки как на скриншоте.

3. Выберите черный цвет (#000000) и нарисуйте две точки в верхнем правом углу.

4. Потом выбираем цвет #B7B7B7 и тоже рисуем две точки в верхнем левом углу.

5. Затем выбираем цвет #2E2E2E и рисуем следующие точки:

А дальше продолжаем по той же системе:

6. Теперь заходим в Edit -> Define Pattern (Правка -> Выбрать палитру).

Называем палитру “Carbon Fiber”

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



Эта текстура хорошо смотрится с Techno интерфейсом.


Источник: www.photoshoptower.com/
Автор: вебмастер Photoshoptower.
Перевод: Nerv

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

---

§ 150. От обратного

[web-design]

Артемий Лебедев
§ 150. От обратного
8 июля 2008


01
Один из самых эффективных дизайнерских приемов — придумывание неудобных, непонятных и запутанных решений.

02
Например, нам нужно сделать идеальный вход в магазин. С чего начать? Во-первых, дверь не должна быть видна, лучше всего, если она вообще сольется со стеной. Во-вторых, в нее должно быть сложно попасть. Это достигается сразу несколькими путями. Очевидно, что дверной проем надо разместить на высоте третьего этажа, а перед зданием установить шест для карабканья. Для тех, кто добрался, предусмотреть отсутствие ручки. Желательно сделать дверь очень тугой, чтобы она плохо открывалась. Еще лучше воспользоваться малоизвестной конструкцией: например, сделать ее съезжающей вертикально вниз.

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

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

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

Источник: www.artlebedev.ru/kovodstvo/sections/

@темы: Интересно, Известные люди, Web-дизайн, Статьи

---

Дизайн сайта с кляксами (Web Design Layout Tutorial)

[web-design]

Создайте новый документ 800х800 px с чёрным фоном, теперь создайте прямоугольник (любым самым удобным для вас способом) с цветом #01afee. Затем нажмите ctrl+t и поверните прямоугольник так как вам нравится

Теперь нам понадобятся “splatter brushes” пишем в поисковике по этому запросу кисти (результаты поиска на DeviantART ), скачиваем и распаковываем. Сделаем несколько «клякс» синей и чёрной кистью

Теперь вставляем, или пишем (type tool) логотип для сайта.

Если вы использовали 2 цвета как я то выберите один из них и опять добавьте клякс, если один цвет, к примеру, белый то былым и делайте.

Выберите Type Tool опять, и добавьте меню навигации, используйте свободное трансформирование (CTRL + T) для поворота текста.

Теперь мы добавим 3 основных раздела, которые будут "news & updates", “tutorials", "Partners" и "latest projects", на левой стороне каждого раздела будет значок, эту будут шэйпы заранее приготовленные компанией Adobe . Чтобы открыть больше шэйпов нажмите на стрелку в верхнее правом углу и выберите «All».

Теперь добавляем информацию в каждый раздел.




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

Здесь я должен добавить свои контакты или как со мной связаться (можете добавить что-нибудь другое).

Теперь последнее, но не менее важное, нам нужно добавить маленькие кляксы по всему меню, примерно так:.

Когда вы закончите вы должны иметь, что-то примерно такое


Автор: totalTutorials
Перевод: SmileBoy
Источник: demiart.ru

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

---

5 самых распространённых ошибок при проектировании сайта

[web-design]

Когда вы проектируете собственный веб сайт, в голову приходит безумное кол-во идей, которые иногда выливаются в ужасные ошибки. Это особенно неприятно, когда ваш сайт является отражением вашего бизнеса. Ниже приведены 5 самых распространённых ошибок, которые нужно избежать любой ценой…

1. Слишком много графики.

Если у вас слишком много графики(особенно крупной) , может возникнуть проблема с загрузкой странички, она будет проходить чересчур медленно. Посетители будут раздражаться, часто кликая на сайт, но всё бесполезно…и вряд ли вернутся.

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

2. Счётчики.

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

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

3.Баннеры.

Заполнить любое свободное место на сайте баннерами! ЗАЧЕМ? Мало того, что объёмные баннеры мешают быстрой загрузке сайта, так ещё для многих посетителей «баннер»-это «объявление» другими словами. Они безусловно нужны, но не в огромном количестве.

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

4. Разбросанный сайт.

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

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

5. Обобщение.

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

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

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

Источник: designjunkie.ru/

@темы: Web-дизайн, Статьи