Как сделать дизайн веб страницы. Дизайн интерьера своими руками: сам себе дизайнер. Нужен ли вообще уникальный дизайн

Создание отличного веб-сайта может казаться непосильной задачей, но если вы не будете забывать об основных принципах, процесс покажется вам интересным и занимательным. Хороший сайт должен не только достойно выглядеть! Мы расскажем вам основы и базовые принципы, которые помогут вам создавать сайты, на которые посетители захотят возвращаться снова и снова.

Шаги

Часть 1

Находим собственный дизайн

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

Используем готовый шаблон. Вы можете купить или найти в сети бесплатные готовые шаблоны веб-сайтов. Это уже написанный код, который вы можете просто использовать или адаптировать под свои нужды. Есть довольно много проверенных разработчиков качественных шаблонов, один из них это Wix.

Наймите веб-дизайнера. Если вам нужен профессионально сделанный сайт и безупречно работающий сайт - пожалуй, оптимальным вариантом будет нанять веб-дизайнера. Это, конечно, потребует определенных затрат, но не таких больших, как можно подумать. Вы можете найти начинающего дизайнера, разместив объявление в местном техническом ВУЗе. Их опыт поможет вам создать более удачный и профессиональный сайт.

Часть 2

Обдумываем основные идеи дизайна

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

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

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

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

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

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

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

4. Создавайте веб-сайт в универсальном формате. Используйте стандартный HTML и избегайте использования тегов, функций и плагинов, которые поддерживаются только определенным браузером.

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

5. Протестируйте ваш веб-сайт. Убедитесь, что все ссылки рабочие, а картинки отображаются корректно.

   • Желательно провести небольшой тест "юзабилити" (удобства для пользователя): предоставить доступ к сайту представителям вашей целевой аудитории, чтобы протестировать понятность и простоту использования дизайна сайта, и получить отзывы от участников теста.

Часть 3

Дизайн сайтов для мобильных устройств

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

   • Посмотрите примеры мобильных сайтов. Зачастую, вставив букву "m." вместо "www" в веб-адресе сайта, вы попадете на мобильную версию сайта. Вы можете сделать нечто подобное.

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

   Используйте "отзывчивую" верстку. Отзывчивая верстка - такой способ кодирования сайта, при котором он подстраивается под размер экрана, на котором отображается (вместо фиксированных размеров). Для достижения такого эффекта чаще всего применяется установка ширины колонки в процентном отношении, а не задавая ее в пикселях, но есть и более утонченные решения.

3. Отключите картинки фона, когда задаете параметры печати.
4. Используйте черный текст на белом фоне.
5. Уберите меню и ненужные изображения
1. Вы всегда можете разработать свой собственный шаблон сайта на основе собственных представлений о сайте, но иногда проще купить готовый шаблон.
2. Не утомляйте пользователей вычурной графикой. В 90-х годах было модно экспериментировать с Flash-анимацией, яркими цветами и фонами, устанавливать музыку сразу при загрузке страницы, но сегодня это просто отпугнет посетителей. Используйте простой фон, контрастный с цветом текста.
3. Вы можете использовать CSS (вложенные таблицы стилей) чтобы нужное задать расстояние между параграфами.
4. Для посетителей со слабым слухом и зрением вы можете использовать видео и аудио с титрами, указав их доступность. Таблицы являются эффективным способом передачи информации, но слабовидящие пользователи, которые используют программы для чтения экрана, не смогут прослушать информацию в последовательности столбцов.

Предупреждения

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

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

Урок получился очень большим и думаю будет полезным для вас.

Урок фотошоп как сделать дизайн сайта

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

Будем делать вот такой дизайн. У меня стоит Photoshop CS5 (английская версия, не люблю русские версии программ).

Если по какой то причине вы не хотите изучать урок и хотите просто скачать дизайн сайта в psd формате —

Если вам интересно самому/ой научиться делать такие дизайны этот урок для вас.

Для работы с дизайном нам понадобятся следующие файлы (скачать файлы одним архивом):

— фон с бабочками (для шапки сайта);
— шрифты;
— картинка c девушками;
— картинки для слайдера;
— иконки социальных сервисов;
— картинки для новостей;
— картинка рассылки;
— картинка счетчика.

Перед началом работы разделим наш дизайн на составляющие:

1. Фон и подложка для сайта;
2. Шапка сайта (состоит из логотипа и текста, тематической картинки, фона и основного навигационного меню)
3. Слайдер, в просторечье карусель;
4. Поиск по сайту;
5. Основной контент (сами новости);
6. Сайдбар — боковая колонка (блок последние новости, блок социальные сервисы, блок подписка, блок голосование)
7. Пейжер — постраничная навигация по сайту;
8. Футер — нижняя часть сайта.

Приступим к созданию нашего дизайна в фотошопе.

Настройка фотошопа

1. Открываем фотошоп и создаем новый документ File→New (Файл→Новый или CTRL+N – в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши — если такое действие будет встречаться в уроке еще раз, я буду использовать уже только горячие клавиши, которые позволяют экономить время в программе фотошоп).

В окошке я указал следующие параметры:

2. Перед началом работы произведем некоторые настройки фотошопа:

— устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).

— поставим галочку Auto-Select (Автоматически выбрать ) и в выпадающем меню выбираю Layer (Слои ) – данная настройка позволяет выбрать любой слой по клику на нем.

— отобразим палитру History (История) идем Windows→ History — с помощью этой палитры можно отменять предыдущие действия сделанные в фотошопе (также работают горячие клавишы Ctrl+Z и Ctrl+Alt+Z .

— включаем шкалу-линейку для документа, идем Views→Rules (Вид→Линейки или CTRL+R ) должна появиться горизонтальная и вертикальная шкала-линейка.

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

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

Создание фона и подложки для сайта

3. Открываем файл с фоном File→Open (Файл→Открыть или CTRL+O , фаил fon.jpg из архива). Полностью выделяем наш документ — нажимаем CTRL+A . Делаем из нашего рисунка фон в фотошопе, идем во вкладочку Edit→ Define Patter (Правка→ Определить узор), пишем название (я написал pattern ).

4. Переходим на наш основной документ, идем Edit→Fill (Правка→ Заливка, SHIFT+F5 ), в окошке выбираем Pattern , далее выбираем иконку с нашим патерном и нажимаем OK (заливаем наш фон созданным паттерном).

5. Теперь создадим белую подложку для нашего дизайна. Создаем новый слой, идем Layer→ New→Layer (Слой→ Новый→ Слой). Даем ему любое название и жмем OK . В палитре со слоями (Windows→ Layers, Окно→ Слои, F7 ) должен появится новый слой.

Сейчас нам помогут направляющие (щелкаем по линейке и тянем мышку вправо сделаем одну направляющую, а потом вторую — на глаз делаем что бы расстояние слева и справа было примерно одинаковым).

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

После этого берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M

(нажмите на картику для просмотра оригинала)

Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G ) или просто жмем Alt+Backspace . После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow (Отбрасывать тень) — цвет выбрал #5F1338 :

На этом с фоном закончим и перейдем к созданию шапки для сайта.

Делаем шапку для сайта

6. В начале создадим фон для шапки, из предложенного мною архива берем файл batterfly.jpg , открываем его в фотошопе File→Open . Теперь нужно перенести слой с картинкой в наш основной докумени. Для этого выбираем инструмент Move Tool , выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).

В появившемся окошке вваодим название слою (я назвал fon-header), чуть ниже в поле Document (Документ) выбираем документ в который нужно вставить слой, у нас woman-design-blogohelp.psd и нажимаем OK .

Слой должен вставиться ровно посередине документа.

Теперь передвинем наш слой в самый верх, это можно сделать 2 способами:

Первый способ: берем инструмент Move Tool , кликаем по нашему слою с бабочками и не отпуская кнопку мыши еще нажимем клавишу Shift (что бы слой двигался равно вверх) и после этого тянем мышку вверх и в нужном месте расспологаем наш слой.

Второй способ: выбираем слой с бабочками и слой с фоном в палитре Layers (F7)

После этого в настройках элемента Move Tool , выбираем иконку Align top edges (Выравнить обекты по верхнему краю):

В итоге у нас получилось:

(нажмите на картику для просмотра оригинала)

Я специально сделал фон с бабочками больше белого фона, сейчас расскажу как удалить лишние края слева и справа. Теперь выбираем мышкой наш слой с бабочками и берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область — выделяя наш ненужный кусок. После того как вы нарисовали область ее можно двигать клавишами Вверх, вниз, право, влево.

Далее просто нажимаем Delete и удаляем ненужную нам часть слоя. По анологии делаем с правым кусочком слоя. После этого для слоя fon-header , не снимая выделение со слоя, установим ему Opacity (Непрозрачность) в 20% .

7. Теперь сделаем небольшое затемние вверху шапки. Создаем новый слой — Shift+Ctrl+N . Даем ему любое название (у меня shadow-top ) и жмем OK .

После этого не снимая выделения со слоя shadow-top нажимаем Ctrl и не отпуская его кликаем по иконке слоя fon-header .

(нажмите на картику для просмотра оригинала)

После этого заливаем слой любым цветом — Alt+Backspace и идем в свойства слоя (кликаем два раза по слою). Снимае выделение, нажимаем Ctrl+H . Далее выбираем свойство Gradient Overlay (Заливка градиентом) и ставим такие свойства:

Теперь нужно слой с затемнением (shadow-top ) поместить ниже слоя (fon-header ). Жмем F7 , выбираем нужный нам слой, хватаем его мышкой и переносим на порядок ниже (так же можно менять порядок слоев используя клавиши Ctrl+} — опустить слой на порядок или Ctrl+{ — поднять слой на порядок).

Делаем логотип для сайта

8. Фон готов теперь давайте напишем наш текст и нарисуем логотип. Берем инструмент Horizontal Type Tool (Горизонтальный текст, T ) и щелкаем на шапке в том месте, в котором планируем написать надпись — у меня это WomanSite.ru , и пишем ее. Настройки для надписи я задал такие:

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

C помощью инструмента Move Tool (V), расположил текст в нужном мне месте.

Точно так же поступим и с текстом «Site.ru», только цвет поставим #797878 .

Сделаем обводку и тень нашему тексту. Кликаем два раза по слою и ставим галочки напротив Drop Shadow и Stroke (Обводка).

На этом с текстом все, переходим к логотипу.

9. Я хочу познакомить вас с основами рисования логотипов в фотошопе. Будем делать вот такой логотипчик (логотип сделан в виде завитушек, всего их 7 штук), на основе моего, который можно взять в заготовленном мною архиве.

Открываем в фотошопе файл logo.jpg , переносим картинку логотипа в основной документ и расплагаем рядом с текстом.

Слою с логотипом задаем Opacity (Непрозрачность) — 25% и отключаем видимость некоторых слоев — что бы не мешали (убираем иконку глазика напротив слоя в палитре Layers, F7 )

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

Кроме палитры Layers (F7), нам так же понадобится палитра Path (Пути). Что бы ее отобразить идем WIndows→Path (Окна→ Пути).

Берем инструмент Pen Tools (Перышко, P ) , поставим ему такие настройки:

после этого начинаем рисовать первую завитушку — один раз кликаем мышкой в нужном нам месте и получаем первый узелок нашего будущего пути или контура:

По аналогии делаем остальные 6 завитушек.

На этом создание логотипа закончено. С помощью стилей слоев закрасим каждую завитушку градиентом. Кликаем по нужному слою два раза и в настройках слоя Gradient Overlay (Градиентная заливка) заливаем его нужным нам градиентом.

В итоге у меня получилось.

После этого обьеденим все слои с нашими путями, выделяем все слои в палитре Layers и обьеденяем, нажимаем Ctrl+E .

Для полученного слоя применим эффекты с текстового слоя. Выбираем слой с текстом, кликаем правой кнопкой мыши и в открывшемся списке выбираем Copy Layer Style . Выбираем слой с нашим логотипом и вставляет эффекты, правой кнопкой и в меню выбираем Past Layer Style .

10. Теперь сделаем горизонтально тектовое меню. Нам понадобиться инструмент Raunded Rectangle Tool ()

(нажмите на картику для просмотра оригинала)

Теперь поверх напишем наш текст, все тем же инструментом Horizontal Type Tool #FFFFFF . Выставил такие настройки:

В итоге получилось.

(нажмите на картику для просмотра оригинала)

Теперь вставим нашу тематическу картинку, открываем файл ladies.png , копируем слой с нашей картинкой в основной документ и в палитре Layers переносим слой с картинкой ниже нашего меню. В итоге у меня получилась, вот такая симпатичная шапка для нашего сайта.

(нажмите на картику для просмотра оригинала)

Делаем слайдер для сайта

11. Теперь давайте сделаем дизайн слайдера для сайта. Создаем новый слой Ctrl+Shift+N . С помощью напрвляющих определим место под слайдер. Далее берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область.

(нажмите на картику для просмотра оригинала)

Заливаем ее любым цветом, после этого применим к этому слою градиентную заливку:

Напишем поверх текст «Лучшее на сайте».

12. Далее рисуем фон для нашего слайдера так же инструментом Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область. Создаем новый слой Ctrl+Shift+N и заливаем любым цветом (у меня #FFD9DE ).

13. Фон сделали, теперь сделаем подложку поверх фона, для этого уменьшим нашу выделенную область на 4 пикселя, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить).

Создаем новый слой Ctrl+Shift+N и заливаем ее белым цветом — #FFFFFF .

Снимаем наше выделение, нажимаем Ctrl+H. Слева у нас будет большая тематическая картинка с описанием, а справа будет 4 маленьких картинки с описанием.

Картинки можно трансформировать с помощью команды Edit-Free Transform Ctrl+T )

Картинки я подготовил (файлы slider-base-picture.jpg, slider-picture1.jpg, slider-picture2.jpg, slider-picture3.jpg, slider-picture4.jpg ), открываем их в фотошопе и переносим в наш основной документ. Распологаем как нам нужно, у меня получилось.

14. Создаем подложку для основной картинки — создаем новый слой Ctrl+Shift+N , рисуеv пряямоугольное выделение и заливаем его цветом #e15c6c . Для этого слоя поставим Opacity (Непрозрачность), поставим в 90%.

Поверх нее пишем наш текст.

После этого рядом с 4 картинками тоже напишем нужный текст.

На этом со слайдером все, переходим к следующему пункту — Поиск по сайту.

Делаем дизайн блока поиск по сайту

15. Создаем новый слой Ctrl+Shift+N . Чуть ниже слайдера рисуем прямоугольную область и заливаем #ccf8aa .

16. Поверх пишем наш текст «Поиск по сайту:», далее берем инструмент Raunded Rectangle Tool (), угол скругления ставим 5 пикслей и рисуем форму поиска. Поверх формы пишем текст «Введите слово или словосочетание…», после этого делаем кнопку для поиска.

Так же инструментом Raunded Rectangle Tool () рисуем нашу кнопку и поверх наш текст «Найти».

В итоге у меня получилось.

Делаем оформление блока с новостями

17. Теперь переходим к рисованию самих новостей на сайте. Фон блока будем делать с помощью путей. Берем инструмент Rectangle Tool и рисуем прямоугольную область. Эту область можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T ).

Теперь поверх напишем текст — загголовок для первой новости, все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал белый цвет #b14757 . Выставил такие настройки:

18. Далее открываем ранее заготовленные мною картинки для новостей (файлы news-picture1.jpg, news-picture2.jpg, news-picture3.jpg, news-picture4.jpg, news-picture5.jpg ). Берем первую и распологаем снизу под заголовком.

19. После этого пишем текст справа от картинки. Все тем же инструментом Horizontal Type Tool (Горизонтальный текст), я выбрал черный цвет #000000 . Только теперь мы не просто кликаем инструментом, а кликаем и не отпуская мыши тянем вправо.

20. Чуть ниже сделаем разделительную полоску. Полоска будет выполнена в виде пунктирной линии размером в 1 пиксель. Создаем новый слой Shift+Ctrl+N . Берем инструмент Pencil Tool (Карандаш). Цвет для рисования я выбрал: #c8c8c8 . Теперь давайте настроим наш карандашь, жмем F5 и ставим вот такие настройки:

И после этого рисуем нашу разделительную линию (с нажатой клавишей Shift ).

21. После этого по аналогии делаем наши остальные 4 новости.

Делаем оформление пейжера

22. Теперь давайте сделаем Пейжер — постраничнyю навигацию по сайту. Берем инструмент Rectangle Tool и рисуем прямоугольную форму. Что бы форма получалась квадратной, рисуем ее вместе с нажатой клавишей Shift . Так же форму можно трансформировать с помощью команды Edit-Free Transform (Правка — Свободная Трансформация, Ctrl+T ).

После этого напишем наш текст.

Делаем сайдбар

23. Нам осталось сделать Сайдбар (оформление боковой колонки сайта) и Футер (оформления низа сайта).

Начинаем рисовать первый блок «Популярное на сайте», берем инструмент Rectangle Tool и рисуем прямоугольную форму.

Для этого слоя применим эффекты Color Overlay (Заливка фоном) и Stroke (Обводка).

24. Сделаем шапку для блока, берем инструмент Rectangular Marque Tool (Прямоугольное выделение, M ) и рисуем прямоугольную область. Далее уменьшим нашу выделенную область на 1 пиксель, идем Select — Modify — Contact (Выделить-Изменить-Уменьшить). И в окошке поставим единичку и жмем ОК.

Создаем новый слой Ctrl+Shift+N и заливаем любым цветом.

Для слоя с фоном блока применим эффект Color Overlay (заливка цветом) цветом и Stroke (обводка) цветом #FFC486 .

25. Пишем текст наших популярных новостей.

Рядом с каждой новостью сделаем иконочку-маркер, откроем мой заготовленный файл marker.png название_файла.jpg, копируем слой с маркером в наш основной документ и инструментом Move Tool распологаем наш маркер рядом с названием новости, далее копируем (Ctrl+J ) этот слой 4 раза и распологаем в нужных нам местах.

26. Перейдем к следующему блоку с социальными кнопками. Блок делается по аналогии с предыдущим, только для шапки блога используем такой градиент. Текст пишем «Присоединяйтесь к нам в:».

а для фона такие эффекты: заливка белым цветом и обводка цветом #95d9ee .

Иконки берем из моего приготовленного архива: twitter.png, facebook.png, vkontakte.pn g.

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

27. Далее рисуем блок подписки. Делаем фон для блока, делаем шапку блоку, пишем текст, картинку берем из архива название картинки subscribe.jpg , делаем форму подписки и кнопочку «Подписаться» (форму мы уже делали когдарисовали блок Поиск по сайту) и распологаем как на рисунке.

На этом с блоками все, перейдем к созданию нижней части сайта — Футеру.

Рисуем футер для сайта

29. Создаем новый слой. В самом низу сайта рисуем прямоугольное выделение инструментом Rectangular Marque Tool (Прямоугольное выделение, M ), заливаем его любым цветом. Далее делаем этому слою градиентную заливку.

После этого сделаем разделительную полоску (между футером и пейжером). Ее тоже зальем градиентной заливкой.

(нажмите на картику для просмотра оригинала)

Получилось вот так.

(нажмите на картику для просмотра оригинала)

31. Чуть ниже сделаем полоску разделитель. Приблизим место под текстовым меню с помощью лупы. Создаем новый слой, берем инструмент Pencil Tool (Карандаш). Кисть ставим в 1 пиксель, цвет берем #f2cbcf и рисуем линию. Сразу под ней рисуем еще одну линию цветом #ffe4e6 .

(нажмите на картику для просмотра оригинала)

В итоге у меня получилось

(нажмите на картику для просмотра оригинала)

Ниже текстового меню расположим счетчик (картинку можно взять из архива — файл counter.jpg ) и чуть правее напишем наш копирайт.

(нажмите на картику для просмотра оригинала)

На этом все, как сумел расскрыл вопрос — .

(нажмите на картику для просмотра оригинала)

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

Давайте вместе изучать этот интересный и загадочный мир программы Adobe Photoshop.

Вы знаете, что такое Photoshop, тогда создать макет сайта не будет для вас проблемой. Если обобщенно говорить о том, как сделать дизайн сайта в Фотошопе, то необходимо только:

1. Создать новый документ.
2. Добавить фон.
3. Добавить картинки.
4. Настроить стандартные кнопки.
5. Наполнить блоки текстовым контентом.
6. Оценить результат.

Шаг 1

Начнем с самого начала. Просто запустите Photoshop и создайте новый документ (CTRL + N) с параметрами, указанными на скрине ниже.

Шаг 2

Теперь вы должны добавить подходящий узор на свой фон.

Layer Style->Blending options->Pattern Overlay .

Шаг 3

Вы хотите создать потрясающий дизайн? Тогда используйте сетчатую структуру для проектирования. Поместите сетчатую структуру в ваш дизайн сайта с интервалами 60px и 20px.

Шаг 4

Итак … теперь пришло время создать меню для будущего сайта. Используйте инструмент Rounded Rectangle для его создания (радиус — 3 px). Ширину для меню возьмем — 940 px, а высоту — 34 px.

Чтоб сделать это меню более привлекательным, перейдите в Blending Options->Drop Shadow . Используйте настройки, которые вы можете увидеть на скриншотах:

Blending options->Inner Shadow

Для меню выбран цвет #6bafff.

Шаг 5

Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool . Вы можете создать свой дизайн с любым шрифтом, который вам нравится. В примере использовался шрифт Aller . Размер 14px.

Шаг 6

Результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Используйте инструмент Rounded Rectangle (радиус — 3px), чтоб создать форму поиска со следующими параметрами: 124px и 26px.

Добавляем внутреннюю тень:Blending Options->Inner Shadow.

Создайте один прямоугольник с размерами 41px и 32px.

Blending Options->Drop Shadow

Blending Options->Inner Shadow

Blending Options->Color Overlay (цвет — #6bafff)

Теперь пришло время добавить привычный для функции поиска значок. Откройте Linecons Free->Vector Icons Pack и найдите там значок поиска.

И вот результат:

Шаг 8

Затем используем инструмент Rectangle (закругленный), чтоб создать квадрат (удерживая кнопку Shift) с размером — 16 px.

Выберите инструмент Pen Tool и отрежьте половину этого квадрата.

Нажмите Edit->Transform->Rotate , чтоб поместить этот треугольник на левую сторону прямоугольника. Выделите все слои кнопки Facebook и объедините их (Ctrl + E).

Blending Options->Inner Shadow:

Blending Options->Color Overlay (#c1cac5)

Теперь добавьте текст Перейти или т.п. на кнопку Facebook .

Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете использовать букву F , и выделить ее синим цветом (# 5a90e5).

Результат:

Шаг 9

Создайте новую форму: ширина 940px, высота 372px.

Как всегда, добавьте тень:

И границу: Blending Options->Stroke (20px, цвет # 6bafff).

Шаг 10

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

Шаг 11

Добавьте текст. Вы должны использовать тот же шрифт, который использовали для панели меню. Установите размер шрифта на 30px.

Поиграйте с настройками смешивания: добавьте белую тень, цветное наложение (# 6aaefd) и внутреннюю тень, чтоб получить вот такой результат:

Шаг 12

Заполните четыре столбца (ширина каждого — 240 px) текстовым контентом. Лучше добавить разный текст в каждый столбец.

Шаг 13

Step 14

Шаг 15

Шаг 16

Ваш следующий блок может быть разделом на любую тематику. Используйте инструмент Rounded Rectangle для создания квадрата (удерживайте нажатой кнопку Shift). Радиус — 3px, ширина и высота — 138px.

Перейдите в Blending options ->Stroke , чтоб ввести настройки: размер-20px, цвет # 919392.

Скопируйте и вставьте этот элемент 5 раз. Поместите эти квадраты с интервалом 20px и добавьте на них фото партнеров, сотрудников и т.д.

Шаг 17

Футер сайта так же важен, как и заголовок. Спросите себя: “Что вы хотите, чтоб ваши посетители делали, когда они дошли до нижней части страницы сайта?” Ответ, который вы получите, станет отличной отправной точкой для разработки футера вашего сайта.

Добавьте градиент, например # 3a8df1 — # 6bafff.

Шаг 18

Добавьте еще три блока в футер на свой выбор, учитывая ответ на вышеуказанный вопрос. Используйте шрифт Arial Regula r для заголовков (30px) и добавьте стили, например, как на скриншоте ниже:

Используйте шрифт Arial Regular для текста в разделах (12px).

Поместите несколько стандартных значков в один из разделов футера — RSS, Google Plus + или Twitter .

Ну, собственно и все! Результат:

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