Разработка дизайн макетов сайтов – Создание веб-сайта. Курс молодого бойца / Habr

Содержание

Как сделать макет или дизайн сайта в Photoshop

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? 🙂

Продолжение

В общем давайте уже делать.

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

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

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте 🙂

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Важно!

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

Группы

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

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

Верхнее меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Логотип

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

beloweb.ru

Макет сайта как средство выражения индивидуальности

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

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

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


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

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

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

Готовый и утвержденный вариант макета передается верстальщику. На его основе html-верстальщик «разрезает» эскиз на части и производит верстку его деталей с помощью тегов языка гипертекста.

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

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

1) Макет может быть представлен лишь в одном из двух графических форматов – psd или tiff.
2) При создании макета в редакторе каждый из элементов сайта должен быть расположен в отдельном слое (layer). Это во многом упрощает процесс редактирования изображения. Изменение одного элемента (слоя) никак не затронет другие элементы:


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


5) Нельзя использовать в качестве подложки громоздкие фоновые изображения – они сильно утяжеляют вес всей страницы, и увеличивает время ее загрузки.
6) Выравнивать положение всех слоев следует осуществлять только с помощью специальных направляющих.
7) При нанесении надписей в макете сайта в Фотошопе нужно пользоваться стандартными наборами шрифтов. Для эффектов искажения текста следует использовать отдельные изображения.
8) При отображении элементов форм нужно стараться придерживаться их стандартных пропорций.
9) Большое количество элементов «фурнитуры» окна (кнопки, иконки) размещают в отдельном файле, прикрепленном к макету.
10) Раздвигающиеся и выпадающие списки и меню должны быть представлены в двух состояниях (закрытом и раскрытом).

Теперь, когда ознакомились с тем, как должен выглядеть настоящий psd макет сайта, примемся за дело.

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

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

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

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


Также важно правильно определиться с размерами макета сайта в Фотошопе.

Например, в техническом задании указано, что это будет портал с фиксированной шириной посредине и резиновыми боками. Исходя из минимального показателя разрешения экрана (1024 на 768 пикселей), ширину макета делаем в 1003 пикселя. Остальные (21 пиксель) пойдут на область прокрутки (скроллинга). На резиновые боковушки отводится по 100 пикселей. Высота макета зависит от заданных размеров элементов дизайна. Средний показатель длины составляет 500-600 пикселей.


А теперь начинается самое интересное:

1. Создаем новый файл и задаем размеры будущего макета. Для этого заходим через меню «Файл» — «Новый». В появившемся окне задаем размеры и имя файла:


2. Затем создаем фон макета сайта. В панели инструментов выбираем инструмент «Градиент». В верхней панели устанавливаем его тип и цвет, и проводим градиентом по поверхности. Вот что получилось:


3. Размечаем поверхность макета с помощью направляющих. Сначала делаем разметку основных элементов макета (шапки, подвала, меню и боковин):


4. Оформление psd макета сайта начинаем с шапки.

  • Выделяем область под название сайта с помощью инструмента «Прямоугольная область»;
  • Затем делаем заливку ограниченного участка градиентом;
  • Инструментом «Текст» наносим название сайта:
  • После чего применяем к каждому текстовому слою эффект «Рельефность». В правом верхнем углу располагаем изображение логотипа сайта путем копирования слоя из другого изображения.

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



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

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


5. Создание макета сайта продолжим оформлением панели меню, расположенной сразу под шапкой.

  • Создаем заготовку кнопки меню в отдельном файле. Сохраняем ее в формате psd. Она пригодится в дальнейшем:
  • Затем наносим разметку расположения будущих кнопок с помощью направляющих. Изображение заготовки кнопки переносим копированием слоя или перетаскиванием на основной файл макета сайта. С помощью инструмента «Текст» пишем название кнопок меню:


6. Теперь примемся за боковые панели. Левая боковина будет немного шире правой (150 и 100 пикселей). Это делается с учетом того, что на правой половине потом можно будет разместить рекламу или дополнительные кнопки.

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


7. Теперь займемся нижней частью psd макета сайта. В отличие от боковых панелей сделаем ее с помощью инструмента «Заливка», а затем доведем любым из фильтров (пункт главного меню «Фильтр»):


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


Конечно, данный пример не претендует на звание лучшего.

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


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

А дальше из этого графического представления дизайна верстальщик делает макет сайта html. При этом сохраняются все пропорции элементов и частей сайта.

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

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

Верстка макета сайта сразу в html является неэффективной. Многие из элементов дизайна нельзя отобразить с помощью языка гипертекста. К тому же редактирование и разработка визуального представления происходит намного проще и быстрее.

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

www.internet-technologies.ru

16 инструментов для создания прототипов / Айкен corporate blog / Habr

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

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

Спонсор перевода: Айкен

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


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

В этой статье мы рассмотрим несколько новых решений по построению прототипов и каркасному моделированию.

1. Omnigraffle

Тип: Приложение OSX
OmniGraffle поможет вам быстро создать потрясающие графические документы путем соединения линий с фигурами, даже если они перемещаются, и предусматривает инструменты моделирования, файлы импорта и экспорта Microsoft Visio, а также простейшее построение диаграмм всего одним щелчком мыши.

2. ConceptDrawPro

Тип: Приложение Windows
ConceptDraw PRO — это полнофункциональная платформа диаграммного изображения, которая позволяет отображать, передавать и динамично представлять информацию.

3. Pidoco

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

4. BalsamiqMockups

Тип: Приложение AIR
Balsamiq Mockups — это инструмент построения каркаса, разработанный специально для воспроизведения проектов, нарисованных от руки, позволяя быстро и легко обновить свойства программ, таких как Microsoft Word.

5. Mockingbird

Тип: Онлайн
Mockingbird — это инструмент в режиме онлайн, позволяющий легко создавать, связывать, предварительно просматривать и передавать модели вашего веб-сайта или приложения.

6. Pencil

Тип: Дополнение Firefox
Проект Pencil предназначен только для построения свободного и открытого инструмента создания диаграмм и прототипов графического интерфейса пользователя, который может использовать каждый.

7. iPlotz

Тип: Онлайн / Flash-Flex
С помощью iPlotz можно создавать управляемые, активируемые кнопкой каркасы для создания образа веб-сайта или программного приложения. Вы также сможете получать комментарии от других лиц по поводу проектов, и как только все будет готово, управлять заданиями по построению проекта для разработчиков и проектировщиков.

8. ProtoShare

Тип: Онлайн
ProtoShare — это объединенный инструмент в режиме онлайн для построения каркасов веб-сайтов и динамичных, управляемых прототипов веб-сайтов, которые затем члены команды могут просматривать, а также комментировать в режиме реального времени.

9. HotGloo

Тип: Онлайн
Hot Gloo — это приложение для создания каркаса в режиме онлайн, которое в настоящее время также является бесплатной бета-версией. Вы можете перетаскивать и вставлять элементы, масштабировать, объединять, называть и переименовывать их. Также Вы сможете редактировать, комментировать и передавать любой элемент процесса разработки коллегам и клиентам.

10. MockFlow

Тип: Онлайн
MockFlow — это проектные, объединенные (в реальном времени) модели интерфейсов пользователя для вашего программного обеспечения и веб-сайтов.

11. Gliffy

Тип: Онлайн
Бесплатное программное обеспечение для построения каркаса Gliffy дает возможность простого создания каркасов веб-сайтов и передачи веб-моделей. Вы можете также экспортировать свой каркас для будущего использования в других приложениях.

12. Cacoo

Тип: Онлайн
Cacoo — это удобный для пользования онлайн-инструмент для рисования, который позволяет создавать множество диаграмм, таких как карты сайта, каркасы и сетевые диаграммы.

13. Creately

Тип: Онлайн / Flash-Flex
Мощный и простой для использования диаграммный онлайн-инструмент, который работает прямо в вашем веб-браузере. Благодаря интуитивному интерфейсу пользователя и встроенным свойствам совместной работы, Creately облегчает работу с командами.

14. LovelyCharts

Тип: Онлайн
Lovely Charts — это приложение для создания диаграмм, позволяющее создавать профессиональные диаграммы всех видов, такие как блок-схемы, карты сайтов, бизнес-процессы, организационные структуры, каркасы и многое другое…

15. Mockup Builder

Тип: Онлайн / Silverlight
Mockup Builder — это новый взгляд на решение старой проблемы создания прототипов и предоставления набросков клиентам.

16. LucidChart

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

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

habr.com

20 правил создания качественного макета сайта

Перевод статьи дизайнера Claudio Guglieri с описанием процесса проектирования макета сайта от начала до конца.


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

Этот короткий список советов, проверенных на моем опыте, поможет вам в работе над следующим макетом для сайта.

1. Перенесите свои мысли на бумагу

1sketch

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

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

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

3. Добавьте сетку вашему PSD-файлу

step3

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

4. Выберите типографику

type1

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

5. Выберите цветовую гамму

colourschemegenerator

На протяжении всего рабочего процесса выбора шрифтов, вы должны работать над цветовой гаммой всего пользовательского интерфейса (цвет фона, текста и пр.). Цвета нужно выбирать в зависимости от функциональности элемента. Обратите внимание на такие сайты как Facebook, Twitter, Quora, или Vimeo.

6. Разделите макет

breel

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

7. Реорганизация установлена

7rethink

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

8. Бросьте себе вызов

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

9. Обращайте внимание на детали

9lovedetails

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

10. Отнеситесь к каждому компоненту так, будто вы представляете его на конкурсе

10contest

Должен признать, этот совет не мой. Я слышал это на Fantasy Interactive и был потрясен тем, на сколько четко и правдиво он прозвучал. Каждая деталь должна быть спроектирована как самая лучшая.

11. Оттачивайте свою работу

11sharpen

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

12. Убирайте свои PSD

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

13. Работайте, надеясь на лучшее, но будьте готовы к худшему

mobile

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

14. Будьте зацикленными на дизайне, пока не возненавидите его.

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

15. Не тратьте много времени на концепции до того, как поделитесь ими с клиентами

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

16. Дизайнер! Будь лучшим другом разработчика!

rafa

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

17. Растолкуйте все, как будто я четырехлетний ребенок

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

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

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

19. Следите за дизайном в ходе процесса

Если вы работаете в агенстве, то наверняка уже поняли, что такое пытаться справляться с новым проектом, когда предыдущий только что закончили. Вопреки распространенному мнению, ваша работа не заканчивается после сдачи PSD и styles-листов. Если вы действительно заботитесь о клиентах и своем результате, пообщайтесь со своими разработчиками на счет проекта. Может понадобиться помощь с пикселями и пр. Убедитесь, что все идеально.

20. Следите за своим прогрессом

20showcase

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

Автор: Claudio Guglieri
Источник: lopart

Фото на обложке: ShutterStock

infogra.ru

PSD макеты сайтов – 50+ современных дизайнерских концепций для вашего успешного бизнеса ⋆ Inbenefit

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

PSD-макет представляет собой готовый концепт будущего сайта, созданный дизайнером. Плюс в том, что все файлы в таком макете можно настраивать как угодно в Photoshop, и ограничений при этом, по сравнению с HTML-шаблонами и шаблонами под CMS, существенно меньше. Зачастую слои в таких концепциях организованы очень удобно, чтобы пользователь смог без проблем настроить дизайн под свои нужды. Еще один плюс для вас заключается в том, что один этап разработки уже можно смело пропустить. Это экономит время, деньги и творческие силы. У вас, по сути, уже будет готовая идея сайта, реализованная не на бумаге, а в реальности. Согласитесь, довольно неплохо.

Преимущества не могут быть без изъянов, и самым главным из них является необходимость иметь не только общие навыки веб-разработки, как в случае с HTML-шаблонами, но и навыки верстки. Причем не базовые, а самые что ни на есть глубокие. В отличие от HTML-верстки вам придется порезать и сверстать весь сайт с нуля, написать для него код, а потом адаптировать под нужную платформу. Если у вас нет должного опыта, без привлечения специалиста никак не обойтись. А уж если сравнить с WordPress шаблонами, то PSD макеты сайтов на их фоне явно проигрывают. WordPress это вообще самая простая и популярная в мире система, которая нацелена на элементарную веб-разработку в пару простых шагов. Собственно, новичкам я рекомендую не заморачиваться и сразу выбирать именно шаблоны WordPress или в крайнем случае шаблоны Joomla или Drupal.

PSD макеты сайтов – 50+ дизайнерских концепций для вашего бизнеса

Кому подойдут PSD макеты сайтов:

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

Если все это о вас, гордо представляю вам свою коллекцию Photoshop-шаблонов, созданных и выложенных профессиональными веб-дизайнерами на передовой площадке компании Envato из Австралии Themeforest. Это такой себе магазин PSD макетов, в котором правда больше всего WordPress-шаблонов (больше 11 тысяч). Но сегодня акцент у нас будет больше на PSD-макетах. Новичкам я буду стараться предлагать по ходу статьи различные альтернативные варианты, так что вам эта статья тоже будет в какой-то мере интересна. Для удобства шаблоны разбиты по категориям для быстрого поиска.

PSD макеты для бизнеса

Appnox – качественный шаблон для лендинга

Appnox — это набор шаблонов PSD для landing page. Appnox имеет чистый, профессиональный и креативный дизайн. Вы можете использовать шаблон как лучший способ представлять и продвигать свои мобильные приложения, продукты, программное обеспечение и все, что вы хотите. Вы можете легко редактировать эти PSD файлы, они настраиваются на 100%. Все формы могут быть изменены без потери качества. Этот PSD шаблон идеально подходит для конвертации в HTML, WordPress, Joomla и другие CMS.

Посмотреть подробнее / Скачать

Babsha – шаблон PSD для бизнеса

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

Посмотреть подробнее / Скачать

Biznes – макет для веб-сайта вашего бизнеса

Biznes — это PSD шаблон для бизнеса и финансовых консультантов. 19 PSD-файлов хорошо организованы и имеют соответствующие названия, поэтому вам будет очень легко изменить дизайн вашего сайта. Файлы содержат легко настраиваемые области виджетов для интеграции лучших решений для любого бизнеса. Все макеты можно адаптировать к различным потребностям, чтобы они помогли представить ваш контент в наиболее привлекательной форме. Вы можете легко настроить Biznes даже без солидных навыков владения Adobe PS.

Посмотреть подробнее / Скачать

TheGem – креативная универсальная концепция для различных применений

PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 01PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 01

В начало обзора логично вписывается популярная тема Photoshop с поддержкой версии на WordPress для новичков. Она подойдет для любого бизнеса и применения. Ее можно использовать для корпоративного сайта, портфолио, блога и интернет-магазина. Больше 200 файлов со слоями с 50+ главными страницами.

Посмотреть подробнее / Скачать

Onne – стильная тема с чистым оформлением для компании или стартапа

PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 02PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 02

Красивое универсальное решение, соответствующее нуждам различных клиентов: владельцев и директоров компаний, студий, бюро, учреждений и даже блогеров. В теме 54 PSD-файла с 22 концепциями домашней страницы, 13 макетами портфолио и 10 – блога. Используются бесплатные стильные шрифты Google.

Посмотреть подробнее / Скачать

AI – креативное решение для любого бизнеса

PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 03PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 03

Тема с 19 уникальными сайтами создана на базе мощной сетки, которая позволит использовать ее для различных целей. С ней можно создать бизнес-сайт, сайт студии, портфолио, блог, интернет-магазин и личный сайт. С темой в комплекте идет 53 красиво оформленных и легко настраиваемых Photoshop-файла.

Посмотреть подробнее / Скачать

Industrial – промышленный макет PSD для серьезного бизнеса

PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 04PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 04

Макеты сайтов Industrial подойдут для любого вида промышленного и производственного бизнеса в различных сферах: строительство, машиностроение, судостроение, нефтегаз и так далее. Всего в комплекте 22 PSD-файла со стандартными универсальными страницами со строгим дизайном. В демо использованы красивые шрифты и иконки.

Посмотреть подробнее / Скачать

На сайте InBenefit можно найти отличные шаблоны WordPress для производственной отрасли и различных промышленных сфер.

Medical Aid – PSD-макет медицинского направления

PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 05PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 05

Медицинский шаблон Medical Aid можно использовать для сайта любой компании, центра или организации, работающей в медицинской отрасли. Они прорисованы красиво, четко и просто. Всего веб-дизайнеры подготовили 17 PSD-файлов с 2 вариантами главой страницы на выбор и 15 стандартными страницами. Сетка Bootstrap имеет размер 1170 пикселей.

Посмотреть подробнее / Скачать

Любителям верстки доступны медицинские шаблоны HTML. А новичкам, как всегда, советую обратить внимание на шаблоны для медицины под WordPress.

TravelTrip – туристический шаблон турфирмы, туроператора или сайта онлайн-бронирования

PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 06PSD макеты сайтов – 50 дизайнерских концепций для вашего бизнеса 06

Это

inbenefit.com

для чего нужен макет, и с чего начать работу

Создание дизайна сайта в Photoshope: знакомство с редактором и его возможностями

От автора: добрый день, друзья! Сегодня у нас на очереди непростая и очень объемная тема — создание дизайна сайта в Photoshope. В целом, все, что касается создания рабочих макетов сайтов, это практические уроки, и в интернете информации об этом крайне мало. Умельцев много, много рекламы и платных курсов, вебинаров… но, по сути, бесплатно делиться секретами и тонкостями никто не хочет. Типа, попробуйте, помучайтесь, и убедитесь, что «без меня» вам не справиться.

В этой статье я постараюсь ответить на самые распространенные вопросы, осветить, так сказать, общее направление. Уверен, мои советы вам пригодятся!

Photoshop и веб-дизайн

С создания функциональных макетов будущих сайтов начинается 98% проектов веб-дизайна, и практически все они сейчас рисуются в Фотошопе. Что же такое макет?

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

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

Создание дизайна сайта в Photoshope: знакомство с редактором и его возможностями

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

шапка;

расположение меню;

навигация;

цветовая гамма;

шрифты и т. д.

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

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

С чего начать разработку макета?

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

Как я предлагаю подойти к разработке дизайна сайта в photoshop, буквально по шагам.

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

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

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

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

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

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

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

Дизайн-макет в Photoshope

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

Документ

Стандартный макет имеет ширину 960 пикселей. Открываем «Документ» — Новый — задаем размеры. 1200*1500 пикселей будет достаточно, разрешение оставляем 72.

Создание дизайна сайта в Photoshope: знакомство с редактором и его возможностями

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

:)

Теперь выделяем весь документ (клавиши Ctrl+A), нам нужно определить область в 960 пикселей и добавить направляющие.

В меню программы выбираем «Select/Выделение» — «Transform Selection/Трансформировать выделенную область». В свойствах устанавливаем значение ширины — 960 и фиксируем рабочую область макета. Направляющие оставляем на границах выделения.

:)

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

Заходим «Select/Выделение» — «Transform Selection/Трансформировать выделенную область», и уменьшаем выделение до 920 пикселей. Макет автоматически разместится по центру, и у вас получится отступ в 20 пикселей с каждой стороны. При изменении ширины не забывайте переустанавливать направляющие.

2. Шапка и текстура

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

выделенная область заливается 1 цветом;

в меню выбираются стили слоя;

«Gradient Overlay/Наложение градиента».

Объем можно добавить подсветкой:

создается новый слой;

выбирается мягкая кисть размером 600 px;

для кисти устанавливается цвет #19535a;

в 1 клик в нужной части шапки рисуется блик.

Расскажу еще про одну функцию — текстуру. Из любого цвета можно сделать текстурную картинку:

инструментом «Pencil Tool/Карандаш» рисуем 2 точки;

видимость фонового слоя временно отключаем;

через меню «Edit/Редактирование» — «Define Pattern/Определить узор» получаем готовую текстуру.

Приблизительно так:

:)

:)

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

Теперь самое время открыть Фотошоп, который для веб-дизайна давно стал незаменимым помощником, и сделать набросок какого-нибудь простенького макета из 2–3 цветов и шапки :) Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу — залог успеха! Желаю вам удачи. На этом у меня все! Подписывайтесь на обновления, и вы не пропустите самый интересные статьи. Пока, до новых встреч!

Создание дизайна сайта в Photoshope: знакомство с редактором и его возможностями

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться :)

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

webformyself.com

Разработка дизайн-макета сайта

Перечень статей раздела Разработка дизайн-макета:

Статья 1 сборника 2016-10-18

Определяем способ создания дизайн-макета

  • Какие существуют варианты дизайна
  • Дизайн на заказ
  • Дизайн на основе платных готовых шаблонов
  • Дизайн на основе бесплатных шаблонов
  • Самостоятельное выполнение дизайна

Здравствуйте уважаемый посетитель!

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

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

  1. дизайн на заказ;
  2. использование платных готовых шаблонов;
  3. использование бесплатных шаблонов;
  4. самостоятельная разработка.

В зависимости от того, по какому пути пойти, в большой степени будут зависеть все последующие действия…

Статья 2 сборника 2016-10-20

Делаем эскиз и готовим картинки для дизайн-макета

  • Рисуем эскиз сайта
  • Подбираем необходимые элементы
  • Выполняем разметку макета

Здравствуйте уважаемый посетитель!

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

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

Поэтому, если кто-то сочтет, что можно что-то делать по-другому, то в этом не вижу ничего особенного, каждый делает то, что считает для себя логичным и удобным…

Статья 3 сборника 2016-10-24

Создаем новый документ в фотошопе и переносим на него картинки

  • Создаем новый документ композиции шапки дизайн-макета сайта
  • Переносим картинки заготовок

Здравствуйте уважаемый посетитель!

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

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

Это можно сделать, используя размещенные в сети интернет различные обучающие материалы по работе с графическими редакторами, а также воспользоваться, имеющимися здесь, на сайте бесплатными видеокурсами, для Adobe Photoshop — Фотошоп для начинающих (бесплатная версия)», для GIMP — Видеосамоучитель GIMP.

Как ранее отмечалось, здесь будет показано создание дизайн-макета с использованием редактора Adobe Photoshop CC. Но, аналогично можно все это выполнять и в программе GIMP…

Статья 4 сборника 2016-10-26

Создаем композицию шапки дизайн-макета сайта

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

Здравствуйте уважаемый посетитель!

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

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

В первую очередь нам нужно разблокировать слой «Фон», так как без этого мы не сможем вносить в него какие-либо изменения. Это можно сделать разными способами, но мы воспользуемся очень простым — для этого лишь только кликнем левой кнопкой мышки по значку замка, находящегося в этом слое (слои находятся в правой части, называемой областью палитр фотошопа)…

Статья 5 сборника 2016-11-02

Создаем дизайн-макет веб-страницы

  • Меню
  • Ротатор
  • Основное содержание и сайдбар
  • Подвал
  • Исходные файлы сайта

Здравствуйте уважаемый посетитель!

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

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

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

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

Поэтому, в нашем случае, данные блоки приведены лишь в качестве примера использования инструментов графического редактора для формирования будущего внешнего вида сайта, без использования в верстке самих графических элементов…

Статья 6 сборника 2017-03-07

Создаем и размещаем фавикон

  • Выбор способа создания фавикона
  • Установка плагина в Фотошоп
  • Дизайн фавикона
  • Сохранение на сайте
  • Подключение к стран

rabota-vinete.ru

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *