Как создать стильную концепцию веб-дизайна портфолио — выкладываем суть

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

Стильное портфолио дизайн сайта


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

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

Откройте Photoshop и создайте новый документ. Я склонен работать с размером 1680 × 1050, чтобы понять, как сайт будет выглядеть на широкоэкранном мониторе. Залейте фон светло-серым / кремовым и выделите 2% шума из меню фильтров.

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

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

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

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

Добавьте очень тонкую внутреннюю тень, чтобы создать впечатление внешнего вида. Ключ должен уменьшить непрозрачность до 10%.

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

CMD + щелкните миниатюру области белого содержимого, затем перетащите ALT по нижней части с помощью инструмента выделения, чтобы оставить более короткий выбор. Заполните эту область черным.

Загрузите окно стилей слоя для этого слоя и добавьте Pattern Overlay. Здесь я использую текстуру ткани в стиле iPhone 4 от Dr.Palaniraja .

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

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

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

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

Придайте кнопке изогнутый вид, изменив Inner Glow на тонкую светло-серую рамку, затем добавьте темно-серый штрих на 1 пиксель.

Завершите работу над строкой текста и отрегулируйте настройки эффекта «Тень», чтобы создать внешний вид.

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

Добавьте Drop Shadow, используя эффект стиля слоя Photoshop, затем щелкните правой кнопкой мыши и выберите Create Layer. Используйте функцию деформации функции трансформации, чтобы согнуть тень наружу. Уменьшите непрозрачность, чтобы придать более реалистичный вид.

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

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

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

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

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

Дублируйте свой PSD и переименуйте его в «About». Внутренним страницам не нужна большая область заголовка, но мы можем использовать пространство для отображения заголовка страницы. Обрежьте область заголовка по размеру.

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

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

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

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

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

Стильное портфолио дизайн сайта

Не забудьте зайти в Line25, чтобы узнать, как принять концепцию PSD и превратить ее в полностью работающий веб-сайт HTML и CSS.

См. Часть 2 урока: Кодирование в HTML и CSS



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован.