Этот урок охватывает первую часть серии, состоящей из нескольких частей, в которой мы рассмотрим процесс создания стильного веб-сайта для портфолио. В этой статье мы создадим визуальную концепцию и общую концепцию дизайна в 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 пиксель.
Завершите работу над строкой текста и отрегулируйте настройки эффекта «Тень», чтобы создать внешний вид.
Вставьте образец вашего дизайна сайта в шапку. Сделайте выбор из области заголовка, затем добавьте маску слоя, чтобы обрезать скриншот до размера.
Это интересно: Как создать текстурированный шероховатый 3D тип дизайна
Добавьте Drop Shadow, используя эффект стиля слоя Photoshop, затем щелкните правой кнопкой мыши и выберите Create Layer. Используйте функцию деформации функции трансформации, чтобы согнуть тень наружу. Уменьшите непрозрачность, чтобы придать более реалистичный вид.
Используйте типографику из заголовков заголовков на заголовках в основной области содержимого и напишите основную копию текста с хорошим большим шрифтом без засечек.
Нарисуйте серый прямоугольник в качестве основы предварительного просмотра элемента портфолио, затем выделите скругленному прямоугольнику внутреннюю тень, чтобы создать тонкий элемент кнопки.
Завершите элемент портфолио миниатюрой с показом проекта, а затем добавьте текстовую ссылку, используя стиль шрифта из меню навигации.
Сгруппируйте и продублируйте элементы, составляющие элемент портфолио, а затем поменяйте местами эскизы, чтобы продемонстрировать свою последнюю работу.
Завершите работу в области нижнего колонтитула с уведомлением об авторских правах и ссылкой на начало страницы. Концепция главной домашней страницы завершена, поэтому давайте уточним внутренние страницы.
Дублируйте свой PSD и переименуйте его в «About». Внутренним страницам не нужна большая область заголовка, но мы можем использовать пространство для отображения заголовка страницы. Обрежьте область заголовка по размеру.
Отрегулируйте текст в заголовке, чтобы представить страницу. В этом случае страница «О программе» может быть названа «О Крисе Спунере» — или может быть хорошей идеей использовать ваше собственное имя.
Вставьте копию в текст сообщения, чтобы заполнить область содержимого. Не забудьте оставить место, чтобы показать свою фотографию!
Страница портфолио может быть создана путем дублирования элементов портфолио и замены эскиза для каждого из ваших дизайн-проектов.
Заполните страницу с выбором элементов портфолио. Когда мы в конечном итоге создадим сайт как тему WordPress, каждый элемент портфолио будет создан как запись в блоге.
Используйте ряд скругленных прямоугольников, чтобы выложить типичную контактную форму для страницы контактов, затем перечислите свой любимый социальный веб-сайт вместе со значками.
Не забудьте зайти в Line25, чтобы узнать, как принять концепцию PSD и превратить ее в полностью работающий веб-сайт HTML и CSS.
См. Часть 2 урока: Кодирование в HTML и CSS
 (Пока оценок нет) Загрузка... |
