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

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

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

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

Изучив данный урок вы научитесь самостоятельно делать дизайн сайта в 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.

Уникальность дизайна является крайне желательным, но вовсе не обязательным условием для достижения высокой посещаемости ресурса. Большинство посетителей визиток, блогов или магазинов разбираются в дизайне на уровне «ух ты!» или «нормально…». И в этом нет ничего плохого.

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

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

Просто взгляните на сайт Википедии. Минимум дизайна. Максимум функциональности. И это прекрасно!

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

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

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

Не нужно впихивать невпихуемое. Иногда приходит пора остановиться.

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

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

Нужен ли вообще уникальный дизайн?

Сразу отметим, что мы говорим об интерьере ресурсов, созданных при помощи конструкторйов сайтов. Так проще или сложнее получить уникальный дизайн с их помощью по сравнению с теми же CMS? И да, и нет. Зависит от выбранной платформы.

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

Мы даём вам готовый шаблон, а вы даже не меняете на нём стандартные фотографии. Не надо так.

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

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

Способы придания шаблону уникальности

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

Естественно, мы рекомендуем использовать уникальную графику: изображения, логотип, иконки и прочее. Это, так сказать, джентльменский набор хорошего сайта. Также не лишним станет и правка шрифтов по умолчанию. В А5 можно выбрать любые Google-шрифты. Главное – не переборщите с их количеством. 2-3 достаточно, не больше. Всё должно быть легко читаемо и вписываться в общую концепцию дизайна.

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

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

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

• тип меню (вертикальное/горизонтальное)
• стиль меню
• фон или цвет пунктов
• шрифт
• размер в обычном состоянии и при наведении курсора и прочее.

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

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

Какой бы вы элемент ни выбрали, ему можно придать уникальный вид. В компоновке страниц наши пользователи вообще ничем не ограничены. Можете тестировать на своём сайте любые дизайнерские тренды.

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

Выводы

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

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

В А5 очень много возможностей по изменению стандартного вида шаблонов. Вы сможете получить именно такой результат, который хотите. Система искусственно практически никак не ограничивает полёт фантазии. Но тут важно наличие вкуса. Люди, не склонные к делам творческим, могут потратить время, так и не получив желаемого.

Для визиток, магазинов и блогов вполне достаточно в меру уникального шаблона. Свои цвета, шрифты, логотипы, картинки – всё, большего и не требуется. Если только вы сами не пожелаете чего-то экстраординарного.

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

1 голос

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

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

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

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

Вся правда о том, как на самом деле делаются сайты

Итак, давайте разберем по шагам как происходит создание сайта. На самом деле, любой сайт – это набор картинок и букв.

Сперва в дело вступают дизайнеры. Они создают рисунок будущего портала в Photoshop. Чуть ниже вы может посмотреть не слишком удачный пример. Я накидал его за 15 минут, без учета реальных размеров, правил, схем. Но суть вы, я думаю, уловили.

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

После того, как рисунок сделан, в дело вступают верстальщики. Они делают раскадровку (раскройку) этого рисунка.

Все элементы сохраняются для веб. Для этого есть специальная кнопка.

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

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

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

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

За что клиенты готовы платить больше

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

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

Многие начинающие дизайнеры пытаются прыгнуть выше головы, придумать особый подход, креативные штуковины – это нафиг никому не нужно. Существуют правила, они постоянно меняются и им необходимо следовать. Откуда берутся тренды? Два слова: «маркетинговые исследования». В крупных корпорациях, как правило, прежде чем поставить чуть левее форму заказа на сайте анализируют мнения тысячи людей.

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

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

Так за что же готовы платить клиенты? За ваши знания! Чем лучше вы владеете правилами, понимаете вкусы читателей, разбираетесь в психологии и умеете все это использовать – тем выше ваша цена.

Техническая сторона вопроса – ерунда. Несколько видео уроков и вы овладеете тайными знаниями сотворения дизайна, но для получения высоких гонораров придется трудиться. Как именно? Давайте рассмотрим в следующей главе.

Два шага к успеху

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

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

• Изучение фотошопа.

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

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

Если искать на YouTube или статьи на сайтах: что-то уловишь, узнаешь, а о чем-то даже не подумаешь. Курс он все-таки структурирован. Основы фотошопа и работу с движками можно изучать вот отсюда: https://webdesign2.ru .

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

Что нам тут предлагают? Курс разделен на 6 частей: техническая сторона (обработка, коррекция, свет, тени и так далее), основы фотошопа и практика (работа с wordpress и joomla), веб-дизайн (секреты и мастер-классы ).

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

После того как вы поймете, как работать с фотошопом, останавливаться не стоит.

• Секреты дизайнерского искусства.

Теперь вам надо понять основы, правила и тренды. Это поможет реализоваться как профессионалу. Большая часть основной информации есть в том курсе, ссылку на который я вам дал.

Дополнительно я бы порекомендовал полазить по профессиональным сайтам, на которых вы можете найти сведения о том, что сейчас в моде. К этому моменту, я думаю, вы уже «заболеете» темой и без труда найдете полезные и качественные ресурсы, которые предоставят вам информацию. Кстати, много интересного вы можете найти тут: https://creativshik.com/ .

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

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

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

До новых встреч. Желаю удачи в ваших начинаниях.

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

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

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

1. Главная
2. Страница с разделом
3. Страница с содержимым категории
4. Страница со статьёй
5. Страница с формой регистрации
6. Страница с результатами поиска
7. Страница с результатами голосования
8. Страница с редактированием профиля

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

Теперь о том, что делать дальше. Вот Вы составили список ключевых страниц и примерно представляете, что там должно быть. Что делать дальше? Если Вы являетесь дизайнером и знакомы с Photoshop , то проблем нет - делайте дизайн. А если из Вас дизайнер не очень хороший, то лучше это дело перепоручить опытным людям. Вот на этом сервисе: http://free-lance.ru полно дизайнеров, там Вы без проблем найдёте подходящего.

Теперь о стоимости дизайна. Дизайн главной страницы стоит, как правило, от 1500 до 2000 рублей . Дизайн всех остальных страниц (если их дизайн не слишком сильно отличается от главной) стоит в районе 500-1000 рублей . Безусловно, можно найти и дешевле, и дороже, а я называл лишь средний диапазон. Таким образом, дизайн данного сайта стоил бы 5000-9000 рублей .

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