Как сделать оформление для сайта: это надо знать

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


Блок: 1/3 | Кол-во символов: 237
Источник: https://sellskill.ru/blog/oformlenie-saita/

ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ САЙТА

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

Эти нюансы нужны для хорошего ранжирования в выдаче Яндекса и Гугл. При чем тут оно? При том, что у такого Интернет-ресурса будут лучше поведенческие факторы. Тогда и в ТОП выбраться будет намного быстрее.

Для этого нужно, чтобы пользователи:

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

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

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

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

Также посетителю должно быть максимально удобно.

Т.е. на что следует обратить внимание:

  1. Цветовая гамма Интернет-ресурса.
  2. Правильное соотношение текста, картинок и видео.
  3. Удобное расположение блоков с информацией: , ссылки и т.д.
  4. Читабельность текста, т.е. правильно подобранный стиль и размер шрифта.
  5. Удобство навигации по разделам.

ВИЗУАЛЬНАЯ СОСТАВЛЯЮЩАЯ

Вы, наверняка, встречали в сети ужасные примеры оформления сайтов. Кислотные цвета, мелкий и нечитабельный шрифт, сложная навигация. Даже странно, для кого делается такие проекты и как их читают?

Чтобы ваш сайт не походил на «цыганскую свадьбу», необходимо, чтобы было использовано не больше 3-4 цветов.

А чтобы они сочетались между собой, помогут следующие ресурсы:

Генератор Цветовых Схем — выбирает сочетания из соображения комфортности для человеческого глаза.

Colorup Tikkurila — множество вариантов цветов и оттенков.

Color Adobe — удобный и понятный даже на английском языке. Чтобы выбрать нужную цветовую систему, поменяйте местоположение указателя на круге.

Color scheme — интересный ресурс. Позволит не просто подобрать палитру, но и посмотреть, как ее видят люди с отклонением в цветовосприятии.

Color hunter — множество готовых вариантов.

MaterialMixer — есть возможность смешать 2 цвета и посмотреть их сочетание.

Обязательно проработайте фон, чтобы он был максимально комфортен и пригоден для долгого чтения. Ведь вы хотите, чтобы пользователи находились на сайте долго?

ГЛАВНОЕ О ГЛАВНОЙ СТРАНИЦЕ

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

Укажите выгоды от ваших услуг, отзывы благодарных учеников.

Помните про кнопку с призывом к действию. Например, «оставьте свои контактные данные и получите в подарок этот чек-лист».

Блок: 2/3 | Кол-во символов: 3120
Источник: https://sellskill.ru/blog/oformlenie-saita/

1. FreshBooks

на сайт

  • Удачно использовано сочетание цветов и эффективно расставлены СТА-элементы.
  • Очень заманчивый текст на СТА-элементе: «Попробуйте бесплатно в течение 30 дней».
  • Эффектный подзаголовок: «Для более 5 миллионов людей, использующих FreshBooks, финансовая отчетность теперь не проблема». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, мучительно сложно для фрилансеров и владельцев малого бизнеса.

2. Золотая семерка: lp пример с удачным оформлением отзывов

на сайт

Это гениально, потому что:

  • Лаконичный дизайн сочетается с убедительным заголовком и подзаголовком.
  • Общую концепцию отлично поддерживает призыв к действию «Наслаждаться уютом» и красивая фотография, создающая теплую и спокойную атмосферу.
  • Стоит отдельно отметить на этой главной странице оформление отзывов. Наличие не только фотографий и имен реальных клиентов, но и карточек, на которых эти отзывы были написаны изначально, делает их особенно достоверными. Если вы думаете, как разместить отзывы на главной странице, пример этого сайта достоен подражания.

Блок: 2/9 | Кол-во символов: 1105
Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

О ДРУГИХ СТРАНИЦАХ


Если на них располагаются статьи, то убедитесь в качественном оформлении. Чтобы текст был разбит на абзацы по 4-5 строчек и имелись подзаголовки на каждые 5-8 абзацев. Не забудьте про уникальные тематические картинки.

Если имеются еще и другие страницы, то информацию располагайте по центру, на видном месте.

Если размещаете , то не делайте ее слишком много. Люди сегодня устали от нее и могут закрыть страницу, если она будет очень агрессивной.

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

ОФОРМЛЕНИЕ ПОДВАЛА САЙТА И ШАПКИ

Шапка это самая верхняя часть сайта. В ней нужно расположить логотип, название школы или бренда. Добавьте свое уникальное торговое предложение. О нем вы можете почитать тут.

Также помните про контактные данные: телефон, время работы. Но не давайте все телефоны, достаточно одного. А если звонок на него бесплатный, то обязательно укажите это. Пользуется популярностью функция «заказать звонок», попробуйте внедрить ее у себя.

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

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

Было полезно, и хотите отблагодарить? Тогда ставьте «+» в комментариях и делитесь ссылкой с друзьями.

Команда Sell Skill желает вам успехов и процветания!

Блок: 3/3 | Кол-во символов: 1617
Источник: https://sellskill.ru/blog/oformlenie-saita/

Вывод

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

ВНИМАНИЕ: я понимаю что не у всех получается установить эффекты, скрипты и плагины, которые находятся на сайте, поэтому я сделал возможность проконсультироваться по любому вопросу в сайтостроении здесь: SKYPE Консультация!

Успехов!

С Уважением, Юрий Немец

Блок: 3/3 | Кол-во символов: 510
Источник: https://sitehere.ru/krasivoe-oformlenie-sajta-oformlyaem-krasivo-odnostranichnyj-sajt

Создание и размеры документа


Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

Размеры зависят от того какой ширины будет Ваш будущий сайт. Вот например, Вы решили, что готовый сайт будет иметь ширину 1000 рх, следовательно размер документа нужно сделать немного больше где то 1200 рх. Это делается в первую очередь для удобства, что бы Ваш макет смотрелся так же как в браузере.

По поводу высоты, выставляется размер от тематики шаблона. Но желательно делайте больше, 4000 рх думаю хватит. Это делается для того, чтобы в дальнейшем все элементы влезли. Потому что я как то сделал маленькую высоту, и мне пришлось потом переносить всё в новый документ.

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Блок: 4/18 | Кол-во символов: 914
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

3. CloudPassage: видео на главной странице

на сайт

Это гениально, потому что:

  • Четкий и чистый дизайн страницы. Текстовый контент, точно передающий суть деятельности CloudPassage. Вот как на главной странице сайте разместить вместо фото презентацию или видео, закрепляя послание (месседж, message) с его помощью.
  • Только один направляющий призыв к действию. Чтобы у пользователей не оставалось сомнений, ниже указаны два сообщения: «Без кредитных карт», «Без обязательств».

Блок: 4/9 | Кол-во символов: 467
Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

Фон шаблона сайта

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

Блок: 5/18 | Кол-во символов: 289
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

4. Box

на сайт

Это гениально, потому что:

  • Домашняя страница Box является отличным примером того, как красиво разместить на главной странице информацию, используя силу визуальных эффектов и текстового контента. Простой, но сильный заголовок.
  • На главной странице отлично смотрятся логотипы заказчиков с надписью «Более 140,000 компаний используют Box», доказывающие популярность бренда.
  • Дополнительное доверие вызывают размещенные на видном месте контакты для сайта. Пример Box содержит хорошо заметный номер телефона вверху страницы.

5. Aweber: пример хорошей текстовой страницы

Это гениально, потому что:

  • Текстовая страница с сильным заголовком «7 причин на рассылку бесплатных советов по емейл-маркетингу» сообщает посетителю о множестве бонусов и предъявляет социальные доказательства.
  • Данная страница повысила процент подписок на рассылку на 321%.

6. Carbonmade

на сайт

Это гениально, потому что:

  • Оригинальная и забавная графика наглядно демонстрирует, на что способны специалисты этой компании.
  • Цифры и краткий, но емкий список преимуществ выглядят очень убедительно.
  • Красивая интеграция меню с иконками. Значки главной страницы для сайта, разделов «О нас», «Примеры работ» и «Цены» вызывают улыбку и запоминаются.

на сайт

Это гениально, потому что:

  • Заголовок страницы Evernote «Помни все» наверняка оказался бы победителем в номинации «Все гениальное – просто».
  • На этой странице видны три простых предложения, которые буквально «выскакивают» на зеленом фоне.
  • При просмотре страницы взгляд невольно останавливается на кнопке призыва к действию: «Попробуй Evernote бесплатно».

Блок: 5/9 | Кол-во символов: 1560
Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

Ширина будущего сайта в 1200 рх

Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.

А вот как она выглядит:

Выделяем наш слой, нужно просто один раз кликнуть на него:

А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

Теперь нашу выделенную область помещаем с помощью мышки по центру, она найдёт центр сама. Затем нужно вытащить ещё 2 линейки и установить их по обе стороны выделенной области. Таким образом мы обозначаем границы нашего будущего сайта, который будет иметь ширину в 1200 рх. Так же по этим линейка будет проще подгонять элементы дизайна. Если Вам не понятно сделайте так же как на рисунке ниже.

Линейку мы будем использовать и в дальнейшем, так как без неё здесь не обойтись, она позволяет выставить всё ровно.

Теперь мы практически полностью подготовили наш документ. Мы узнали середину, а так же обозначили точный размер за который не нужно вылазить. Теперь переходим к самому интересному, а именно к созданию дизайна сайта (макета).

Блок: 6/18 | Кол-во символов: 1788
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

8. Unlocking

на сайт

Это гениально, потому что:

  • С первого взгляда ясно, о чем этот сайт. И хотя большинство посетителей наверняка знает, что делать в случае блокировки телефона, на этой странице есть небольшое описание решения этой проблемы.
  • Эффект главной страницы построен на контрасте цветов и силе элементов доказательства. Например, «Доверие миллионов: разблокировано более 4 млн. телефонов».
  • Короткая лид-форма, размещенная непосредственно на странице вместо кнопки призыва к действию, избавляет пользователей от необходимости перехода и ожидания загрузки для сайта — пример правильного оформления.

9. Tribal Media: образец для панорамы на главной странице

Это гениально, потому что:

  • Впечатляющая городская панорама в хедере главной страницы привлекает максимум внимания. Как сделать картинку для главной страницы сайта? Вы не прогадаете, если последуете примеру Tribal Media.
  • Сила заголовка — в отсутствии лишних слов.

Блок: 6/9 | Кол-во символов: 916
Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

Создание дизайна или макета сайта

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Блок: 7/18 | Кол-во символов: 142
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

10. eWedding

на сайт

Это гениально, потому что:

  • включает в себя только самые необходимые элементы и ничего лишнего.
  • Отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: «Создайте свой ​​бесплатный свадебный сайт за 5 минут». Простой нтмл 5. Пример кода главной страницы будет предоставлен клиенту.

11. Basecamp: сайт с удачной лид-формой

на сайт

Это гениально, потому что:

  • В течение долгого времени страницы Basecamp были просто удивительными. Их отличительная черта – всегда эффектный заголовок и фото клиентов.
  • Как оформить главную страницу в блоге или на сайте так, чтобы получить как можно больше подписчиков? Разместите непосредственно на ней лид-форму для регистрации, избавляя пользователей от лишних действий, экономя их время и не рассеивая их внимание.

12. Eventbrite: новость на главной странице

на сайт

Это гениально, потому что:

  • Заголовок на главной странице «Если что-то происходит, здесь вы об этом узнаете» работает потому, что любопытство всегда двигало деятельностью людей.
  • Интересный подзаголовок. В нем пользователям предлагают либо просмотреть тысячи событий, либо создать собственное событие и продавать на него билеты.
  • Яркое праздничное фото, лаконичный дизайн, новости на главной странице, повествующие о грядущих интересных событиях, усиливают эффект.

13. GoodData: удачная картинка на главной странице сайта

на сайт

Это гениально, потому что:

  • оформлена, мягко говоря, нестандартным способом, но это только одна из многих причин, по которой ее можно назвать блестящей.
  • Картинка для сайта главной страницы помогает пользователям увидеть, как предлагаемый продукт выглядит в повседневной жизни.
  • Единственный минус – отсутствие четкого СТА-элемента.

Блок: 7/9 | Кол-во символов: 1697
Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

Группы


Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

Вот что должно получиться:

Блок: 8/18 | Кол-во символов: 249
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

14. TechValidate

на сайт

Это гениально, потому что:

  • Пример страницы, на которую просто приятно посмотреть. Этого удалось добиться за счет использования белого пространства и контрастных цветов.
  • Заголовок ясен и убедителен. То же можно сказать о призывах к действию.
  • Желтый цвет заголовка внушает пользователям мысль о ценности предложения.

Блок: 8/9 | Кол-во символов: 334
Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.

Переходим в пункт «Тень» и задаём следующие параметры:

Вот, что должно получиться:

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

Блок: 9/18 | Кол-во символов: 1138
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

15. Endeavor.org

на сайт

Это гениально, потому что:

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

Высоких вам конверсий!

Блок: 9/9 | Кол-во символов: 511
Источник: https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/

Иконки социальных закладок


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

Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот , что нужно сделать:

Потом создаём группу, называем её  «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:

Наводим курсор в то место где будет иконка, зажимаем Shift, (для того чтобы иконка появилась ровная) и растягиваем до нужных размеров. И такой же процесс повторяем со следующими фигурами. В конечном итоге вот что должно получиться:

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Блок: 10/18 | Кол-во символов: 790
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Логотип

Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:

Создаём группу «Нижнее меню» и новый слой.

Блок: 11/18 | Кол-во символов: 348
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Нижнее меню (Главное)


Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

Добавляем название рубрик, кликаем по инструменту «Горизонтальный текст» и пишем название рубрик, делайте как у меня:

Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:

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

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Блок: 12/18 | Кол-во символов: 780
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #eeeeee

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Блок: 13/18 | Кол-во символов: 483
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Контент

Переходим к разметке середины нашего будущего сайта. Нам нужно с помощью линейки разметить где будут находиться блоки постов и блок сайтбара (Правой колонки).

Сразу же нужно создать 2 отдельных группы:

  • Метки — в эту группу мы будем добавлять текст с размером наших колонок.
  • Контент — группа где будет находиться вся наша середина сайта.

В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

Добавляем линии с линейки как на рисунке, и отменяем выделение:

Получается что мы добавили две линии и получили область где будут находиться наши блоки с записями.

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

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

Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блок: 14/18 | Кол-во символов: 1281
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Блоки с записями

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

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

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

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Сейчас давайте добавим кнопку Далее. Она тоже очень простая. Выбираем инструмент «Прямоугольник со скругленными углами» задаём ему вот это цвет #0dbfe5 и радиус углов в 2рх. И рисуем кнопку размера который Вам понравится:

Теперь добавляем текст и смотрим, что у нас получилось:

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

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

Отменяем выделение и ищем середину круга с помощью линейки

Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.

В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.

Вот что должно получиться:

Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:

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

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Блок: 15/18 | Кол-во символов: 2153
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит 🙂 Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

И конечно же нужно добавить записи к нашим виджетам. Нужно выбрать инструмент «горизонтальный текст», затем установить размер в 16 пт. И сделать ка на рисунке ниже

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

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

Блок: 16/18 | Кол-во символов: 1387
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.

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

Вот и всё, друзья, у нс готовый макет, который уже можно верстать 🙂

Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.

Блок: 17/18 | Кол-во символов: 707
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Скачать

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

До скорых встреч.

Блок: 18/18 | Кол-во символов: 113
Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Кол-во блоков: 38 | Общее кол-во символов: 28122
Количество использованных доноров: 4
Информация по каждому донору:

  1. https://sellskill.ru/blog/oformlenie-saita/: использовано 3 блоков из 3, кол-во символов 4974 (18%)
  2. https://sitehere.ru/krasivoe-oformlenie-sajta-oformlyaem-krasivo-odnostranichnyj-sajt: использовано 2 блоков из 3, кол-во символов 3845 (14%)
  3. http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html: использовано 16 блоков из 18, кол-во символов 12713 (45%)
  4. https://lpgenerator.ru/blog/2013/01/11/15-genialnyh-primerov-glavnoj-stranicy-sajta/: использовано 7 блоков из 9, кол-во символов 6590 (23%)



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

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

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

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