Делаем портфолио для фриланс-дизайнера
Для фриланс-дизайнера или веб-студии портфолио - важнейший фактор успеха. Сегодня мы с вами, вслед за статьей Design a Portfolio Site in Photoshop, пройдем полный урок создания в Фотошоп главной страницы сайта вашего портфолио. Можно заранее посмотреть, какой вид страницы мы получим в результате своей работы.
Не волнуйтесь, если знаете английский недостаточно. Я буду рядом с вами на каждом шаге этого урока и щедро рассыплю свои комментарии. :-)
Урок начинается с того, что
мы создаем пустой файл. Уже на этом шаге заметно, что сайт ориентирован на современные мониторы. Потому как ни на чем другом сайт с фиксированной шириной 1400 пиксел смотреть просто не получится.
Итак, затем мы последовательно:
создаем хэдер -- при этом почему-то используем последовательно заливку, цветовые полосы шириной в 1 пиксел на всю ширину дизайна, вместо того, чтобы использовать градиент ручной настройки... Ну.. автору видней. Такая техника ведь тоже имеет право быть. Тем более, что ее очень просто повторить.
Дальше автор скачивает бесплатный (но эффектный) фонт Bitstream Vera Sans. Жаль, что он не поддерживает кириллицу. Но у вас ведь наверняка есть в запасе что-нибудь более подходящее?
Главное меню выполняется простым Arial - и это правильно, если мы хотим иметь возможность редактировать тексты (т.е. готовим их под верстку именно текстами, а не вырезанными картинками). Но на него накладываем тень. Это выполнимо средствами CSS3, но это же не дает применить наш дизайн для верстки под старые браузеры вроде IE6 и IE7.
Аналогично отрисовываем вспомогательное (правое) меню.
Делаем стильный блок поиска
Дальше автор готовит основную поверхность, которой очень гордится, потому что там имитируется направленное освещение. На мой взгляд поверхность получается весьма унылая. Может быть, есть смысл попробовать как-то оживить ее цветом или фактурой? (Раз уж все равно это цельное изображение, которое мы будем потом загружать)
В качестве скриншотов берем, конечно, не абстрактные примеры с их сайта, как автор, а свои лучшие работы. Кстати, они ведь у вас уже есть? Если нет, вам обязательно лучше в начале найти своих первых клиентов и разработать хотя бы 5-8 сайтов, пусть даже без продажи. Портфолио из 1-2 работ вывешивать просто нет смысла. Оно сослужит вам плохую службу: не привлечет, а распугает ваших потенциальных клиентов. Автор рекомендует для этой модели брать скриншоты не уже 1350 пиксел... что тоже странно: уж масштабировать картинки мы с вами умеем хорошо, правда?
Важная часть: над своими скриншотами мы помещаем текст с очень кратким (но емким!) описанием того, что мы предлагаем посетителям.
Теперь другой важный момент: призыв к действию. Вы же не хотите, чтобы посетитель, которого вы с таким трудом заманили взглянуть на свое портфолио, просто развернулся и ушел? Вы хотите, чтобы он сделал заказ? Ну так дайте ему такую возможность! Оформляем поверхность, размещаем на ней призывный текст и заветную кнопку. Эта часть, признаю, получилась очень неплохо.
Итак, важное - сделано. Теперь нужные мелочи: заполняем страницу контентом. Раздел "О нас" набиваем снова Arial (и это правильно, шрифтов и так уже многовато для одной-то странички).
Рядом (снизу) помещаем ленту своих трудовых подвигов из блога вашей студии (кстати, он у вас есть? Если нет - самое время завести!)
Справа осталось довольно много места. Его мы заполняем галереей ваших товаров - то есть, опять-таки, дизайнов. Обратите внимание:мы оставляем достаточно много свободного места между картинками. Часть этого места наполняем подписями, а часть оставляем свободным.
Теперь футер сайта. Футер у нас здесь очень простой, как легкое подобие хэдера. Заодно это визуально обрамляет ваш дизайн, делает его гармоничным. Не забываем на футере поставить свой копирайт! Часто на сайтах в футере также располагают дублирующее меню. Так сделано и здесь.
Вот и все! Дизайн портфолио выполнен. Да, в нем есть свои недостатки (я отметил их в тексте), но он эффектный, броский, информативный и живой (обновляются записи блога и галерея). Почему бы не взять его за основу для вашего портфолио?
Портфолио веб-дизайнера: как сделать его эффективным?Парадокс давно известен, но не теряет остроты: вы - успешный дизайнер, ...
Как правильно оформить портфолио веб-дизайнераПортфолио – лицо веб-дизайнера. По другому и не скажешь. Именно «портф ...
