Как сделать красивый сайт

Как сделать красивый сайт

Авторы и источники / Правообладателям

Красивый сайт с удобным интерфейсом — ваша визитная карточка.

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

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

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

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

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

6 простых и действенных советов для “прокачки” вашего сайта

1. Используйте белое пространство

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

Почему не нужно так делать?

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

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

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

2. Увеличьте скорость загрузки страниц

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

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

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

Исследования маркетологов показали, что даже задержка в 2 секунды при загрузке сайта заставляет большинство пользователей (целых 87%!) покинуть сайт. Поэтому так важно проверить скорость загрузки своего сайта и, при необходимости, улучшить показатели.

3. Правильно оформляйте призыв к действию

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

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

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

Следующая важная вещь — слова, которые будут использованы на ваших кнопках. В них обязательно должен содержаться глагол или призыв к выполнению пользователем какого-то действия (“Подпишись”, “Узнай больше” и так далее).

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

4. Добавляйте в контент гиперссылки

Размещая в тексте гиперссылку (ссылку на другую страницу сайта), вы, скорее всего, ожидаете, что пользователь по ней перейдет. А вы уверены, что пользователь вообще заметит вставленную вами ссылку?

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

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

Длина ссылки тоже важна. Она должна состоять из одного-двух слов, в крайнем случае трех. Например, ссылка с надписью “Кликните здесь” соберет больше переходов, чем ссылка с текстом “Чтобы узнать больше, нажмите тут”.

5. Не пренебрегайте наличием иконок

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

6. Добавьте картинок (но в меру, пожалуйста!)

Пользователи интернета становятся все более требовательными к потребляемому ими контенту.

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

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

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

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

Как сделать хороший и красивый сайт: стильное создание

Стильный современный сайт можно получить, воспользовавшись системой управления сайтами UMI.CMS.

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

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

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

Потому, если вас интересует создание стильных сайтов, выберите для себя систему управления сайтами UMI.CMS. Согласно рейтингу Tagline, платформа UMI.CMS является самой качественной коробочной системой управления в России. Удобство, надёжность и интуитивно понятный интерфейс помогут вам сделать ваш сайт красивым и современным

Как сделать красивый сайт?

– Хочу красивый сайт для своей компании! – говорит клиент менеджеру проектов веб-студии.
– Конечно, Ваш сайт будет прекрасным. У нас работает самый лучший дизайнер! – слышит он в ответ.

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

На вопрос, какой сайт хочет клиент, он всегда ответит что-то вроде: «Красивый, эффектный, быстрый, качественный» и так далее. Этот ответ вполне закономерен, ведь, если бы заказчик выпалил что-то вроде «Мне не нужен красивый сайт» – это выглядело бы как-то странно, верно?

Почти каждая нормальная веб-студия способна сделать красивый сайт (ну как минимум аккуратный и не отталкивающий) – это довольно просто, если вы хотя бы несколько лет занимаетесь веб-дизайном. Но вот покорить сердце клиента получается не каждой компании.

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

Причина эта проста. Если заказчик – предприниматель (или бизнесмен – подставьте удобное слово сами), то главная цель для него заключается в извлечении прибыли. Таким образом цель сайта его компании – извлечение прибыли. Если сайт приносит деньги, то клиент доволен. Здесь всё просто.

Если сайт приносит деньги, то клиент доволен. Здесь всё просто.

Кто виноват?

Если возникли разногласия между клиентом и студией, то самое простой шаг – обвинить клиента. Ведь это именно он не сказал истинную цель сайта. Если веб-студия придерживается такой точки зрения, то я не думаю, что она когда-нибудь «выстрелит».

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

Что делать?

Как вести себя клиенту, который потратил деньги и время на создание красивого, но совершенно не продающего сайта? Есть два варианта:

• Начать заново и создавать новый сайт, но уже с правильной целью.
  Как бы ни был этот вариант хорош, но он имеет два недостатка: очередные большие расходы (время и стоимость разработки), компетентность исполнителей: создать красивый сайт могут многие, а вот продающий – единицы.
• Довести текущий сайт «до ума».
  Иными словами, провести комплексный аудит сайта . Это то, что я рекомендую. Это экономит время, деньги и приносит гарантированный результат. Почему? Читайте в этой статье .

Теперь я бы хотел обратиться к предпринимателям:

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

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

Всё, что вас разделяет от больше прибыли – это от 10 до 60 дней и от 20 000 до 150 000 рублей инвестиций в сайт.

Разработка красивого веб-сайта с нуля. Как создать веб-сайт

С Вами Виктор. Сегодня я хочу предоставить Вашему вниманию еще один интересный перевод с сайта //net.tutsplus.com/ . Данная статья Вам покажет как можно нарисовать красивый сайт, имея практически нулевые знания в программе Photoshop.

Автором данной статьи является Marko Prljic.

Вам захотелось создать красивый сайт, но Вы даже не представляете, как это делается? Хотите узнать, как создать веб-сайт? Честно говоря, несколько лет назад это и со мной произошло. Путешествуя по сети, я встречал множество красивых сайтов, и мне самому всегда хотелось уметь разрабатывать такой дизайн для сайтов. Сейчас я уже это умею и готов научить и Вас, как это сделать! В сущности, для этого требуются некоторые навыки работы в Photoshop и внимание к деталям. В этом руководстве я буду обращать внимание на те незначительные на первый взгляд детали, из которых складывается красивый дизайн сайта. Запускайте Photoshop и приступим к делу!

Автор: Marko Prljic

Редакция: Рог Виктор

Привет, меня зовут Марко, я веб-дизайнер из чудесной страны Хорватии. Я разрабатываю амбициозные, классно выглядящие, современные сайты. Также я пишу статьи для Themeforest и Graphicriver, и люблю писать разные руководства. В свободное от создания сайтов время я просто общаюсь со своими детьми или обдумываю очередной Большой Проект. О, как и все остальные, я веду блог на Twitter.

Шаг 1 – Скачайте 960 Grid System Template

Почти все дизайны я разрабатываю на основе блочной системы 960 Grid System. Поэтому нам сначала нужно скачать эти блочные шаблоны для Photoshop, которые можно найти на официальном сайте 960.gs. Просто распакуйте zip-архив и найдите в нем PSD-шаблоны. Вы увидите шаблоны двух типов: один – 12_col, второй – 16_col. Как видно по названию, отличаются они тем, что один состоит из 12 колонок, а другой из 16. Чтобы пояснить чуть точнее, допустим, что Ваш дизайн будет состоять из трех вертикальных блоков, тогда Вам нужно взять шаблон 12_col, так как 12 кратно 3. А если Ваш дизайн будет состоять из четырех вертикальных блоков, тогда Вы может брать в качестве шаблона как 12_col, так и 16_col, потому что и 12, и 16 кратно 4. Далее в руководстве мы рассмотрим это на примере.

Шаг 2 – Определяем структуру

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

Шаг 3

После того, как мы определились со структурой сайта, можно двигаться дальше. Откройте Ваш шаблон 16_col.psd. Перейдите в меню «Изображение» > «Размер холста» (Image > Canvas size). Установите размер 1200px по ширине и 1700px по высоте. Установите цвет фона #ffffff.

Шаг 4

Далее выберите инструмент «Прямоугольник» (Rectangle) и нарисуйте прямоугольник по всей ширине холста и высотой примерно 80px. Залейте его цветом #dddddd.

Шаг 5

Создайте новый слой над прямоугольной областью и установите для этого слоя режим «Перекрытие» (Overlay). При нажатой клавише Ctrl щелкните мышью по слою с прямоугольником. Он будет выделен. Выберите мягкую кисть (soft brush) толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке. Таким образом, Вы создадите красивый и легкий световой эффект. Кроме того, можно связать эти два слоя.

Шаг 6

Новый слой. Выберите снова инструмент «Прямоугольник» (Rectangle) и нарисуйте тонкий темно-серый прямоугольник, как показано на рисунке.

Шаг 7

Выбрав инструмент «Прямоугольник» (Rectangle), нарисуйте большой блок примерно на 500px ниже верхнего прямоугольника. Сделайте его высотой 575px и наложите на него линейный градиент в границах оттенков от #d2d2d0 до #ffffff, с углом -90° и масштабом 100%.

Шаг 8

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

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

Шаг 9

Создайте новый слой и нарисуйте большой прямоугольник высотой 400px. Он будет использоваться для шапки нашего сайта. Наложите на него красивый голубой градиент от оттенка #2787b7 до #258fcd.

»Видите, какой нежный переход оттенков?

Шаг 10

Добавьте темно-синюю линию толщиной 1px вдоль нижней границы шапки, наложите эффект тени (Drop shadow). Для наложения тени используйте режим Умножение (Multiply), непрозрачность (Opacity) 65%, угол (Angle) -90°, смещение (Distance) 1px, размер (Size) 6px. Далее создайте поверх новый слой и нарисуйте под синей линей еще одну линию толщиной 1px белого цвета. Таким образом, мы создадим отчетливую границу для нашего блока с основным контентом. В принципе, этот прием оформления границ Вы можете применять для каждого блока Вашего проекта, только с другими оттенками.

Шаг 11

Создайте новый слой и с помощью инструмента «Прямоугольник» (Rectangle) нарисуйте в верхней части холста прямоугольную область высотой 50px, как показано на рисунке. Она будет служить для панели навигации.

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

Шаг 12

Настало время заняться навигацией. Используйте инструмент «Прямоугольник с округленными углами» (Rounded Rectangle), установите радиус 5px. Нарисуйте прямоугольник, сделайте заливку цветом #f6a836 и наложите следующие эффекты:

— Внутренняя тень (Inner Shadow) – цвет: #ffffff, Режим: Перекрытие, Прозрачность: 60%, Угол: 120 °, Смещение: 7px, Размер: 6px.

— Внутреннее свечение (Inner glow) – Режим: Нормальный, цвет: #ffffff, Размер: 4px, остальные параметры оставьте по умолчанию.

— Обводка (Stroke) – Размер: 1px, Положение: Внутри, цвет: #ce7e01.

Теперь выделите этот прямоугольник с помощью Ctrl и щелчка мыши. Перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract), и введите в появившемся окне 1px.

Создайте сверху новый слой, установите режим «Перекрытие» (Overlay) и наложите эффект, описанный в Шаге 5, только в этот раз используя кисть меньшего размера. Далее добавьте текст для навигации. Я использовал для ссылок навигации шрифт Arial, все буквы заглавные и без сглаживания.

Шаг 13

Теперь давайте создадим поле поиска. С помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) с радиусом 5px создайте поле для поиска по правой стороне размеченной сетки шаблона, в середине верхней серой полосы, созданной на Шаге 4. Добавьте к слою следующие стили:

— Внутренняя тень (Inner Shadow) – цвет: #000000, Режим: Умножение (Multiply), Непрозрачность (Opacity): 9%, Угол (Angle): 90°, Смещение (Distance): 0px, Размер (Size): 6px.

— Обводка (Stroke) – Размер (Size): 1px, Положение: Внутри (Position: inside), цвет: #dfdfdf.

Я добавил текст «Search» и светло-серую кнопку «Go». Выглядеть это должно так.

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

Шаг 14

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

Снова создаем эффект, описанный в Шаге 5.

Используйте мягкую кисть меньшего размера. Я в данном случае выставил размер 45px.

Шаг 15

После добавления логотипа и подзаголовка наш сайт должен выглядеть вот так.

Шаг 16

Сейчас вернемся к упорядочению слоев, о котором мы упоминали выше. Создайте новую пустую папку слоев и назовите ее «top_bar». Переместите в нее все слои графики из верхней части шаблона (логотип, подзаголовок, поле поиска, кнопку регистрации, панель навигации и элементы фона).

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

Шаг 17

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

Выберите большую мягкую кисть размером 600px, цвет #ffffff, и нажмите несколько раз в области под навигационной панелью. Кроме того, для получения более глубокого эффекта мы можем переключить на черный цвет и сделать то же самое в нижней части шапки. Попробуйте!

Шаг 18

На этом шаге я объясню Вам, как я сделал отражение для изображений в шапке. Найдите пару изображений на свой выбор, я использовал скриншоты браузера Safari с изображениями двух других моих шаблонов. Уменьшите один из них и поместите под вторым, который больше. Создайте дубликат обоих слоев и с помощью инструмента «Свободное трансформирование» (Free Transform) переверните сначала одно изображение, затем второе. Сдвиньте оба изображения на несколько пикселей вниз. Теперь сделайте выделение снизу с внешней стороны до середины первого перевернутого изображения с помощью инструмента «Прямоугольная область» (Rectangular Marquee). Перейдите в меню «Выделение» > «Модификация» > «Растушевка» (Select > Modify > Feather) и в появившемся окне введите 30px или больше. У Вас должно получиться такое же выделение, как показано на рисунке. Нажмите несколько раз кнопку Delete, чтобы получилось красивое затененное отражение оригинального изображения. Повторите этот же шаг для второго изображения.

Сейчас, чтобы сделать оба изображения немного выступающими, создайте новый слой и установите для него режим «Перекрытие» (Overlay). Наложите эффект, описанный в Шаге 5.

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

Шаг 19

Посмотрев на итоговое превью нашего дизайна, Вы заметите красивые вкладки в блоке с основным контентом. Для создания подобных вкладок нам необходимо будет выполнить еще несколько дополнительных шагов, но это определенно того стоит. Сперва с помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) нарисуйте большую прямоугольную фигуру высотой 70px и радиусом углов 10px или больше, если посчитаете нужным. Сейчас нам надо избавиться от нижних округленных углов и сделать их идеально прямыми. Выберите инструмент «Область (горизонтальная строка)» (Direct Selection) и установите его на границе фигуры. Щелкните по точке вертикальной оси и, удерживая клавишу Shift, оттяните ее вниз, пока она не достигнет уровня горизонтальной оси. Уже неплохо, но угол все еще деформированный. Заметен небольшой хвостик. Нажмите на него и сдвиньте вверх до уровня горизонтальной оси.

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

Шаг 20

Выберите инструмент «Линия» (Line) толщиной 1px.

Шаг 21

Начертите разделители серого цвета, удерживая клавишу Shift.

Шаг 22

Разместите какие-нибудь иконки, заголовки и описание для каждой вкладки. Я использовал иконки Рэя Ченга, которые можно скачать с сайта WebAppers.com. Как правило, одна вкладка всегда активна, в то время как другие остаются неактивными. Чтобы это четко было видно в нашем дизайне, нам нужно найти способ это показать. Я обесцветил остальные иконки и уменьшил непрозрачность для заголовков и текста, оставив первую активную вкладку цветной и яркой.

Шаг 23

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

Вот так должно выглядеть выделение.

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

Шаг 24

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

Добавьте векторную маску (vector mask), нажав на маленькую иконку внизу палитры слоев.

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

Наконец, уделим внимание деталям. Начертите серую линию толщиной 1px вдоль нижней границы панели вкладок. Добавьте снова маску на слой, как описано выше, и большой мягкой кистью удалите края линии слева и справа. Теперь у нас есть красиво затененная линия, которая подчеркивает тень под нашими вкладками.

Вот так должны выглядеть наши вкладки.

Шаг 25

Пришло время заняться дизайном основного содержания нашей первой вкладки. Нам потребуются красиво оформленное изображение, симпатичный заголовок и какой-нибудь текст. Сначала займемся оформлением изображения. Мне показалось, что неплохо бы нарушить прямолинейность нашего дизайна созданием красивого эффекта сложенных в стопку фотографий. Чтобы этого добиться, нарисуйте белый прямоугольник с рамкой серого цвета и толщиной 1px, и наложите на него легкий эффект отбрасывания тени.

Далее сделайте дубликат слоя и поверните его на несколько градусов с помощью инструмента «Свободное трансформирование» (Free Transform). Повторите этот шаг еще раз.

Импортируйте подготовленное изображение и поместите его над белыми прямоугольниками. Не волнуйтесь, если изображение выходит за границы блока – мы это исправим. Выделите верхний прямоугольник, перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract) и в появившемся окне введите 5px. Выделив слой с изображением, нажмите иконку «Быстрая маска» (Quick Mask) внизу палитры слоев. У Вас получится эффект красивой картинки с рамкой, как показано на рисунке выше.

Вот так у Вас должен выглядеть порядок слоев.

Шаг 26

Не забывайте следить за порядком. Создайте папки слоев и распределите по ним слои на своей палитре. У меня это сделано вот таким образом.

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

И еще немного организации слоев.

Шаг 27

Я решил, что этот блок должен быть большим, поэтому я разместил его в большом поле сразу после главного блока. Сначала рисуем большой светло-серый прямоугольник высотой примерно 220px с рамкой серого цвета толщиной 1px.

Далее рисуем еще один прямоугольник, светлее и меньше предыдущего на 10px с каждой стороны. У него также должна быть светло-серая рамка толщиной 1px.

Добавляем какой-нибудь текст, и все готово!

Шаг 28

Теперь займемся нижним колонтитулом. Нарисуйте большой темно-серый прямоугольник высотой 400px.

Шаг 29

Наложите световой эффект точно так же, как мы описывали в Шаге 5.

Шаг 30

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

Шаг 31

Создайте самый нижний блок, в котором будет продублирована навигация. Можно скопировать верхний прямоугольный блок с навигацией, поместить его внизу и установить для него высоту около 40px. Поместите его в самом низу Вашего холста. Пожалуйста, имейте в виду, что Вам возможно потребуется расширить холст для этой цели, чтобы на нем уместилась вся графика. В этом случае откройте в меню «Изображение» > «Размер холста» (Image > Canvas size) и установите высоту, при которой весь проект умещается на холсте.

Шаг 32

Снова уделим внимание мелким деталям. Добавим белую линию толщиной 1px вдоль верхней границы нижнего блока навигации, придав тем самым красивый эффект для его рамки.

Шаг 33

Наполним колонтитул содержанием и красиво упорядочим его по нашей сетке.

Шаг 34

Напоследок распределите все Ваши слои по папкам. У меня это сделано так.

Дизайн

Вот такой дизайн у нас получился в итоге, с парой изменений для разных страниц. Готовые PSD-дизайны, конечно же, можно приобрести на сайте ThemeForest.net.

Пара слов в заключение

Надеюсь, Вам понравился этот урок, и Вы узнали несколько новых приемов. Теперь настала Ваша очередь создавать новые великолепные дизайны. Не забывайте, что уделяя особое внимание мелким деталям, Вы сможете проектировать красивые веб-сайты, используя всего два или три инструмента в Photoshop. Здорово, не правда ли?

Автор: Marko Prljic

Редакция: Рог Виктор.