20 Март 2008 г.

Как сделать уникальный дизайн для проекта по-быстрому



Чем хорошо собственное ведение проектов?

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

А делать все самому. Статьи писать, дизайн лепить, в плане SEO двигать.

Прикольная замута, да? Здравствуйте, господин Самоубийца, вот вам гроб, вот вам веревка, вот вам мистер-Пропер-веселей-веревка-скользит-в-два-раза-быстрей!

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

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

В общем, поехали. Тыщ-тыдыщ-тыщ.

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

Шапка, мои дорогие друзья, чуть ли не самое главное в дизайне сайте. Ведь дело-то в чем? Можно взять тупой столбцовый шаблон без графики, прилепить туда шапку и все будет пучком. Уникальный дизайн, модераторы РСЯ радуются, мы ликуем, собачки писаются.

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

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

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

Дело тут не в экономии двадцати баксов, а в собственном удовлетворение чувства прекрасного и… Ну, это просто прикольно! Зуб даю.

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

Далее. Шрифты есть. Теперь нужны картинки и вот тут все зависит от конкретного проекта. Эта шапка (да и та, что сверху), как вы можете сами убедиться, была предназначена для туристического:



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

Как она создавалась, Юрочко?

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

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

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

Когда все расфасовано, остается лишь свести картинку. Сводить можно двумя способами: либо стирать ластиком с силой нажима (Opacity) около 30% (тут все от вас зависит); либо пользоваться Clone Stamp (вызывается клавишей «S»).

Я большую часть времени игрался именно Clone Stamp.

Действует эта штука так: в нужном месте указываем точку, нажимаем ALT и кликаем. Потом идем куда надо, зажимаем мышь и «красим». Только вместо краски будет тот самый фон, на котором мы херакнули ALT’ом.

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

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

Текст крутится и изгибается волной просто, достаточно выбрать «Create warped Text» (это такая буква «Т» верхом на сиське).



Обводку шрифтов делаем через слои: правым кликом вызываем меню и там выбираем «Blending Options». У нутрях идем в самую последнюю вкладку Stroke и творим, что хотим.

Вот и все. Шапка готова.

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

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

Абзац, конец предложения, финиш.

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

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

------------------------
Блогосфера: Почему в сети не так важно быть талантливым писателем? - потому что в сети не так важно быть вообще кем-то :-).

Кто на новенького? - дедовщина на работе. Пора создавать комитет Рабочих Матерей.

12 комментария (-ев):

Serfer77 комментирует...

Супер. Отличный пост, спасибо.

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

Пошел делать шапки для своих новых и недоделанных проектов.


П.С. В асе мы пока так и не пересеклись..

Stimmi комментирует...

Serfer77, а должны были пересечься? Напомни еще раз на почту или через Серч. Яндекс в последнее время тупит что-то, да и я последний месяц тоже туплю :)

Андрей Зарубин комментирует...

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

Stimmi комментирует...

Андрэ, а тебе все лениво. Какой-то ты не амбициозный... :-(

Lesso комментирует...

Прикольно конечно, но вот руки не всем позволяют делать шапки, иногда надо быть честным перед собой :) Хорошо конечно, когда получается, но у меня фантазии не хватает, ну точнее хватает, но мои навыки в фотошепе так убого реализуют эти мысли, что аж самому страшно :D Может это просто недостаток навыков работы в фотошопе, а может руки кривые. ХЗ. А вооще пост - зачёт.
Оффтоп.
И раз уж пошла такая тема, про создание по ступенькам, то как-нить можно осветить, насколько зависит доход с проекта от количества страниц? Есть ли смысл плодить тыщи статей, или можно 10-20 нормально "вылезанных" страниц повесить и будет счастье?

Денис Судилковский комментирует...

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

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

Может кто захочет что-нить более масштабное забабахать - http://photoshop.demiart.ru/fx_01.shtml

Stimmi комментирует...

Lesso, смысл есть.

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

Просто есть тема, которую стоило бы раскрыть тем, кому НЕ, или тем, кому ПО, ну и по-любому тем, кому ИН.

I.B. комментирует...

Stimmi, при прочтении сего плакал. Завтра пойду за книжкой к фотошопу. А так не хотелось. PHP не дочитал еще :).

Stimmi комментирует...

I.B., не надо плакать :-) Книжка по фотошопу вещь хорошая, но интернет лучше.

KV комментирует...

да ну нафик эти разрисованные шапки.
Вывел название, слева цветочек (или домик) и хорош :)

Stimmi комментирует...

KV, а еще проще сделать какую-нибудь херню в стиле web 2.0 на какой-нибудь сайт про геморрой. Прикинь. Веб 20 сайт о геморрое, социальная сеть Гемор :D

KV комментирует...

проще чем шапку нарисовать? да ню, врятли ;)

Отправить комментарий