Представляем вашему вниманию вторую часть нашего руководства по разработке профессионального сайта-портфолио посредством Photoshop и сеточной системы 960.
Первую часть руководства вы найдете здесь.
А сегодня мы собираемся завершить то, что начали.
Вот превью того, что мы собираемся создать:
Давайте начнем оттуда, где остановились
Этап 6: Добавляем последние работы
Пришло время показать всем ваши последние творения. Создайте контейнеры, в которых будут размещены изображения ваших работ. Для того чтобы посетителям было легче ориентироваться, вы можете оставить сетку.
Каждому блоку задайте внешнее свечение:
А закончить необходимо следующим образом:
Чтобы добавить контрастности, вы можете задать тень каждому изображению. Создайте темный прямоугольник идентичный по размеру с изображением в качестве нового слоя под изображением, примените фильтр размытия гаусса (Gaussian Blur) с радиусом в 5 пикселей, а затем примените искажение (Transform > Distort) для того чтобы тень в середине было немного искривлена. В итоге у вас должен получиться следующий результат:
Под примерами портфолио мы также добавили заголовок «Latest Work» (последние работы) с использованием шрифта ChunkFive размером в 30pt. Для контрастности добавляем незначительную (20%) тень.
Этап 7: Создаем побуждающие к действию кнопки
Мы начали с дублирования группы separator и перемещения копии под раздел портфолио для создания разделения. Следующий этап заключается в разработке элементов, побуждающих к действию. Мы создали два таких элемента, чтобы позволить посетителю либо посмотреть еще работы, либо связаться с владельцем сайта.
Мы использовали следующие стили для оформления этих элементов:
Этап 8: Разработка подвала
Наконец, пришло время разработать подвал, который представит нашим посетителям важную информацию в виде ссылок на ваши страницы в социальных сетях, контактные данные, а также ленту статусов из сети микроблогинга Twitter.
Начинаем с копирования фона шапки и перемещения её вниз, до самого подвала.
Заголовок «Get In Touch» (будьте на связи) был выполнен с помощью шрифта Myriad Pro размером в 20pt, как и другие заголовки.
В первом разделе мы разместим форму контакта. Итак, создайте прямоугольник, который будет служить полем для ввода имени.
Мы придадим форме привлекательный выгравированный эффект за счет следующих стилей:
Теперь создайте оставшиеся поля путем копирования готового.
Кнопка подтверждения была создана посредством копирования побуждающего к действую элемента в центре страницы и последующего укорачивания ее длины на приблизительно 25%. Тексту «Send» (отправить) мы так же задали небольшой эффект тени.
В центральном разделе подвала мы просто добавляем ссылки на страницы в социальных сетях посредством иконок BuddyIcons.
Что касается области с трансляцией статусов из сети Twitter, то здесь мы просто копируем 3 последних твита (или используем текст-наполнитель). Здесь мы также использовали иконку Twitter, разработанную mfayaz.
Мы почти закончили! Последнее, что нам осталось сделать, добавить информацию об авторском праве. После того, как вы сделаете это, выделите все слои подвала, сгруппируйте их, и назовите группу «footer».
И на этом мы закончили! Вы дошли до конца нашего руководства. Надеемся, что оно заставило вас поразмышлять о том, какие другие стили и текстуры можно использовать в разработке собственного портфолио. Если у вас будут какие-то замечания или предложения, милости просим в отдел комментариев! Спасибо!
Раздел: Образование и Изучение Нет комментариев
Уроки Photoshop: Разработка профессионального сайта-портфолио при помощи Photoshop и сеточной системы 960 – Часть 2
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Design FactoRy Прочитано (раз): 12744 | Нет комментариев
Источник материала / оригинал статьи Распечатать
Источник материала / оригинал статьи Распечатать