html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создаем чистое портфолио (часть1: дизайн)

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

 

Окончательный результат:

Смотрите демо

Каркас сайта

Каркас сайта имеет очень простую структуру:

Шаг 0 – Подготовка

Используйте 12-ти колоночный шаблон 960.gs  для этого проекта. Или же вы можете скачать 960-grid-actions и самостоятельно настроить сетку.

Шаг 1 – Лого

Разместите горизонтальную направляющую на уровне 50px и добавьте текст для логотипа. Автор использовал шрифт Apricot размером 46pt и цветом #e35e35. Разместите еще одну горизонтальную направляющую под логотипом. В нашем случае она располагается на уровне 109px.

Шаг 2 – Навигация

Теперь давайте поработаем над навигацией. Она будет находиться справа, для текста используется шрифт Museo500 размером 14pt и цветом #454545. Расстояние между каждым пунктом -  34px.
Шрифт вы можете скачать отсюда. Не все семейство шрифтов Museo бесплатное, выберите 500. Также нам нужно продумать, как будут выглядеть активные пункты меню и пункты в момент наведения курсора.

Шаг 3 – Слайдер

Добавьте новую горизонтальную направляющую на 40px ниже, чем последняя – на уровне 149px, и еще одну на  373px ниже предыдущей – на уровне 522px. Таким образом мы определили область для слайдера. Заполните ее заливкой ‘clean pattern 3 light’ из набора Minimal Patterns for Backgrounds.

Примечание переводчика: можете самостоятельно создать заливку, ориентируясь на картинку выше.

Добавьте еще одну направляющую на 30px ниже верха области слайдера, на уровне 179px.
Добавьте прямоугольник с высотой  280px и шириной  940px. Назовите слой для слайдера ‘window’ и заполните любым цветом.

Добавьте светло-серую обводку размером 5px.

Шаг 4 – Элементы управления слайдером

В этом примере мы использовали 4 изображения для слайдера, следовательно, 4 круга. Перетащите 2 новые горизонтальные направляющие на 489px и 497px, а вертикальную на 55 пикселей. Используя Ellipse Tool (U) нарисуйте четыре одинаковых круга.
Три из них будут иметь контур размером 1px цветом # e35e35 и белую заливку (или можете вообще убрать заливку). Диаметр активного круга  10px (вместо 8px для нормального состояния). Чтобы сделать это, либо заново нарисовать круг, либо просто изменить цвет заливки на #e35e35 и сделайте внешний контур. Расположите круги, как показано на скриншоте ниже:

У вас должен получится приблизительно такой результат:

Шаг 5 – Секция «О нас» – 1-ая колонка

Добавьте новую горизонтальную направляющую на уровне 565px (на 40px ниже секции с слайдером)  и добавьте первый заголовок ‘Who we are’, используя шрифт Museo500, размером 19pt и цветом #454545.
Текст параграфа находится на  25px ниже заголовка и сдвинут на 5px влево, для него также выбран шрифт Museo Sans 500 размером 13pt.

Убедитесь, что ширина этого параграфа не превышает 240px, новая вертикальная направляющая на уровне 295px поможет вам в этом.

Теперь добавим линию нашему параграфу. Загрузите квадратную кисть при помощи панели  Brush Presets и выберите кисть размером 3px.

Используйте следующие настройки, чтобы получить вертикальную линию:

Удерживая  Shift, нарисуйте такую полоску:

Копируйте всю эту секцию (у вас же все организовано, и вы создали для нее папку?) и разместите дубликат на 35px ниже оригинала.

Шаг 6 – 2-ая колонка

Создайте вторую колонку таким же способом, как и первую, только ширина ее области должна быть 345px. Вертикальная направляющая на уровне 705px поможет вам в этом.
Под текстом расположите кнопку размером 104×28 px, установите ей белую заливку и добавьте обводку размером 1px и цветом #ffbca4 и расположите текст внутри ее. Используйте для этого шрифт Museo500 размером 14pt и цветом #e35e35.

У вас должен получиться такой результат:

Шаг 7 – 3-я колонка

И наконец, 3-я колонка имеет ширину 205px.
Вот параметры для шрифта:

Расстояние между этими маленькими параграфами 25px.

Шаг 8 – Разделитель (<hr />)

Добавьте новую горизонтальную линию на уровне 868px. Используйте квадратную кисть размером 2px и следующие настройки:

Нарисуйте такой разделитель (цвет #ffbca4):

Шаг 9 – Область для примеров работ

Добавьте новую горизонтальную направляющую на уровне 932px. Добавьте новый заголовок при помощи шрифта Museo500  размером 16pt и цветом #454545. Добавьте такую же кнопку, как в предыдущем шаге (118x28px) и расположите  ее на 30px ниже заголовка.

Шаг 10 – Миниатюры

Используйте инструмент Rectangular Marquee Tool (M), чтобы нарисовать прямоугольник размером 140x140px. Дублируйте созданный прямоугольник и сдвиньте дубликат на  40px правее оригинала. Повторите это 2 раза.

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

Теперь наше портфолио должно выглядеть так:

Дублируйте разделитель и расположите его на  60px ниже секции  ‘recent projects’.

И добавьте внизу навигацию с расстоянием между ссылками 45px. Вот настройки для шрифтов:

Все, наш дизайн готов!

Окончательный результат:

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

Автор: wegraphics

Перевод: Дежурка

Возможно, вас также заинтересуют статьи:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

0

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции