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

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

Взгляните на этот пример изображения …

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

Теперь давайте посмотрим на следующие 2 примера, где детали действительно не имеют принципиального значения:

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

1. Черная птица в левом верхнем углу смотрит в противоположном направлении
2. Шляпы сомбреро на двух картинках отличаются
3. На второй картинке трость у старика повернута и немного темнее
4. Во втором изображении, тротуар в правом нижнем углу немного крупнее
5. Женщина смотрит в противоположном направлении

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

Эти 2 версии Volkswagen Beetle, 1937 и 1973 года, и, несмотря на несколько серьезных изменений в дизайне деталей, за все это время дизайне в целом не претерпел серьезных изменений. Это объясняется тем, как работает наш мозг, мы видим целые картины и определяем весь вид гораздо быстрее и проще, чем рассматривая изменения в деталях.

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

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

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

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

Применение принципа Гештальта в рабочем процессе веб-дизайна

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

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

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

Теперь давайте посмотрим на примеры макетов и их структуру:

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

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

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

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

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

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

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

Оригинал статьи: The Gestalt Principle: Design Theory for Web Designers

Гулял по интернету и наткнулся на сайт с советами, как готовиться к свадьбе http://www.nevesta.info/. Те, кто решил окольцевать себя, велкам планировать как это сделать.

Если вы занимаетесь веб-дизайном то вам наверняка приходилось сталкиваться с таким этапом, как отправка PSD дизайн макета на верстку. Кто-то верстает сам, а кто-то заказывает верстку отдельно. В любом случае PSD макет нужно подготовить к верстке. Какие нюансы нужно учесть и обозначить на макете? Привожу пару примеров на одном из своих последних заказов, а именно дизайне сайта для компании Ленд Строй Паркет.

1. Подготовка шрифтов.

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

Что касается самого PSD макета, то в нем следует указать, как будут выглядеть заголовки <h1> <h2> …. <h6>. А также другие виды форматирования текста: маркированный список, цвет текстовой гиперссылки, цвет активной(при наведении курсора на гиперссылку) и цвет гиперссылки по которой уже перешли, оформление цитаты и другие основные элементы форматирования текста. Без указания этой информации, верстальщику додумывать цвет ссылок и прочее придется за вас, хотя это и не его работа в противном случае и вовсе оставит цвета ссылок и форматирование текста по умолчанию и тогда уже готовая работа обретет совершенно другой вид.

[SinglePic not found]

В моем случае использовался стандартный шрифт Times New Roman и необходимости вложения шрифтов у меня нет.

2. Указание отступов и общая разметка сайта.

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

[SinglePic not found]

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

3. Группировка и подготовка слоев.

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

[SinglePic not found]

4. Нарезка изображений.

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

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

На заметку: Присоединяйся к новому сообществу дизайнеров и фотошоперов. Велкам =)

Сегодня мне довелось побывать в музее печати при МГУП (Московский Государственный Университет Печати). Решил поделиться с вами небольшим фотоотчетом и рассказать немного истории печати и типографии. Читаем, будет интересно.

Первым экспонатом у нас будет «Ручной литографический печатный станок. Фирма Krause 19 век.» До сегодняшнего дня я даже и не думал, что в 19 веке кто-то занимался типографией и при этом в промышленных масштабах.

Что такое литографическая печать?

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

Вот еще пара работ напечатанных литографическим способом печати.

А теперь я расскажу, как печатали буквы, ведь раньше не было принтеров, как сейчас, а газеты и даже журналы все равно печатали. Как? Все очень просто. Раньше текст набирали специальными буквами «Литера». По сути это такая маленькая прямоугольная железка, на торце которой вырезана буква.

Буковки побольше

Вот примерно так это раньше выглядело. Бумажка в замен раскладке клавиатуры, и ящечки в место клавиш Опытный наборщик мог набирать по 1600 букв в час. Учитывая, что нужно буквы набирать построчно и в обратном порядке т.е. все слова выкладывать начиная с последней буквы. Соображать нужно было быстро. Представьте скорость набора. Я к примеру сейчас печатаю около 420 символов в минуту – примерно 6 букв в секунду – 25200 символов в час ) Получается, что сейчас один человек может заменить примерно 15 наборщиков. Набранные наборщиками строки, совмещали примерно вот на такой печатной форме, далее буквы сначала прокатывались валиком с краской, а следом прикладывался бумажный лист на котором буквы оставляли свой отпечаток и получался в итоге печатный лист.

Печаталось сие изобретение вот на таких станках.

Все это еще конец 19, начало 20 века.

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

Извиняюсь за качество фото. Работа эта штуковина примерно так. Сверху стоит емкость с краской для печати, кисточкой намазывали железный круг, ставили напротив букв лист и тянули рычаг =) Нижние валики прокатывались по краске и по литерам, а литеры прижимались к листу и оставляли отпечаток. Это вы сейчас нажали кнопку и наслаждаетесь результатом который выдал принтер ) Подобные станки использовали в подпольной типографии и для печати листовок. Вот и представьте на хотя бы 300 листок – нужно 300 раз потянуть за рычаг – вполне себе тренажер.

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

Процесс печати цветного фото. От фотоэлемента до цветной фотографии. Вот и есть та самая CMYK палитра

Теперь вкратце о печатных машинках Эволюция печатных машинок.

Сначала были такие

Потом были такие

И даже такие о_О шайтан машины

Вот еще приглянулись пара постеров времен СССР

[Gallery not found]

Уникальная возможность увидеть сборник номеров газеты «Правда». Это 1912 – 1914 год.

Фактически эта газета была органом Центрального Комитета партии Ленина, Российской социал-демократической рабочей партии.

И еще мне приглянулся один экспонат в этом музее. Представляю вам… Мечту дизайнера!

Он даже цветной =)

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

На правах рекламы:

• Запчасти и  тяговые аккумуляторы для болгарских погрузчиков.
• Качественная и грамотная Раскрутка сайта в Киеве доступные цены. Так же вы полезно будет посмотреть информацию о том как разместить контекстную рекламу – Хороший доход для вашего сайта и инструмент для его продвижения.

]]> http://strokoff.ru/2010/09/23/muzej-pechaty/feed/ 7 http://strokoff.ru/2010/09/19/who-is-designer/ http://strokoff.ru/2010/09/19/who-is-designer/#comments Sat, 18 Sep 2010 22:46:35 +0000 Strokoff http://romanesque.ru/?p=285 Читать далее →]]>

Начальный вопрос для написания поста «А кто такой дизайнер?». Я прочитал достаточно информации по этому поводу и по своему опыту у меня есть, что ответить на этот вопрос.

Для начала обратимся к вики:

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

Источник: Дизайн — Википедия

Чем занимается дизайнер?

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

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

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

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

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

Чем обладает современный дизайнер?

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

Чувством вкуса. Умение сочетать и создавать из частей одно целое по истине определяют самого дизайнера. Умение преподнести красиво и со вкусом. Именно дизайнер придает «индивидуальности» проекту.

Современный дизайнер обладает знанием в работе с целым рядом программ. Нужно уметь работать с растровой, векторной графикой + умение обрабатывать фотографии тоже очень помогает. А это уже как минимум, знание Adobe Photoshop и Adobe IllustratorCorel Draw. Для печатной продукции очень полезно изучить Adobe Indesign или QuarkXPress. Для создания flash анимации – Flash MX.  Вообщем путей для саморазвития дизайнера очень много. Остается пробовать себя, искать что-то новое и выбирать, что тебе больше по душе.

На правах рекламы:

• Незабываемые путешествия и отдых в Индонезии доступные цены и горячие скидки!
• Увлекательные и развивающие детские игрушки. Большой выбор.
• Хотите бросить курить? заменители сигарет> – высокотехнологичных способ борьбы с курением.

Минимализм в веб-дизайне.

Минимализм – понятие, употребляемое в различных контекстах. Будь то стиль  жизни или форма искусства, говоря о чем-либо  «минималистский»,  можно подразумевать большое количество значений.

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

Так что же представляет собой минимализм в веб-дизайне, и не менее важный вопрос – чем он не является?

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

Мышление в стиле минимализма.

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

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

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

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

Искусство удаления.

Французскому автору Антуану де Сен-Эксюпери  принадлежит фраза: “Совершенство достигнуто не тогда, когда нечего добавить, а тогда, когда нечего убрать”.

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

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

Правильный цвет.

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

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

Более уникальные цветные варианты могут быть столь же эффективны, как и черно-белая гамма. Дело не в выбранном цвете, а в его правильном использовании.

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

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

Типографика.

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

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

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

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

Структура.

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

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

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

Свободное пространство.

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

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

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

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

Найдите баланс.

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

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

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

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

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

Что оставить для себя?

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

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

Автор статьи: Jason Gross

Оригинал статьи: Minimalism in Web Design: A Guide

З – Добрый день, я бы хотел заказать у вас /* количество визиток*/ и сделать дизайн визиток.

И – Да, кончено. Это будет стоить вам /*много денег*/ и 500 р. за дизайн визитки.

З – Что нужно для дизайна визитки?

И – Просто скажите, что вы хотели бы написать.

З – … готово.

И – Все, через пару дней будет готово, мы с вами свяжемся.

*Заказчик уходит довольный*

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

Каким должен быть макет визитки за 500 р. ?

Я бы ответил – как минимум в векторном формате, CMYK палитре и запасом рисунка на 1-2 миллиметра для погрешности при резке визиток. Это минимум.

Как это происходит в большинстве случаев ?

Открывается фотошоп. Создается новый документ (не всегда даже ставят разрешение на 300dpi –  72pdi вполне достаточно). Выбирают цвет фона. Качают какой-нибудь симпатичный шрифт и выбирают ему цвет. Двигают в нужное место надпись и отправляют на печать.

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

А если хочется красиво?

Тогда следует уже стать более дотошным и придирчивым, но и начать понимать, что за 500р. нормального ничего не выйдет. На фрилансе за 1000-1500р можно получить вполне себе достойный дизайн для визитки + вы можете оценить уровень работ различных фрилансеров и выбрать наиболее понравившегося вам. Порой если чуть вникнуть и чуть разобраться в любой теме, оказывается, что выбор гораздо больше и приличней. Жалко многие люди просто не задумываются над этим.

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

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

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

Я привел только один пример работы, представить такие примеров можно тысячи.

Почему дизайн стал дешевле?

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

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

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

Четвертая причина. Доступность. Сейчас каждый пользователь в интернете имеет доступ к куче шаблонов для сайтоввизитокбаннеров и прочего. Я не говорю, что использовать клипарт это плохо, пользуются им все, но нужно это делать с умом. Все хорошо, но в меру. Если поискать, вы можете найти кучу веб-студий, который готовы изготовить сайт за 2 т.р. и 4 часа работы. Вот как нужно работать! 4 часа – 2т.р. – За день 2 макета – 4т.р. – в месяц примерно 100  т.р.  . А вы говорите веб студии…На таком фоне само слово «дизайнер» как-то теряет свою ценность.

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

Весьма и весьма унылая картина. Хотел бы узнать ваше мнение по этому поводу.

]]> http://strokoff.ru/2010/08/07/o-dizaine-i-cenah/feed/ 4 http://strokoff.ru/2009/12/08/delaem-podarochnye-svechki/ http://strokoff.ru/2009/12/08/delaem-podarochnye-svechki/#comments Mon, 07 Dec 2009 22:16:54 +0000 Strokoff http://romanesque.ru/?p=162 Читать далее →]]>
Скоро новый год и у всех у нас встает проблема: «Что подарить?». Сегодня я хочу рассказать о том, как сделать красивые и оригинальные подарочные свечки у себя дома.

Что нам нужно ?

1. Прямые руки (основопологающий фактор всего моего мини урока ).
2. Воск (желательно прозрачный на основе геля, поищите в различных магазинах для художников или в магазинах подарков).
3. Хлопковый фитиль (можно использовать и простую толстую ниточку пропитанную допустим в том же эфире. )
4. Формочка для свечки.
5. Кастрюля.
6. Кастрюля поменьше.
7. Большая ложка.
8. Еще куча всяких различных прикольных штук (читайте пост дальше.)

Как будем готовить ?

Изначально нам нужно растопить воск. У всех есть дома набор кастрюль (как минимум у вашей мамы он точно есть). Берем кастрюлю побольше и наливаем в нее воду. Затем вставляем в большую кастрюлю, кастрюлю поменьше и кладем туда наш воск. Топить воск нужно именно на «паровой бане», иначе он у вас просто пригорит (говорю по своему опыту). Держите вашу плиту на маленьком огне и как можно чаще помешивайте воск.

Что можно добавить ?

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

Не добавляйте ничего в плавящийся воск, пока он не достигнет темпиратуры хотя бы 150 градусов.

Какие формочки использовать?

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

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

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

Что можно добавить ?

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

• Можно сделать 2 фитилька в форме сердечка.
• На дно формочки можно добавить разноцветных карамельных конфет (выглядит очень красиво) и залить воском сверху.
• Можно добавить листочек с каким-нибудь пожеланием.
• Очень красиво смотрятся под воском маленькие стеклянные рождественские ангелочки (заливать формочку правда намного сложнее).
• Можно сделать воск разных цветов.
• Для сладкоежек, можно добавить даже пару кофнет на дно формочки.

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

• Программа: Adobe Illustrator CS4.
• Сложность урока:  Продвинутый.
• Время выполнения урока: 3-5часов – (У меня ушло 2 часа).

Шаг 1.

Запускаем Illustator и создаем новый документ 1024×768, обзываем его «iMac»,  устанавливаем CMYK палитру и 300dpi разрешение.

Шаг 2.

С помощью Rounded Rectangle Tool создайте форму iMac дисплея (размеры автора 545pt x 440pt) установите фон цветом #807F83.

Перестройте фигуру с помощью Direct Selection Tool (A).

Обратите внимание на углы на картинке.

Шаг 3.

Создайте меш сетку используя Mesh Tool (U).  Установите опорную точку чуть левее правого нижнего угла.

Убедитесь, что точка находится именно на границе.

Шаг 4.

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

Шаг 5.

На рисунке ниже, показана более детально мешовая сетка. Используйте Direct Selection  Tool (A) и цвета #D8D9DA #807F83 чтобы создать градиент, как показано на рисунке ниже.

Шаг 6.

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

Шаг 7.

Создайте с помощью Rounded Rectangle Tool новый прямогольник на переднем плане с размерами (537pt на 441pt).

Установите цвет прямоугольника #A1A1A4.

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

Шаг 8.

Используйте Mesh Tool и установите mesh сетку примерно на переднем прямоугольнике, как показано на рисунке ниже.  Используйте цвета #EFE9E5 и #A1A1A4.

Шаг 9.

Дублируйте слой с шага 8.

С помощью Direct Selection Tool (V) измените цвет дублированого прямоугольника на #261C02.

Создайте два Rectangle Shapes (M) и с помощью Direct Selection Tool (V) измените их  форму, как показано на рисунке ниже.

Теперь выберите первый прямоугольник и перейдите в Object > Path > Divide Objects Below. Повторите процедуру с вторым прямоугольником.

Шаг 10.

Теперь добавим картинки к нашему экрану. Просто добавте любое изображение на ваш вкус (Автор выбрал фото с пауком).

Трансформируйте изображение, как показано на рисунке ниже (не забывайте о перспективе).

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

Шаг 11.

Инструментом Pen Tool (P) создайте значок Apple, как показано на рисунке ниже. (Не забывайте про перспективу).

Шаг 12.

С помощью Pen Tool (P) создайте форму для блика. Вы можете создать новую форму или дублировать слой и использовать вычетание из уже существующей формы.

Примените градиент к форме от цвета #FFFFFF с 0% прозрачности до цвета #00000 с 100% прозрачности и углом наклона 81.82 градуса.

Шаг 13.

Теперь займемся созданием ножки для монитора.

С помощью Pen Tool (P) создайте форму, как показано на рисунке ниже.

Установите цвет формы ножки на #D8D9DA.

Шаг 14.

Теперь создайте новый прямоугольник с размерами (102pt на 79pt).

Инструментом Mesh Tool (U) добавте меш сетку и две вертикальные линии к ней, как показано на рисунке ниже.

Шаг 15.

Продолжайте работать с Mesh Tool (U) и добавьте к нашему прямогульнику еще 8 горзонтальных линий и 1 вертикальную.

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

Шаг 16.

Используя Direct Selection Tool (A), Mesh Tool (U) и Anchor Point Tool (Shift+ C) трансформируйте нашу фигуру и меш сетку, как показано на рисунке ниже.

Шаг 17.

Теперь используя Direct Selection Tool (A) и цвета #807F83, #C2CDC5, #EFE9E5, #A1A1A4 придайте тени, отсвета и рефлекска к нашей ножке.

Обратите внимание на области помеченные стрелками на рисунке ниже.

Шаг 18.

Теперь переместите две получившиеся формы позади нашего монитора.

Вуаля, мы отрисовали Apple монитор.

Шаг 19.

По аналогичному принципу вы также можете отрисовать apple мышку.

Я опишу лишь ключевые моменты в ее отрисовке.

Шаг 20.

Используя Pen Tool (P), Direct Selection Tool (A), Anchor Point Tool (Shift + C) и Mesh Tool (U) создаем основную форму и меш сетку мышки.

Шаг 21.

Теперь добавим бликов к мышке.  Используйте Pen Tool (P) и нарисуйте 2 области для будущих бликов.

Добавьте к 1′ому блику градиент от цвета #ffffff с прозрачносью 0% до цвета #bfbfbf с прозрачностью 50% – угол наклона градиента -93,74 градуса.

Добавьте к 2′ому блику градиент от цвета #ffffff с прозрачностью 0% до цвета #dddddd с прозрачностью 100% – угол наклона градиента 175,71 градус.

Шаг 22.

Чтобы добавить объема нашей мышке, нарисуйте с помощью Pen Tool (P) форму, как показано на рисунке ниже и примените к ней градиент (настройки градиента также показаны на рисунке).

Шаг 23.

С помощью Pen Tool (P), нарисуйте значок Apple (цвет #a1a1a5 ) на мышке и тень под ней (цвет #162732).

Финальный результат автора

Собственно ссылочка на оригинал : How to Create a Photorealistic iMac and Magic Mouse.

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

• Photoshop CS4
• Karbaras’s IES Generator 3 (Скачать)
• Richard Rosenman’s Grid Generator 1.7 Plug-in
• Cybia AlphaWorks Plug-In (Скачать)
• 1589835-nice.IES (Скачать)

Шаг 1 – Настройка цвета.

Создайте новый psd документ, с размерами width 1024px и height 1024px.

Установите Foreground Color – #34240f и Background Color – #825826.

Залейте фон background цветом (сочетание клавиш Alt+Backspace).

Цвет фона

Шаг 2 – настройка фоновой текстуры.

Перейдите –  Filter>Render>Fibers и установите значения – Variance: 8 – Strength: 47. Нажмите кнопку Render несколько раз, пока не добьетесь равномерного распределения текстуры.

Настройки фильтра Fibers

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

Результат фильтра Fibres

Теперь зайдите – Filter>Distort>Glass и установите значения – Distorition: 15 – Smoothnes: 1 – Texture: Frosted и Scaling: 100% и нажмите OK.

Настройки фильтра Glass

Переименуйте слой в «corkboard»

Промежуточный результат

Текстура фона готова. Сохраните получившийся результат в файл «texture.psd» и не закрывайте его.

Шаг 3 – Настройка главного макета.

Создайте новый документ с параметрами hight: 300px – width: 500px. Размеры вы можете выбрать по вкусу, я указал лишь те, которые будут использоватся в этом уроке. Сохраните получившийся документ в «main_layout.psd«.

Переименуйте слой «Background» в «floor_color» и залейте его цветом #1a211c

Промежуточный результат

Шаг 4 – Совмещение текстуры и главного макета.

Вернитесь в документ «texture.psd«.

Кликните правой кнопкой мыши на слое «corkboard» и выберите пункт «Duplicate Layer«.

Дублирование слоя corkboard

В появившемся диалоговоем окне введите «corkboard» и внизу выберите «main_layout.psd»  в качестве конечного документа.

Дублирование слоя corkboard

Вернитесь в документ «main_layout.psd«. В списке слоев, слой «corckboard» должен оказаться над слоем «floor_color«.

Промежуточный результат

Шаг 5 – Трансформация и изменение текстуры corckboard.

Выберите слой «corkboard»  в списке слоев.

Нажмите сочетание клавиш Ctrl+T или выберите меню Edit>Transform>Scale.

В настройках трансформации нажмите на значок «Maintain Aspect Ratio» (сохранять пропорции) (значок я пометил красной стрелкой на рисунке ниже).

Введите значение Width: 75% и нажмите клавишу Enter чтобы завершить трансформацию.

Нажатие значка «Maintain Aspect Ratio» позволяет нам быть уверенными в том, что изображение трансформируется одинаково со всех сторон.

Значок Maintain Aspect Ratio

После трансформации, слой «corckboard»  может «съехать». Воспользуйтесь Move Tool (Клавиша V) и перетащите слой так, чтобы он занимал всю площадь документа.

Промежуточный результат

Шаг 6 – Создание пола и корректирование текстуры «corckboard».

На слое «corkboard» создайте выделение длинной 500px и высотой 230px,  начиная сверху.

Выделение на слое corckboard

Нажмите кнопку «Add Layer Mask» в списке слоев. Это создаст маску для слоя и откроет не выделенную выделенную область.

Применение маски слоя

С сочетании с полом текстура слоя «corckboard»  выглядит немного перенысыщенной. Это можно исправить с помощью настройки слоя.

Выделите слой «corckboard» и нажмите на значок «Create new fill abjustment layer» и в выпадающем списке выберите «HueSaturation«.

HueSaturation

В настройках введните значения Hue: -6 Saturation: – 7 и Lightness: -8.

Чтобы наши корректировки цвета влияли только на слой «corckboard«, в настройках «HueSaturation» нажмите на иконку с двумя пересекающимися кружочками.

Если вы все сделали правильно, то возле корректирующего слоя в списке слоев – появится стрелочка, а слой «corckboard» станет подчеркнутым.

Результат применения настроек HueSaturation

Шаг 7 – Добавление тени под текстуру.

Создайте новый слой над слоем «floor_color» и назовите его «corck_shadow«. (Кнопка создания нового слоя отмечена красной стрелкой на рисунке ниже).

Кнопка создания нового слоя

На слое corck_shadow создайте новое прямогульное выделения (Клавиша M) длина выделения 500px, высота 10px.

Переместите выделение под конец слоя «corckboard» (Выделение можно перемещать зажав клавишу Space).

Измените цвет foreground color на черный, просто нажав клавишу D (сбросить цвета).

Выберите Gradinet Tools ( G ) – в настройках Gradient Tool выберите линейный градиент от черного к прозрачному.

Настройка градиента

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

После того, как вы зкончите с Gradient Tool, нажмите сочетание клавиш Ctrl+D (снять выделение).

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

Установите прозрачность слоя «corck_shadow» на 60%. Вы можете уменьшить прозрачность слоя, выделив его в списке слоев и поменяв параметр Opacity.

Прозрачность слоя

Шаг 8 – Добавление отсвета к текстуре.

Дублируйте слой «corck_shadow«. Чтобы дублировать слой, выберите нужный вам слой и нажмите сочетание клавиш Ctrl+J (Дублировать слой).

Получившийся слой перетащите в самых верх в списке слоев. Переименуйте получившийся слой в «lip«.

Получившийся слой "lip"

Выберите слой «lip» и нажмите сочетание клавиш Ctrl+I (Инвентировать цвета) у вас должен получиться белый градиент.

Вид слоя lip

Отразите слой по вертикали. Выберите в меню Edit>Transform>Flip vertical.

Edit>Transform>Flip Vertical

Перетащите слой «lip» на 9px выше (чтобы перетащить слой на 9px выше, просто нажмите 9 раз сочетание клавиш Ctrl+Стрелка вверх).

Установите вид смешивания слоя на «Overlay» и прозрачность слоя на 50%.

Промежуточный результат

Шаг 9 – Добавление тени полу.

Создайте новый слой над слоем «floor_color» и назовите его «floor_shadow«.

На слое «floor_shadow» инструментом Gradient Tool создайте ровный (от черного к прозрачному) градиент примерно на три четверти пола.

Установите прозрачность слоя «floor_shadow» на 50 %.

Применение Градиента

Шаг 10 – Добавление текстуры доски.

Теперь мы добавим текстуру доски. Создайте новый слой над слоем «floor_color» и назовите его «floorboards«.

Залейте слой черным цветом.

Слой floorboards

Теперь мы применим Grid Generator Plug-in от Richard Rosenman. На слое «floorboards»  перейдите в меню Filter>Richard Rosenman>Grid Generator.

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

Плагин Grid Generator

Вот результат применения Grid Generator.

Промежуточный результат

Шаг 11 – Добавление перспективы и света к полу.

Выберите слой «floorboards» и перейдите в Edit>Transform>Perspective.  Перетяните опорные точки как указано на картинке ниже. Прошу заметить, что опорный точки выходят за пределы рисунка. После того как перетащите опорные точки, нажмите клавишу Enter чтобы завершить трансформацию.

Применение перспективы

Установите тип смешивания слоя «floorboards» на Multiply и уменьшите прозрачность слоя до 30%.

Промежуточный результат

Дублируйте слой «floorboard» (сочетание клавиш Ctrl+J) .

Переименуйте слой в «floorboard_hightlight» .

Переместите слой «floorboard_hightlight» под слой «floorboard«.

Инвентируйте цвета слоя (сочетание клавиш Ctrl+I)

Установите тип смешивания слоя на Overlay и прозрачность слоя 30%.

Сдвиньте слой «floor_hightlight» на 1 px вправо (просто 1 раз нажмите Стрелку вправо).

Промежуточный результат

Шаг 12 – Добавление света к полу.

Создайте новый слой и назовите его «floor_hightlight«.

Установите foreground color на белый цвет (или же просто нажмите клавишу X).

Выберите Gradient Tool. В настройках Gradient Tool установите градиент от белого к прозрачному и кликните на значок Radial Gradient.

Применение радиального градиента

Создайте градиент от центра до верха изображения, как показано на рисунке ниже.

Применение радиального градиента

Нажмите сочетание клавиш Ctrl+T и переместите опорные точки как показано на рисунке ниже. (При перемещении боковой опорной точки удерживайте зажатыми кнопки Shift+Alt это позволит трансформировать слой одинакого с двух сторон).

Трансформация градиента

Переместисте слой «floor_hightlight» в списке слоев над слоем «floorshadow«.

Установите тип смешивания слоя на Overlay и  прозрачность слоя 50%.

Промежуточный результат

Шаг 12 – Создаем «потолок».

Создайте новый слой и переименуйте его в «light_housing«.

Перетащите слой на на первое место в списке слоев.

Создайте в самом верху документа прямоугольное выделение (клавиша M) высотой 10px и длиной 500px.

Выберите цвет #17150e и залейте им выделение нажав сочетание клавиш Alt+Backspace.

Промежуточный результат

Теперь добавим тени нашему «потолку». Дублируйте слой lip и переименуйте получившийся слой в «housing_hightlight«.

Переместите слой «housing_hightlight» под слоем «light_housing«.

Используя Move Tool (клавиша V) состыкуйте тень с нашим «потолком».

Уменьшите высоту тени вдвое используя сочетание клавиш Ctrl+T (Трансформация).

Трансформация тени

Шаг 13 –  Доработка тени потолка.

Выберите слой «housing_hightlight» и дублируйте его.

Переименуйте слой в «housing_shadow«.

Инвертируйте цвета с помощью клавиш Ctrl+I

Отразите слой по вертикали (Edit>Transform>Flip Vertical).

Сдвиньте слой на 1px вниз (Нажмите 1 раз стрелку вниз).

Установите прозрачность слоя 80%.

Промежуточный результат

Шаг 14 – Создаем свет.

Запустите скаченый IES Generator.  Нажмите кнопку Load и загрузите скаченый файл 1589835-nice.IES.  (Впринципе вы можете попробовать создать свет сами и получить другой результат, порядок действий никак не изменится, если вы будете использовать свой варианта света).

IES Generator

Установите значения в настройках Brightness: 1.11 и Away from wall: 1.11

Настройки IES Generator

Шаг 15 – Обрабатываем свет в фотошопе.

Поскольку IES генератор не может работать в связке с фотшопом. Мы будем вытравлять свет следующим способом:

Сделайте скриншот рабочего стола.

Создайте или откройте уже существующий документ в Photoshop.

Нажмите сочетание клавиш Ctrl+V чтобы вставить скриншот.

Вставляем скриншот

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

Выделение области света

Перейдите Select>Inverce – чтобы инвертировать выделение.

Залейте получившееся выделение черным цветом.

Промежуточный результат

Шаг 16 – Обтравка света и перенос его в нашу работу.

На слое с нашим светом, перейдите в Filter>Cybia>Alphaworks и в настройках в выпадающем меню выберите LINEAR BlackOut – remove from BW lineart. Нажмите ОК.

Результат выполнения фильтра

Нажмите сочетание клавиш Crl+A (Выделить все) и копируйте слой в наш документ «main_layout.psd«.

Переименуйте получишвийся слой в «ies_light«.

Переместите слой «ies_light» под слоем «lip«.

Промежуточный результат

Переместите наш свет на 6px выше нашего «потолка» (Переместите свет к началу потолка и нажмите 6 раз стрелку вверх).

Установите режим смешивания слоя на Overlay.

Шаг 17 – Усиление света.

Дублируйте слой «ies_light» 2 раза.

Установите прозрачность верхней копии «ies_light copy 2» на 50%.

Вид слоев

Выделите в списке слоев 3 слоя «ies_light«, «ies_light copy» и «ies_light copy 2«.

Нажмите сочетание клавиш Ctrl+G (Сгруппировать слои) в диалоговом окне введите называние группы Light.

На рисунке ниже показан порядок действий для группировки слоев.

Порядок действий

Сгруппированные слои

Шаг 18 – Создаем объем света.

Выделите все слои в группе «Light» и снова сгруппируйте их. Переименовывать группу не нужно.

Новая группа

Выберите все слои в группе «Groupe 1» и добавте к ним маску, маска должна появится перед названием группы.

Маска для группы слоев

Создайте градиент как описано в шаге 6 и примените его примерно как показано на рисунке ниже.

Применение градиента к группе

Шаг 19 – Добавляем отсвет к полу.

Сверните группу «Gropue 1«.

Дублируйте слой «»floor_hightlight» (выделить слой и нажать Ctrl+J).

Добавте получившийся слой «floor_hightlight copy»  в грппу «Light» (Просто перетяните в списке слоев, слой «floor_hightlight copy» на название группы «light«).

Перенос слоя в группу

Трансформируйте слой «floor_highlight copy» примерно на 50% своей текущей ширины.

Переименуйте слов «floor_highlight copy» в «spot«.

Установите прозрачность слоя на 70%.

Трансформация слоя spot

Шаг 20 –  Дублируем свет.

Сверните группу «Light» и перетащите ее на иконку создания нового слоя в самом низу списка слоев.

Дублирование слоя

Дубликат группы «Light» должен появится выше оригинальной группы.

Повторите процедуру еще раз и создайте еще один дубликат группы. В итоге у вас должно получиться 3 группы «light«, «light copy» и «light copy 2«.

Промежуточный результат

Шаг 21 – Распределяем свет.

Выберите группу «light copy 2» и переместите ее на 140px влево (Зажмите клавишу Shift и нажмите 14 раз стрелку влево (удержание клавиши Shift позволяет передвигать слои на 10px при одном нажатии)).

Повторите процедуру с группой «light_copy» только теперь переместите слои вправо.

Перемещение слоев

Переименуйте получившиеся группы. «light» в «light center«, «light_copy» в «light_right» и «light_copy2» в «light_right«.

Промежуточный результат

Шаг 22 – Добавляем отсвет к потолку.

Выделите наши 3 группы и дублируйте их (перетяните на значок создания нового слоя).

Выделите получившиеся 3 группы и нажмите сочетание клавиш Ctrl+E - все 3 дублированные группы превратятся в 1 слой.

Переместите получившийся слой в списке слоев над слоем «housing_shadow«.

Переименуйте слой в «spill«.

Перейдите в Edit>Transform>Flip Vertical (отразите слой по вертикали).

Отражение слоя по вертикали

Поднимите слой на 230px выше (зажмите клавишу shift и нажмите стрелку вверх 23 раза).

Перемещение слоя

Создайте прямоугольное выделение шириной 500px и высотой 10px. Выделение должно совпадать с нашим «потолком».

Создайте маску для слоя «spill» – это ограничит его распространение по нашему рисунку.

Установите режим смешивая слоя на Overlay.

Маска слоя spill

Шаг 23 – Акцентрируем свет (необязательный шаг).

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

В списке слоев выберите слой «lip» и создайте под ним новый слой.

Переименуйте новый слой в «top_shadow«.

Выберите Gradient tool от черного к прозрачному цвету и примените градиент примерно как показано на рисунке ниже.

Применение градиента к слою top_shadow

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

Зажмите клавишу Ctrl и нажмите на получившемся слое, тем самым мы выделили наш слой.

Перейдите в Select>Inverce и инвертируйте выделение.

Не снимая выделения, в списке слоев выберите слой «top_shadow«.

Создайте маску слоя.

В результате маска слоя должна быть, как показано на рисунке ниже.

Маска слоя top_shadow

Удалите слой который мы получили от «склейки» групп, он нам больше не понадобится.

Шаг 24 – Добавляем текст (Финальный шаг).

Теперь вы можете добавить свой текст по вкусу .

Автор использовал 2 шрифта Arista 2.0 light и  DIN Mittelschrift (оба шрифта можно скачать в свободном доступе).

Переместите ваши слои с текстом в самых верх списка слоев.

Слои с текстом

Примените к слоям следующие стили. (Чтобы настроить стиль слоя, просто дважды кликните на нужном вам слое.)

Применение стилей к слою

Автор использовал следующие стили

Drop shadow:

Drop shadow

Inner shadow:

Inner shadow

Color overlay:

Color Overlay

Финальный результат автора :

Финальный результат

Собственно ссылка на оригинал урока –  How to Create a Realistic IES Lighting Effect in Photoshop

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

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

1. «Изобретение это – 1 процент вдохновения и 99 процентов вкалывания» иначе говоря –  »аппетит приходит во время еды», т.е. я думаю, это самый простой способ выйти из творческого кризиса «просто делать это».  Не нужно зацикливаться на том, что у вас творческий кризис, просто продолжайте творить и все у вас будет хорошо. Этот способ действенный для меня только в начале творческого кризиса, когда я не просто не успеваю осознать насколько все плохо.
2. Этот вариант больше подойдет для блоггеров, когда складывается такая ситуация, что писать надо, но неочем. У каждого человека есть такие вещи которые ему интересны, просто почитайте статьи на любимые для вас темы, я уверен, что вы найдете что-то новое, интересное и полезное для себя.
3. Творческий кризис = информационный голод – к примеру у таких людей как Артемий Лебедев, просто небывает творческого кризиса из-за того, что им всегда все интересно и они получают новую информацию круглые сутки. Также попробуйте и вы, можно как пример взять какюу-нибудь самую простую вещь, допустим монету. Какие бывают виды ? Какая самая большая монета ? Какая самая маленькая ? Какая самая ценная ? Из чего делают самые необычные монеты ? и т.д. и т.п.  для блоггера может получиться интересный и увлекательный пост, а дизайнер может заметить новые детали и вещи в каких-то направлениях и использовать их в своих будущих проектах.
4. Бывает так, что творческий кризис вызван тем, что вы просто путаетесь в чем-то либо теряетесь. Т.е. как такового творческого кризиса нет, но тупняк все равно присутствует. Попробуйте посмотретьпочитать схожие темыработы в вашей области. Самым действенным способом является просмотор различных вещей на тему «Самый необычный блоггердизайнерархитекториллюстратортанцор и т.д. и т.п.» Я больше чем уверен, что вы подчерпнете много новой информации для себя.
5. «Если *ля пи*дец то ну его на*уй». Самый лучший для меня способ уйти от творческого кризиса, это просто дать ему спокойно пройти. Займитесь своими повседневными делами, посетите кинотеатр, выберетесь с друзьями за город на шашлыки, просто отдохните.

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