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. Сетка

 

Для начала нужно скачать сетку. Одним из простых способов являются сайты, где можно взять готовые. Скачав бесплатно исходники на сайте 960, выберите документ .psd с 16 колонками. На его основе мы и создадим главную страницу. Постарайтесь, чтобы эти колонки у вас были всегда на верхнем слое. Направляющие вы можете включать и выключать шоткатами (Cmd+Ж).

 

2. Размер

 

Установим размер 1200пикс. на 1300пикс. Image > Canvas Size

Как создать минималистичный сайт

3. Цвет

Сделаем заливку цвета #ADBFCA, и прибавим к слою прозрачного градиента. Для этого нужно дважды кликнуть по иконке слоя в панеле Layers. Установите параметры, как на скриншоте (Gradient> Overlay> 40% Opacity)

 

Ради разнообразия можно, используя полупрозрачную мягкую белую кисть в отдельном слое сделать пятно наверху — эффект слабого свечения на месте будущего логотипа.

 

Как создать минималистичный сайт

 

Как создать минималистичный сайт

 

Как создать минималистичный сайт

4. Лого

Сделайте направляющие видимыми, и всегда условно их придерживайтесь. Создайте текстовое поле, и напечатайте название компании. Дважды кликнув по иконке в панеле Layers, придайте стили этому текстовому слою, как показано на скриншотах. В результате у вас должна получиться матовая мягкая имитация объемного логотипа с тенью. Если у вас есть готовый логотип, вы можете его вставить, и придать те же самые стили векторному объекту.

 

Как создать минималистичный сайт

Как создать минималистичный сайт

Как создать минималистичный сайт

Как создать минималистичный сайт

 

5. Меню

 

Используя Rounded Rectangular Tool (U) из панели инструментов, создайте область меню цвета #dcdcdc под логотипом, опять же придерживаясь условных линий. И придайте этому слою эффекты тени, градиента и объема, как указано на скриншотах.

 

Как создать минималистичный сайт
Как создать минималистичный сайт

Как создать минималистичный сайт

 

6. Закладки

Напечатаем «Главная» цветом #a9a9a9 и придадим закладке эффект слабого градиента. По такому же принципу сделайте остальные необходимые закладки. 

 

Как создать минималистичный сайт

 

Разделители между словами. С помощью инструмента Line Tool (U) создайте линию в 1px цвета #F3F3F3 и одну слоем выше цвета #B8B8B8. Когда они рядом, получиться эффект внутреннего объема! Сгруппируйте два слоя, и дублируйте их между остальными слоями.

 

Как создать минималистичный сайт

 

7. Поиск

 

Используя инструмент закругленного прямоугольника (U) создадим область на панеле меню с обводкой цвета #c6c6c6. Подсказка «Что ищите?» цвета #a9a9a9 придаст эмоционального характера.

Как создать минималистичный сайт

 

Найдем иконку поиска бесплатно, и придадим ей необходимый эффект как на скриншоте. 

 

Как создать минималистичный сайт 

Как создать минималистичный сайт

Как создать минималистичный сайт 

Как создать минималистичный сайт 

 

 

 

8.Баннер

 

С помощью закругленного прямоугольника (U) создайте область баннера, и придайте ему те же эффекты, что и панели меню (правая кнопка мыши по иконке слоя, copy layer style> paste layer style).

 

Как создать минималистичный сайт

 

Поле заголовка. Используя инструмент прямоугольник (U), создайте область поверх баннера цвета #cbcbcb. Придайте такие тени и объемы apste, как на баннере (copy layer style> paste layer style). А затем, щелкнув по слою правой кнопкой мыши, нажмите Create Clipping Mask. 

 

Как создать минималистичный сайт
Как создать минималистичный сайт

 

Заголовок. Наберите текст цвета #a9a9a9 придайте те же эффекты, что и закладкам. В качестве баннера вы можете использовать описание услуг (3-4 слайда) или акций. Постарайтесь выбрать имиджевые фотографии, которые удачно описывают род деятельности компании. 

 

9. Проекты 

 

Наберите текст кнопок или названий проектов, придерживаясь сетки. Придайте им те же эффекты, что и закладкам (copy layer style> paste layer style)Разделители те же, как и в меню. Скопируйте их. Трансформируйте (Сmd+T) и разверните на 90°, придерживая Shift. Темную линию наверх, светлую ниже.

 

Как создать минималистичный сайт

Как создать минималистичный сайт

 

10. Услуги

 

Повторите те же махинации, что и с «Баннером», поменяйте заголовок. Определите количество колонок в блоке, опираясь на сетку. Скопируйте разделители из меню и трансформируйте (Cmd+T) по длине. Расставьте 4 разделителя между колонок (Alt+Shift+перетягивайте мышью, ровно копируя разделители)

 

Как создать минималистичный сайт

Как создать минималистичный сайт

11. Кнопка «Подробнее»

 

Создайте область для кнопки цвета # f1f1f1 и придайте ей эффекты. Поверх напишите текст «Подробнее», цвет # afafaf.

 

Как создать минималистичный сайт

Как создать минималистичный сайт

12. О нас

 

По такому же принципу создайте блок «О компании», придерживаясь сетки. В данном случае использовано 2 колонки и 2 картинки, но вы можжете варьировать соразмерно тексту и размеру фотографий.

 

Как создать минималистичный сайт

 

13. Контакты

 

Создайте блок «Контакты» по принципу баннера слева от блока «О компании». Скопируйте стили поля ввода из «Поиска» (см. п.7), сделайте поля контактов: Имя, Email и сообщение. Не забудьте кнопку «Отправить», которую можно переделать из кнопки «Подробнее». Сайт уже почти готов!

 

Как создать минималистичный сайт

 

 

14. Стрелки для слайдера

Для того, чтобы баннер переключался, ему необходимы стрелки. Создадим окружность (U) цвета #d9d9d9. И придадим ей стили. 

 

Как создать минималистичный сайт
Как создать минималистичный сайт

 

 

 

Вставим стрелку #adbfca, смасу беплатных векторов можно найти тут, и придадим ей тоже эффекты:

 

Как создать минималистичный сайт
Как создать минималистичный сайт

Как создать минималистичный сайт

 

Результат:

Как создать минималистичный сайт

Мы будем рады замечаниям и просто ласковому «Спасибо»! Скачать исходники можно тут. А в качестве баннера использована фотография строений Сантьяги.

 

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

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

7

      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.

          • tutdesign.ru
          • домен tutdesign.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

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