Как сделать дизайн сайта в фотошопе?

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

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

Шаг 1

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

Шаг 2

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

Layer Style->Blending options->Pattern Overlay.

Шаг 3

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

Шаг 4

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

Чтоб сделать это меню более привлекательным, перейдите в Blending Options->Drop Shadow

Blending options->Inner Shadow

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

Шаг 5

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

Шаг 6

Все кнопки меню являются ссылками, и вы должны показать, что они активны. Поэтому возьмем, к примеру, create — это прямоугольник (цвет, который для него использовался: # 5a90e5).

Результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Используйте инструмент

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

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

Blending Options->Drop Shadow

Blending Options->Inner Shadow

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

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

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

Шаг 8

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

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

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

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

Blending Options->Inner Shadow:

Blending Options->Color Overlay

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

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

Результат:

Шаг 9

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

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

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

Шаг 10

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

Шаг 11

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

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

Шаг 12

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

Шаг 13

Создайте кнопку Читать дальше с помощью инструментов, которые мы использовали ранее. Blending options->Inner Shadow, Drop Shadow, Color Overlay (# 919392).

Step 14

Добавьте текст Читать далее или что-то подобное на кнопку.

Шаг 15

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

Шаг 16

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

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

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

Шаг 17

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

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

Шаг 18

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

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

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

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

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

Дизайн сайта в фотошопе

Один из самых популярных редакторов, используемых при разработке дизайна сайта – это Adobe Photoshop («фотошоп»). Этот редактор позволяет добиться множества красивых визуальных эффектов, реализовать практически любую идею дизайнера.

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

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

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

Начинать создание шаблона дизайна сайта следует с создания нового документа в фотошопе. Ширина документа задается в пикселях, в соответствии с требуемым разрешением, например, 1024 пикселя. Высоту документа можно взять произвольно, ведь в браузере страница сама «растянется» по вертикали, если высота ее содержимого превышает высоту экрана. Стандартное разрешение для шаблона дизайна сайта – 72 пикселя на дюйм, цветовой режим необходимо установить в значение «RGB», 8 бит.

При помощи команды View — New guide (Показать-Новые направляющие) можно разметить страницу в соответствии с модульной сеткой. Это позволяет добиться точного совпадения размеров эскиза и конечного документа. Кроме того, можно воспользоваться уже готовыми сетками, разработанными под разные разрешения мониторов. Как правило, такие сетки предлагаются авторами совершенно бесплатно.

Следующий шаг – создание фона страницы. Фон может быть однотонным, для этого при помощи команды Paint Bucket Tool (Заливка) с установленным значением Foreground (Фоновый цвет) следует заполнить пространство документа выбранным цветом. Кроме того, фоном может служить какое-либо изображение или же узор. Узором пространство макета также заполняется при помощи команды Paint Bucket Tool, но с установленным значением Pattern (Узор).

Теперь можно приступать к созданию элементов страницы. Начинают обычно с «шапки» — верхнего блока, в котором содержится название сайта и логотип. Цвет и форма «шапки» могут быть произвольными, например можно сделать «шапку» прямоугольной или со скругленными углами, в цвет фона или же контрастной. «Шапка» выполняется во всю ширину документа, ее высота – строго фиксирована.

Создать необходимое прямоугольное выделение можно при помощи инструмента Rectangular Marquee Tool (Прямоугольное выделение). Изменяя параметр Feather этого инструмента можно задать необходимое скругление для углов.

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

Отдельным шагом можно выделить создание кнопок и иконок для дизайна сайта. В зависимости от идеи дизайна, они могут быть строгими деловыми или же, наоборот, веселыми. Кнопки, как правило, создаются при помощи все того же Rectangular Marquee Tool. Задать кнопкам другую, непрямоугольную форму, можно с помощью инструмента Pen Tool (Перо). С помощью Pen Tool можно создавать и различные иконки произвольной формы.

Надписи на кнопках и иконках выполняются при помощи инструмента Horizontal Type Tool (Горизонтальный текст) или Vertical Type Tool (Вертикальный текст). В настройках инструмента можно задать любую необходимую гарнитуру шрифта и его размер, задать выравнивание текста.

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

С помощью команды Save for Web&Devices необходимо сохранить разрезанное изображение. В диалоговом окне следует выбрать тип файлов HTML&images и сохранить файл с именем «index.htm» или «index.html». Теперь шаблон дизайна сайта состоит из файла index.html и каталога images, в котором находятся нарезанные кусочки макета. С помощью «Блокнота» или любого html-редактора файл index.html редактируется при необходимости.

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

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

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

Как изменить дизайн сайта?

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

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

Теги:

Как создать шаблон сайта в фотошоп

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

Продолжение

• Как сверстать шаблона сайта из PSD в HTML и CSS
• Как простой HTML шаблон сверстать под WordPress

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

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

Как видите, что шаблон получился не сложный, естественно это блоговый шаблон, который позже мы будем верстать в 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 файл. Скачивайте, и смотрите если что то не поняли.

Скачать

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

6,002 просмотров всего, 3 просмотров сегодня

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

• Заказать ресурс в web-студии. Вы получите качественный продукт с продуманным юзабилити и чистым кодом. Он будет работать без багов на любом устройстве: от ноутбука вашей бабушки до айфона последней серии. Однако такое вложение требует денег, которые не всегда есть в наличии.
• Нанять фрилансера. Найти хорошего дизайнера на фрилансе – все равно что искать спонсоров для стартапа. Работа настоящего специалиста стоит дорого (см. пункт выше), а тратить время на постоянные переделки, доработки и споры с дилетантом, наверняка, не очень хочется.
• Воспользоваться онлайн-конструктором. Не рекомендуем, т.к. такие сайты практически не поддаются SEO-продвижению, а перспективу годами платить за целевой трафик из контекстной рекламы радужной не назовешь.
• Заняться созданием сайта своими руками с нуля. Владея минимальными навыками верстки работы в Фотошопе, вы сможете легко нарисовать простой макет. А затем сверстать и выложить его в Интернет.

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

Как в Фотошопе сделать дизайн сайта

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

Прежде, чем начать: подготовительный этап

Создайте файл будущего макета и придумайте для него понятное имя. Для этого нажмите «Файл – создать».
Размеры, которые предлагает Фотошоп по умолчанию, не подойдут. Создаем файл 1024?720 пикселей, а затем сохраняем его, включаем линейки (Ctrl+R) и активируем сетку (Ctrl+Э). Если все сделано правильно, вы увидите перед собой лист, расчерченный как школьная тетрадка в клеточку:

На готовом макете сайта клеток не будет. Линии видны только во время работы с макетом и используются для того, чтобы ровно располагать элементы будущего шаблона. Сетку можно настроить самостоятельно (тут: «Редактирование – Настройки – Направляющие, сетка и фрагменты») или скачать готовое решение в Интернете. Мы рекомендуем использовать сетку BOOTSTRAP? для удобства дальнейшей верстки и адаптации

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

Направляющих нужно две, и расстояние между ними должно составлять не более чем 1003 пикселей (для дисплеев расширением 1024 х 720).

Начинаем рисовать

Создание красивого сайта – это больше чем про искусство. Это наука Usability, помноженная на опыт разработки интернет-проектов для разных тематик. Но порядок выполнения работ в Фотошопе практически одинаков.
Для начала нужно задать фон. И не обязательно рисовать картинку самостоятельно – можно скачать бесплатное изображение с любого из стоков. Не рекомендуем использовать текстуры с мелкими выделяющимися деталями: текст на таком фоне будет нечитабельным, а мелкие фрагменты отвлекут внимание пользователя от контента.
Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V). Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).

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

Делаем шаблон для сайта

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

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

Разберем на примере хедера (header) и создания меню сайта. Создадим группу, назовем ее «Хедер» и в ней создадим подгруппу «Верхнее меню» с новым слоем «Фон». Для этого нажимаем на иконку в правом нижнем углу страницы:

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

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

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

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

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

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

В Фотошопе нарисовать несложный дизайн сайта под силу даже новичку

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

Немного о создании сайтов

Расшифровка некоторых терминов.

• CSS (Cascading Style Sheets) и HTML (HyperText Markup Language) — компьютерные языки, которые используются при создании веб-ресурсов. Если открыть исходный код любой страницы в интернете, там будут HTML-тэги.
• Вёрстка — компоновка и монтаж материалов из макета, превращение его в html-шаблон. От этого зависит, как располагаются объекты, красиво ли они выглядят в общей композиции, удобно ли читать текст и тому подобное.
• Слои — части макета. Они вместе составляют общую картину. Но их можно редактировать и перемещать отдельно друг от друга.
• Тело — место, где находится контент. Вокруг него может быть фон.
• Фрейм (Frame) — элемент страницы. Блок с какой-то информацией, картинкой, формой.

Сделать потрясающий сайт с нуля может только профессионал. Для этого нужно разбираться в веб-дизайне и знать HTML. Так как готовый макет надо ещё грамотно сверстать.

Но есть и более простые способы. Существуют онлайн-сервисы и программы, которые автоматически преобразуют .psd (формат файлов Photoshop) в HTML и CSS. Вам останется лишь правильно собрать шаблон.

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

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

• Одностраничный. Все элементы, контент, всё наполнение ресурса находится в одном месте. На одной странице. Чтобы просмотреть содержимое сервиса, не надо переходить по ссылкам или открывать новые вкладки. При этом сам сайт может быть сколь угодно большим. В нём поместится и маленькая рекламная брошюра, и огромный роман на 600 листов.
• Многостраничный. Соответственно, включает много страниц. Это могут быть, например, «Главная», «Форум», «Гостевая книга», «Ответы на часто задаваемые вопросы», «Контакты». Для каждой из них нужно делать макет. Ещё потребуются навигация и карта сайта: отдельный раздел со ссылками на все части сервиса. Чтобы пользователь мог быстро найти нужную ему закладку.
• «Резиновый». Меняет размер в зависимости от разрешения экрана. Растягивается вместе с окном обозревателя. Надо заранее рассчитывать, как будет выглядеть сайт. Если при ширине 1300 всё отображается нормально, то в 900 пикселях часть статьи может «уехать» за границы фрейма, изображения встанут не так, как надо, а flash-анимация закроет форму для ввода.
• Фиксированный. Тело сайта не меняет размер. Самый лёгкий и практичный вариант. Чтобы страница выглядела цельной, и при расширении окна не было «пустого» места по краям, можно сделать резиновым фон.

Макет

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

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

• Создайте новый документ (Файл — Создать). Размеры подбираются с расчётом на маленькие мониторы или низкое разрешение: 1024?720 пикселей. Это ширина «информационной» части, а не всего рисунка. Если вы хотите страницу в 1100 пикселей, то надо делать документ шириной от 1300 пикселей. Длина, по сути, не фиксирована — она зависит от того, сколько контента вы хотите разместить на ресурсе. Это рекомендации, а не правила. Можете собрать большой макет, если хотите.
• Включите линейки. Нажмите Ctrl+R или перейдите в меню Просмотр — Линейки. Это измерительная шкала. Она появляется снаружи рисунка. Без неё придётся прикидывать размеры и расстояния «на глаз», что не очень хорошо скажется на конечном результате. Настроить эту функцию можно в меню Редактирование — Установки — Единицы измерения и линейки. Там лучше поменять сантиметры на пиксели, чтобы работать с одним параметром, а не высчитывать, сколько точек в одном дюйме.
• Также следует активировать сетку. Просмотр — Показать — Сетка или Ctrl+Э (отключить её можно также). Это некий аналог тетради в клетку. В Фотошопе будут отображаться вертикальные и горизонтальные линии. На самом рисунке они не появятся. Их можно увидеть только при редактировании. Эта функция нужна, чтобы ровно расставлять элементы шаблона. Кому-то удобнее работать с сеткой, кому-то без неё. Лучшее её включить, если вы впервые делаете сайт.
• Чтобы её настроить, перейдите в Редактирование — Установки — Направляющие, сетка и фрагменты. Там можно выбрать размер клеток, а также цвет и тип линий (сплошная, пунктирная, из точек).

Пример современного дизайна сайтов

• Установите направляющие. Между ними будет находиться основной контент-ресурса — фиксированное тело сайта. А за ними — резиновый фон. Чтобы это сделать, нажмите Просмотр — Новая направляющая. В блоке «Ориентация» отметьте пункт «Вертикальный». В поле «Положение» напишите, на каком расстояние от левого края будет находиться объект. Ориентируйтесь по шкале линейки.
• Нужны две направляющие — справа и слева от тела страницы. Расстояние между ними должно составлять максимум 1003 пикселей для дисплеев с разрешением 1024?720. Можете указать другую ширину. Но большие ресурсы неудобно просматривать на маленьких мониторах.
• Почему 1003, а не 1024? Если сайт надо пролистывать («скроллить») вниз, в браузере будет вертикальный ползунок для прокрутки. Размер этого ползунка — примерно 21 пиксель. Если его не учитывать, появится горизонтальный скролл. И посетителю ресурса придётся двигать страницу вправо-влево, чтобы увидеть всю информацию.
• Тело должно быть в центре холста.

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

• Для начала вашему макету нужен фон. Его можно сделать самостоятельно или скачать из сети. Существует много ресурсов с бесплатными текстурами. Не ставьте на сайт изображения, на которые распространяются авторские права. Не стоит брать яркий или контрастный фон. Лучше не использовать текстуры с большим количеством мелких выделяющихся деталей. Они будут отвлекать посетителя от тела страницы.
• Если просто открыть рисунок в Фотошопе, он окажется на новой вкладке, а не добавится в макет. Выделите весь фон. Для этого нужно сочетание клавиш Ctrl+A или инструмент «Выделение» (он находится на панели слева). Скопируйте его и вставьте в шаблон.
• Также эта опция доступна, если нажать Редактирование — Вставка.

• В списке справа внизу появится новый слой. Кликните по нему правой кнопкой мыши, чтобы посмотреть возможные действия. В меню «Параметры слоя» можно изменить его имя. В «Параметры наложения» находятся основные настройки изображения. Можно сделать ему свечение, тиснение, глянец, обводку, градиент. Если выберите какую-то опцию, изменения сразу отобразятся в Фотошопе. Есть набор готовых стилей. Так из стандартной текстуры создаются оригинальные дизайнерские решения. И ничего дополнительно рисовать не надо.
• Кнопка «Фильтры» есть в строке меню. Там вы найдёте разнообразные имитации (пастель, акварель, карандаши), стилизации, текстуры, эскизы, блики, размытие.
• Можно выбрать однотонный фон. Цвет зависит от ваших личных предпочтений. Но лучше не делать его чёрным или ядовитым. Подойдут постельные и мягкие тона или прозрачные холодные (например, светло-серый, нежно-голубой).
• После текстур можно собирать сам сайт. Вот тут вам предоставлена свобода для творчества.
• Чтобы добавить какую-то фигуру (отрезок, квадрат, овал), нажмите на соответствующую кнопку справа. Она будет иметь вид и название того объекта, который в данный момент выбран для рисования. Например, «Инструмент Эллипс», «Инструмент Многоугольник». В Фотошопе количество фигур ограничено. Но их можно найти в интернете, скачать и установить через меню Редактирование — Управление наборами. В поле «Тип» укажите, коллекцию каких объектов вы загружаете.
• В разных версиях программы эти фигуры вызываются по-разному. Либо кнопкой в виде маленького чёрного треугольника (она справа), либо пиктограммой в виде шестерёнки, либо пунктом «Форма растровой точки» (она под строкой меню). Объекты можно комбинировать, группировать, делать из них композиции.
• Чтобы создать текстовый фрейм, нажмите на кнопку в виде заглавной буквы «T». Потом выберите место, где должны располагаться символы, кликните туда и напечатайте то, что вам нужно.
• Каждый элемент лучше ставить на отдельный слой. Так будет удобнее перемещать и редактировать, не «задевая» весь сайт. Чтобы добавить этот объект, перейдите в Слои — Новый.

• Чтобы спроецировать изображение в заранее выбранную область, вначале выделите её, а потом откройте Редактирование — Специальная вставка. Там будут опции «Вставить вместо» и «Вставить за пределами».
• Можно часть одного рисунка перенести на новый слой. Для этого надо выделить её, щёлкнуть по ней правой кнопкой мыши и выбрать «Вырезать на новый слой».
• С фигурами, надписями и изображениями доступны те же опции, что и с фоном: эффекты, фильтры и так далее.
• В Фотошопе существует ещё много инструментов для рисования: кисти, перья, карандаши.

Можно сделать качественный ресурс даже из простых геометрических объектов.

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

Как превратить макет в html-файл?

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

Его можно отдать верстальщику, который сделает качественный html-шаблон. Но есть и другой вариант. Воспользоваться сервисами для конвертации PSD-файла в HTML и CSS.

• Psd2Html Converter. Платный онлайн-сервис. Быстро конвертирует формат Photoshop в шаблон интернет-страницы. С этим ресурсом даже из некачественного макета можно создать приличный сайт.
• HTML Panda.
• PSDCenter
• 40 Dollar Markup.

Конструкторы

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

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

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата .PSD.

В качестве примера создадим дизайн сайта на рисунке ниже.

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

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

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

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

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

5. Сразу делаем подложку сайта. У нас это градиентная заливка оранжевого, переходящего в жёлтый цвет. На панели слева выбираем инструмент Градиент.

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

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

В результате манипуляций градиент получился следующим.

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

6. Сохраняем подложку в файл. То, что мы сделали, должно отображаться под основной страницей и занимать всё окно браузера целиком — своего рода подложка. Например, ширина сайта — 800 пикселей, а разрешение экрана у пользователя гораздо больше. Оставшееся пространство (всё, кроме тех самых 800px, которые будут заняты блоком страницы) заполнится градиентным фоном.

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

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

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

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

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

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

12. Пишем имя и слоган сайта. Уже известным нам инструментом Горизонтальный текст дополняем уже почти созданный логотип надписями.

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

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.

20. Прописываем текст в основной части страницы, используя всё тот же инструмент Горизонтальный текст.

21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt. Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T).

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

24. Уменьшаем высоту страницы. Получилось так, что все элементы уже прорисованы, а лишнее место ещё осталось. Вот тут-то нам и пригодились осмысленные имена слоёв. Среди прочих выбираем фоновый слой (у нас он так и называется — Фон) и с помощью инструмента Трансформация уменьшаем высоту нашего белого прямоугольника до нижнего края футера страницы.

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

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

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

• Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
• Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
• Вёрстка сайта с нуля 2.0 — полноценный платный курс;
• Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Как сделать дизайн сайта в фотошопе с нуля – Блог opengs.ru

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

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

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

Создание и подготовка файла проекта

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

1. Дать имя своему макету, у меня на примере “mysite“
2. Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
3. Единицы измерения установи в “Пикселях“. Разрешение “72” Пиксели/дюйм.
4. Жми “OK”. И сохраняй его как psd “Файл > Сохранить как…” в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент “Прямоугольник“,  установи в параметрах инструмента значение “Пиксели”  и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным).

Теперь слой с прямоугольником нужно разместить по центру холста. и установить направляющие по краям. Направляющие имеют полезное свойство прилипать к границам активного слоя.

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения “Прямоугольная область“. А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

Получится вот так:

Все первоначальная настройка макета окончена.

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

Сохрани, то что получилось “Файл -> Сохранить для Web -> PNG-24”

Теперь открой в проводнике или файловом менеджере папку с сохраненным файлом:

1. Правый клик на файле
2. В контекстном меню “Открыть с помощью”
3. Выбери браузер которым пользуетесь (у меня hrome).
4. После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
5. Кликни один раз для отображения изображения в полный размер.

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

Создание шапки сайта

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

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

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

Что бы добавить свой логотип (если его нет, то читай Как сделать логотип онлайн) нужно:

1. Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
2. Выбрать инструмент “Перемещение” (это стрелочка напоминающая курсор)
3. Открой вкладку с логотипом
4. Наведи курсор на изображение логотипа
5. Нажми и не отпускай левую кнопку мыши
6. Тащи изображение на вкладку с макетом
7. Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
8. Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

Если все правильно логотип скопируется новым слоем на холст с макетом.

Теперь нужно подогнать размер логотипа (комбинация клавиш ctrl+t) таким образом, что бы он был не сильно большим, но и не был мелким и выровняй его левый край по направляющей. Что бы проверить правильно ли подобран размер сохрани свой макет в формате png-24 и открой в браузере.

Теперь я создаю новую группу слоев и называю ее телефоны. При помощи инструмента “Текст” пишу “Горячая линия” и номер телефона организации “+7 (3435) 25-60-60”. Я разместил телефон в шапке по двум причинам. Первая это наличие телефона с правой стороны в шапке уже привычно пользователям, так сделано на большинстве сайтов компаний. Вторая, если это сайт компании, то многие посетители почитав, то что их интересуют наверняка захотят позвонить и им не придется открывать страницу контакты. Я так же подобрал подходящий на мой взгляд шрифт, размер и выровнял телефон по правой внутренней направляющей.

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

Создание дизайна главного меню сайта

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

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

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

И на последнем шаге я добавил hover эффект (эффект при наведении курсора мыши) для одного из пунктов меню.

Создание дизайна левого меню сайта

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

1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне “Символ”

Я использовал 14 размер и стандартный для Windows шрифт “Verdana”

Старайся использовать стандартные шрифты по максимуму. Так как при просмотре сайта пользователь используется шрифты своей системы.

Получилось вот такое меню:

Дизайн содержимого сайта

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

У любой страницы должен быть заголовок и собственно сам контент. Для начала я установлю две направляющие. Первую горизонтальную по верхнему краю меню. Вторую вертикальную на расстоянии 20px от левого края левого меню.

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

Получилось вот что:

Дизайн подвала сайта

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

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

Результат:

Мы рассмотрели как сделать дизайн сайта в фотошопе (photoshop) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

Создаем макет сайта-галереи в Photoshop

Шаг 1: Настройка документа Photoshop

Создайте новый слой в Photoshop (Ctrl / Cmd + N) с размерами 1200 × 910px.

Шаг 2: Включаем 960 Grid System

При работе над макетам нам понадобится сетка. Мы будем использывать 16-ти колонную сетку 960 Grid System . Для этого из их  веб-сайта скачиваем бесплатный PSD шаблон.

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

Шаг 3: Фон макета

Временно скрываем слой с сеткой и создаем новый слой под ним. В панели инструментов устанавливаем цвет переднего плана на коричнево-оранжевый цвет (# bc7821) и цвет фона темно-коричневый (# 362a21).

Выбераем Gradient Tool (G) ( Градиент) и установите опцию Radial Gradient (Радиальный градиент). В центре холста создаем градиент.

Градиент выглядит немного простым, поэтому давайте добавим текстуру к нему. Перейти к Filter > Convert for Smart Filter (Фильтр> Преобразовать для смарт-фильтров). 

Теперь давайте добавим немного шума, выбрав Filter> Noise> Add Nois (Фильтр>Шум>Добавить шум).

Добавляем больше свечения в верхней части нашего фона. Берем  Brush Tool (B) (Кисть) и устанавливаем опцию Master Diameter (Главный диаметр) около 700px; также меняем цвет переднего плана на белый.

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

Измените режим смешивания этого слоя на Overlay (Перекрытие) и установите его непрозрачность до 34%.

Скачиваем текстуру ржавчины и открываем ее. Перетаскиваем изображение на наш холст и делаем его немного меньше, чем холст  Transform (Ctrl / Cmd + T)  (Редактировать > Трансформация).

Активируем инструмент  Eraser Tool (E) (Ластик).

Используем обычную круглую мягкую кисть и немного стираем бока нижней области с помощью Eraser Tool (E). Кроме того, вы можете использовать маски слоя, если  не хотите, чтобы изменения были постоянными.

Измените режим наложения текстуры ржавчины на Overlay (Перекрытие)  и непрозрачность до 16%.

Далее открываем металлическую текстуру, также перетаскиваем эту текстуру на  холст и немного стираем с боков и снизу. Устанавливаем режим смешивания этого слоя на Multiply (Умножение) и непрозрачность 15%.

Шаг 4: Добавление название сайта 

Отобразите слой с сеткой. Выберите инструмент Horizontal Type Tool (T)  (Горизонтальный текст) и установить шрифт  ITC Avant Garde CE (либо другой необходимый шрифт). Также установите цвет текста, цвет коричневый (# 523117). Затем введите название сайта, например,  «JohnDoe фотография» в центре макета. 

Дублируйте текстовый слой и измените цвет текста, который был продублирован, на белый (# FFFFFF), измените режим смешивания на Overlay  (Перекрытие) и установите его непрозрачность 32%. Переместить его 1px вниз с помощью Move Tool (V) (Перемещение) + клавиша  стрелки вниз, это будет создать дополнительный эффект.

Шаг 5: Создание меню навигации

Создайте новый слой. Используйте инструмент Horizontal Type Tool (T) (Горизонтальный текст) и введите текст с параметрами, которые представлены ниже на картинках. 

Теперь переходим к дизайну кнопок, при наведении на них.  Выберите Rounded Rectangle Tool (U)  (Прямоугольник с закругленными краями). Установите в настройках инструмента опцию Shape Layers (Слой фигуры) и Radius (Радиус) 30px.

Под слоем с текстом «Home» нарисуйте прямоугольник.

К прямоугольнику с закругленными краями применяем Color Overlay (Наложение цвета) и Inner Shadow (Внутренняя тень) в диалоговом окне Layer Style (Стиль слоя).

Для Color Overlay установите желтый цвет (# f9a81f).

Inner Shadow (Внутренняя тень). Установите черный цвет внутренней тени (# 000000).

Изменяем прозрачность слоя с прямоугольником с закругленными углами  до 30%.

В панели Layers ( Слои) выбираем слой с  прямоугольником и нажимаем на нем, при этом зажав кнопку  Ctrl / Cmd. Этим создаем область выделения вокруг прямоугольника.

На новом слое, перейдите в меню Edit> Stroke  (Редактирование t> Обводка).

Изменяем режим наложения слоя на Overlay и установливаем его непрозрачность до 18%.

Шаг 6: Добавляем раздел для фотографий

Включите слой с сеткой. Используя Rectangular Marquee Tool (M) (Прямоугольная область), нарисуйте прямоугольное выделение ниже  пунктов навигации, а затем заполните (Shift + F5) выделение черным цветом (# 000000). Убедитесь, что ширина прямоугольника занимает 14 колонок сетки макета.

Измените режим смешивания  слоя этого прямоугольника на Soft Light  (Мягкий свет).

Пришло время размещать наши фотографии. Открываем фото Sunset и перетаскиваем его в наш макет. С помощью Free Transform ( Свободное трансформирование) делаем его нужных размеров.

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

На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Можно заметить, что, если все сделано правильно, все части изображения, что лежат за пределами маскированной области, будут скрыты.

Шаг 7: Создаем кнопки управления фотографиями

Под группой слоями  фотографии для организации создаем  группу и называем ее «Стрелка». Внутри группы создаем новый слой.

Выберите Ellipse Tool (U) (Эллипс)  и нарисуйте круг на левой стороне слайд-шоу.

Затем добавьте Outer Glow (Внешнее свечение) и Gradient Overlay (Наложение градиента). Устанавливаем цвет Outer Glow черный (# 000000).

Для  Gradient Overlay выбираем два цвета: темно-коричневый (# 271303)  и менее темный (# 3a2102).

Так должен выглядеть наш макет на данном этапе.

Нам нужно будет удалить ненужные тени круга. Чтобы сделать это сначало выбираем Layer> Rasterize> Shape (Слой> Растрировать> Фигуру).  После его выбираем Rectangular Marquee Tool (M), выделяем область с тенью и нажимаем «Удалить».

Теперь создайте стрелки для нашей кнопки. На новом слое  выберите Rounded Rectangle Tool (U) (Прямоугольник с закругленными краями), а затем установить в его параметры опцию  Shape Layers и радиус 30px. Чем больше радиус, тем более круглые края у нас получаться.  

Рисуем левую часть стрелки. Измените цвет этой фигуры в темно приглушенный оранжевый (# b56d1b), придав стиль слоя Color Overlay.

Для создания нижней части  стрелки, дублируем эту форму, нажав  Edit> Transform Path> Flip Horizontal (Редактирование > Трансформирование контура > Отразить по горизонтали).

Выберите два слоя стрелок на панели слоев и перейдите к Edit> Transform> Rotate, поверните стрелку -90 ^O.

Обьеденяем два слоя в один и дублируем его.

В стилях дублированного слоя в Color Overlay выбираем черный (# 000000)  и перемещаем его  его на 1px влево с помощью Move Tool (V).

Теперь создадим стрелку вправо. Выбираем группу «Стрелка» и дублируем ее. Выбираем Edit> Transform> Flip Horizontal  (Перевернуть по горизонтали) и перемещаем на правую сторону.

Должно получиться следующее:

Шаг 8: Создание маленьких фотографий

Делаем слой сетки видимым. Используя Rectangular Marquee Tool (M), нарисуйте выделение шириной приблизительно 4 с половиной колонок ниже основной фотографии.

Залейте его черным цветом (# 000000). Измените режим смешивания на Soft Light (Мягкий свет).

Открываем фото подсолнечника.  Поместите его на холст, а затем изменяем его размер до 80% от  первоначального размера.

Временно скрываем слой с фото. Создаем прямоугольное выделение, с помощью инструмента Rectangular Marquee Tool (M) (Прямоугольная область). На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Это сделает видимой только выделенную часть подсолнечника.

Теперь создайте надпись для нашей маленькой фотографии. Используя Rectangular Marquee Tool (M), создайте выделение в нижней части фото и заполнить его  темно-коричневым цветом (# 261103). Измените непрозрачность этого слоя до 85%.

Используя инструмент Horizontal Type Tool (T), добавить надпись к нему (например, «природа»). Я использовал шрифт Helvetica с желтым цветом текста (# ffbf47).

Добавьте текст ниже изображения. Он будет служить описанием к фото.

Повторите те же шаги, чтобы добавить еще 2 миниатюры фотографий (можно использовать Baby и Bokeh изображения либо  некоторые из ваших собственных фотографий).

Шаг 9: Делаем нижний колонтитул

Создайте новый слой. Выберите Pencil Tool (B) и установите темно-коричневый цвет (# 2c1303). Нарисуйте линию длиной в 14 колонок. Она будет служить разделителем между основным содержанием и нижним колонтитулом. 

Дублируем слой линии, которую только-что создали, и изменяем цвет на белый (# FFFFFF) с помощью стиля Color Overlay. Переместите дубликат 1px вниз. Измените режим смешивания на Overlay и уменьшите непрозрачность до 18% .

Используйте инструмент Horizontal Type Tool (T), чтобы добавить свой текст нижнего колонтитула.

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

Надеемся,  что вы этот урок будет полезным для вас.

По материалам: Create an Elegant Photography Web Layout in Photoshop.

Как делать веб дизайн в фотошопе

Базовые уроки веб-дизайна в Фотошопе

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

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

Если работа веб-дизайнера придется Вам по душе, с помощью Фотошопа Вы сможете не только обрабатывать фотографии, но и делать сайты, обложки книг, баннеры и многое другое! Огромный арсенал средств ретуширования, обработки и монтажа изображений, точная цветовая калибровка, «ювелирная» работа с цветом делают Adobe Photoshop самым популярным, да что там говорить — самым лучшим графическим редактором.

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

Как начать изучение Фотошопа?

Чтобы понять, как пользоваться Фотошопом, начните с теоретических основ. В первую очередь, скачайте и установите программу. Если у вас современный компьютер на базе процессоров FX или i5–i7, с минимум 8 гигабайтами оперативки, можете смело устанавливать Photoshop СS6, если характеристики ниже — придется довольствоваться PhotoshopCS5.

Практический курс по созданию дизайна сайтов в Photoshop

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

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

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

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

Как настроить Photoshop для веб-дизайна?

Нажимаем Окно – Рабочая среда – Типография. Справа у Вас появятся панели работы со слоями и шрифтами.

Далее, советую перейти в настройки Ctrl+K и в разделе «Единицы измерения и линейки» выбрать Пиксели, т. к. мы работаем для веба, где используются именно пиксели, а не сантиметры.

Создаем новый файл: Файл — Новый, в каждом новом проекте проверяем, чтобы в настройках Ширины и Высоты стояли Пиксели. Разрешение — 72 точки на дюйм. Цветовая модель должна быть указана RGB цвет 8 бит.

Вообще, к параметрам создания нового документа относятся:

Имя будущего документа. Его обычно назначают при сохранении файла;

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

Разрешение — количество точек на дюйм. Стандартным разрешением считается 72 пиксела на дюйм;

Режим. Самым распространенным является RGB цвет, глубина которого задается в битах. Обычно хватает 8 бит;

Содержимое фона, определяющее фон изображения.

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

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

Создаем прямоугольник в Photoshop

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

Небольшой лайфхак: если вы выделяете какой-либо объект (в данном случае, прямоугольник), то вы сможете изменить его размеры пропорционально, выделив его и зажав клавишу Shift. Таким образом, вы не деформируете изображение. Это очень удобно, когда вы работаете с иконками. Зажав клавишу Alt, вы сможете скопировать объект при перетаскивании левой кнопкой мыши.

Практический курс по созданию дизайна сайтов в Photoshop

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

Делаем кнопку для сайта в стиле flat design

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

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

Создаем новый документ Файл — Новый и выбираем инструмент «Прямоугольник со скругленными углами».

Выбираем цвет, например, оранжевый #ff8b00, и радиус углов — 4 пикселя.

Рисуем кнопку нужного размера:

Чтобы сделать небольшой объем в стиле «плоского дизайна», выполните следующий прием. Создайте копию слоя с нашей кнопкой Ctrl + J, затем нижний слой с прямоугольником на 2–3 пикселя передвиньте вниз. Сделайте его цвет более темным, например, оттенка #bf6800.

Получится примерно такой результат:

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

Цвета градиента — #ff8c00 и #ffcc3f.

Теперь наша кнопка выглядит так:

Для подписи можно применить шрифт Myriad Pro белого цвета.

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

Результат:

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

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

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

Практический курс по созданию дизайна сайтов в Photoshop

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

Профессиональный макет сайта в фотошоп

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

Ресурсы урока:

1. Набор иконок (wefunction.com) Альтернативный набор иконок
2. Иконка Twitter (iconeden.com)
3. Шрифт Bebas (dafont.com)

Архив

Шаг 1. Mockup

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

Шаг 2. Создаем документ.

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500  пикселов. Разрешение 72 пиксела.

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

Перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

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

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

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete, чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T).

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

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

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование – Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор  и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент Прямоугольная область выделения (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N), выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

Для смягчения краев примените фильтр Размытие по Гауссу (Gaussian Blur).

Выделите нижнюю половину тени и удалите (Delete).

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T), а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool). Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

Оставьте между тенью и заголовком пропуск в 1 пиксел.

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J).

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

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

Шаг 13.  Добавляем контент

Пришло время добавить области под контент. Область контента будет разделена на 3 колонки с равным отступом. Между каждой колонкой будет отступ в 25 пикселов.

Добавьте направляющие по обеим сторонам колонок.

Добавьте в колонки список услуг. Украсьте текст с услугами иконками.

Нарисуйте кнопку «Read More» при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме слой-фигуры.

К слою с кнопкой примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).

Дублируйте слой с кнопкой (Ctrl + J).

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

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

Примените к этой кнопке стили слоя:

Добавьте текст.

Шаг 14. Создаем футер

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

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

Финальное изображение:

Автор урока: Niranth

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

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

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

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

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

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

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

Практический курс по созданию дизайна сайтов в Photoshop

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

шапка;

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

навигация;

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

шрифты и т. д.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Документ

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

Практический курс по созданию дизайна сайтов в Photoshop

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

Теперь выделяем весь документ (клавиши 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 цветов и шапки Уверен, у вас все получится, и совсем скоро вам не придется подглядывать, что умеет тот или иной инструмент. Практика и искренний интерес к делу — залог успеха! Желаю вам удачи. На этом у меня все! Подписывайтесь на обновления, и вы не пропустите самый интересные статьи. Пока, до новых встреч!

Практический курс по созданию дизайна сайтов в Photoshop

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

Создание сайта в фотошопе. Рисуем макет сайта

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

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

Исходные материалы: Упаковка с софтом, Иконки

• 1. Создаем новый документ 1200×1200 пикс. Цвет заливки сделаем #d6d6d6, цвет фона #efefef. После берем инструмент Градиент:

• 2. Делаем заливку холста сверху вниз на 250-300 пикселей.

• 3. Выбираем инструмент Прямоугольная область и создаем выделение высотой примерно 160-170 пикс. на всю ширину изображения.

• 4. Устанавливаем цвет заливки #483f38, цвет фона #1e1916, и опять берем инструмент Градиент, но стиль уже выставляем на Зеркальный

Из середины прямоугольного выделения делаем заливку к любой из его сторон. Затем идем в Фильтр > Шум > Добавить шум

• 5. Инструментом Текст создаем наш заголовок и слоган. Цвета шрифта я указал в самой картинке.

Заходим в Параметры наложения нашего заголовка и делаем следующее:

Тень (режим умножение):

К одному из слов заголовка применим Наложение градиента (режим — нормальный, стиль — линейный)

Примерно вот так:

• 6. Берем инструмент Прямоугольник с закругленными углами (радиус 10пикс.) и создаем фигуру в правой части нашей шапки:

В Параметры наложения фигуры:

Тень:

Внутренняя тень (режим — умножение):

Наложение цвета:

• 7. Подписываем наши разделы:

• 8. Сейчас мы будем создавать основную навигацию. Перед этим, нам нужно отделить область шапки. Инструментом Прямоугольная область или Горизонтальная строка создаем две 1-пиксельные линии чёрного и белого цвета друг под другом. Эти линии должны быть расположены сразу под шапкой.

Выбираем инструмент Прямоугольник с закруглёнными углами и рисуем фигуру:

Теперь нам требуется пройти в Параметры наложения новой фигуры и задать следующие настройки:

Тень (режим — умножение):

Тиснение (Стиль – Внутренний скос, Метод – Жёсткая огранка, Режим подсветки – Осветление, Режим тени – Умножение):

Наложение градиента (Режим – Нормальный, Стиль – Линейный):

Создаем ещё один прямоугольник внутри, высотой в половину первого. Цвет #ffffff

Устанавливаем Непрозрачность слоя на 5%. Теперь нам требуется создать новый документ размером 25х25 пикселей с прозрачным фоном. Инструментом Карандаш рисуем вот такой узор чёрного цвета:

Отлично, теперь переходим в меню Редактирование > Определить узор (Edit > Define Pattern) и сохраняем узор под именем “Диагональные линии”. Возвращаемся в основной документ и делаем выделение основного прямоугольника навигации (Ctrl+левая кнопка мыши), создаем новый слой и заливаем выделение узором при помощи инструмента Заливка. Непрозрачность слоя – 10%.

• 9. Инструментом Горизонтальный текст пишем названия наших разделов навигации. В правой области навигации создаем прямоугольник с закругленными углами (радиус 5 пикселей)

Далее в Параметры наложения:

Тень:

Внутренняя тень (режим — умножение):

Наложение цвета:

Добавляем иконку поиска и следующий текст:

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

Справа от текста вставляем нашу упаковку с софтом:

Делаем копию упаковки, с помощью клавиш Ctrl+T уменьшаем ее размер, располагаем ее сзади оригинала и применяем: Фильтр > Размытие > Размытие по Гауссу (1 пикс.)

Повторяем эту операцию еще один раз:

С помощью инструмента Прямоугольник с закруглёнными углами (радиус 10пикс.) делаем две кнопки. Применяем к ним те же стили слоя, что и к навигационной панели.

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

• 11. Создаем две 1-пиксельные линии:

Создаем выделение прямо под ними:

Устанавливаем цвет заливки — #e6e6e6, цвет фона — #efefef, и делаем заливку линейным градиентом сверху вниз.

• 12.Под разделителем слева рисуем прямоугольник с закруглёнными углами:

Далее в Параметры наложения:

Внутренняя тень:

Наложение градиента:

Обводка (Положение – Снаружи, Режим – Нормальный, Тип обводки – Цвет):

Заполняем текстом этот прямоугольник:

• 13. Справа от прямоугольника пишем немного текста и можно вставляем наши, заранее скаченные иконки:

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

Всем до встречи, встретимся в новых уроках!

Итог

Создание веб-сайта в Photoshop

стр. РЕЗЮМЕ

Как создать визуальный элемент веб-сайта в Adobe Photoshop от начала до конца.

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

Начать с документа Photoshop в формате RGB не более 990 пикселей

Когда я начинаю графический дизайн веб-сайта, я обычно создаю новый документ Photoshop шириной 990 пикселей.Это связано с тем, что 990 пикселей — это почти наибольшая ширина, которую вы можете использовать на веб-странице без неприятной горизонтальной полосы прокрутки, появляющейся в браузере Microsoft Windows, в пределах экрана 1024 x 768 пикселей (наиболее популярное разрешение экрана на момент написания).

Любой, кто использует Apple Mac, знает, что ширина окна браузера гораздо более гибкая, но поскольку пользователи Mac составляют меньшинство, дизайнер веб-сайта должен работать с (в первую очередь) с пользователями ПК — если только аудитория не известна. На базе Mac.

Итак, мой документ обычно начинается с размера 990 x 900 пикселей (рисунок 1) .

Рисунок 1 — создание файла Photoshop 990 x 900 пикселей

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

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

Рисунок 2a — Windows XP с Internet Explorer 8 с разрешением 1024 x 768

Рисунок 2b — Windows XP с Internet Explorer 8 с разрешением 1280 x 800

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

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

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

Включите только релевантное

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

Что касается этого сайта, я хотел, чтобы он был простым, чистым и незамысловатым, чтобы пользователь (вы) мог сосредоточиться на содержании (этом).

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

Итак, приступим к основам

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

Вместо того, чтобы писать руководство, объясняющее, как создавать все возможные типы дизайна, я собираюсь сосредоточиться на одном дизайне — дизайне, созданном для using-dreamweaver.com. Освоив основы, вы можете варьировать, экспериментировать и улучшать, сколько душе угодно.

Создание документа с направляющими

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

ПРОСМОТР / НОВОЕ РУКОВОДСТВО…

… а затем выберите:

По горизонтали, положение 10 пикселей

Повтор по горизонтали, положение 890 пикселей

Повтор по вертикали, позиция 10 пикселей

Повтор по вертикали, положение 980 пикселей

Задайте цвет фона

Цвет фона (или узор) веб-сайта — это область, которая будет заполнять все уголки окна браузера, неиспользуемые самим сайтом, поэтому важно не делать ее слишком отвлекающей или яркой.Я выбрал темно-серый цвет, чтобы улучшить сам сайт. Для этого щелкните квадрат палитры цветов переднего плана в нижней части палитры инструментов и либо выберите свой собственный цвет из палитры цветов, либо введите следующее значение в поле в центре нижней части диалогового окна с помощью символа #: 666666 . Щелкните ОК.

В верхнем меню выберите:

РЕДАКТИРОВАТЬ / ЗАПОЛНИТЬ…

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

Рисунок 3

Создание веб-сайта

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

Выберите инструмент Rounded Rectangle Tool на палитре инструментов.На палитре параметров убедитесь, что выбрана кнопка « Shape Layers », а не « Paths » или « Pixels ». Это гарантирует, что будет создан красивый, редактируемый путь с заливкой, а не пустой путь или пиксельная форма. После этого в палитре параметров в поле « Radius » введите 20 пикселей. Если вы не видите поле «Радиус», вероятно, инструмент «Прямоугольник со скругленными углами» не выбран на палитре «Инструменты». Перед созданием формы выберите новый цвет переднего плана в палитре инструментов.Я использовал # 99cc33 .

Убедившись, что в меню VIEW выбрано « Snap to Guides », щелкните в верхнем левом углу холста, где направляющие пересекают друг друга, и перетащите вниз до правого нижнего пересечения направляющих, а затем отпустите. Это создаст большой прямоугольник с закругленными углами ( рисунок 4, ). Это будет фон для сайта.

Рисунок 4

Кадр 2:

дизайн TIP

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

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

ПРОСМОТР / НОВОЕ РУКОВОДСТВО…

… а затем выберите:

По горизонтали, положение 100 пикселей

По горизонтали, положение 850 пикселей

По вертикали, положение 30 пикселей

По вертикали, положение 960 пикселей

Выберите инструмент Rounded Rectangle Tool , как и раньше, измените цвет переднего плана на # ccff99 и создайте новый прямоугольник с закругленными углами так же, как и раньше, используя вновь созданные направляющие в качестве границы.

релевантная ССЫЛКА

Если вы хотите сделать что-то более сложное с помощью Photoshop, это довольно просто — если вы знаете, какие кнопки нажимать.

Посетите этот урок Glass Photoshop, чтобы получить один из многих подробных уроков.

Сделайте падающую тень

В палитре слоев (со светло-зеленым прямоугольником с закругленными углами все еще выделенным) нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ).Выберите Drop Shadow и введите следующие значения:

• Непрозрачность = 75%
• Расстояние = 0 пикселей
• Спред = 0%
• Размер = 10 пикселей
• Шум = 0%

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

Рама 3:

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

По горизонтали, положение 140 пикселей

По вертикали, положение 40 пикселей

По вертикали, положение 950 пикселей

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

Рисунок 5 — наслоение фоновой панели завершено

Создать верхний и нижний колонтитулы

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

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

Рисунок 6. Верхний колонтитул, нижний колонтитул и панировочные сухари на месте

Добавление текста в Photoshop

Чтобы добавить текст в Photoshop, просто выберите инструмент «Текст» ( Horizontal Type Tool ) на палитре «Инструменты», щелкните где-нибудь на холсте и начните печатать. Новый слой будет создан автоматически для каждого блока текста, который вы создаете. Вы можете щелкнуть один раз и ввести текст, чтобы создать неограниченный блок текста, или вы можете щелкнуть и перетащить, чтобы создать текстовое поле, которое ограничит текст в пределах определенной вами области.

Панировочные сухари

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

Нижний колонтитул

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

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

Первичная навигация

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

релевантная ССЫЛКА

Мега-меню
Есть много других возможностей навигации, одна из которых — часто практичное Мега-меню.

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

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

Кнопки создания вкладок

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

Рисунок 7 — Закругленные вкладки навигации

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

По горизонтали, положение 110 пикселей

По вертикали, положение 230 пикселей

Я сохраню вкладки того же темно-зеленого цвета, что и фоновая панель, за исключением активной вкладки. Если пользователь окажется на любой странице в категории «Проектирование», вкладка останется белой. Любая дополнительная локальная навигация или пояснительные примечания появятся на панели слева.

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

Вторичная навигация

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

По горизонтали, положение 160 пикселей

По вертикали, положение 60 пикселей

Я добавил к этой панели эффект слоя, чтобы придать ей зеленую обводку в 1 пиксель.Для этого выберите слой, содержащий панель. Нажмите кнопку « Добавить стиль слоя » внизу (с надписью fx ). Выберите ход и введите следующие значения:

• Размер: 1px
• Позиция: внутри
• Режим наложения: Нормальный
• Непрозрачность: 100%
• Тип заливки: Цвет
• Цвет: # ccff99 (щелкните цветной прямоугольник и введите «ccff99» в поле #)

Типы веб-сайтов

Шрифт, который я выбрал для текста на сайте, — Georgia.Я выбрал это по трем основным причинам:

1. Мне нравится. Хотя мне нравится чистый вид шрифта без засечек (такого как тот, который используется в заголовке), я чувствую, что простота структуры сайта действительно выделяет красивый, интересный шрифт с засечками, такой как Georgia.
   
2. Это шрифт, разработанный Microsoft для Интернета, поэтому он хорошо работает как с большими, так и с маленькими размерами.
3. На большинстве компьютеров установлена ​​Джорджия. Это решающий фактор, который резко ограничивает количество шрифтов, обычно используемых в дизайне веб-сайтов.Существует множество обходных путей, таких как Flash-текст, изображения в виде текста и методы замены текста PHP, но для простоты эти альтернативы, как правило, находятся в меньшинстве в Интернете. Короче говоря, если на компьютере не установлен шрифт, используемый веб-сайтом, браузер отобразит альтернативный вариант — иногда с нежелательными результатами.

Так и есть Грузия. Я добавил имена для вкладок, выбрав инструмент «Текст», щелкнув одну из вкладок или рядом с ней и введя имя категории.Затем используйте инструмент «Перемещение», чтобы расположить его. Опять же, я планирую воссоздать этот текст в CSS — это хорошо для поисковых систем и более эффективно для времени загрузки страницы.

Выберите стиль текста

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

Хотя стиль текста на этом начальном этапе разработки может быть изменен (как и все остальное!), Он помогает получить общее представление о том, как выглядят разные шрифты, размеры и цвета. Для этого достаточно просто создать текстовое поле в документе Photoshop с помощью перетаскивания (с помощью инструмента Horizontal Type Tool ) и заполнить его текстом-заполнителем. Обычно я экспериментирую со стилями для двух заголовков ( h2 и h3 ), текста абзаца (P), Bullet Points и Links ( рисунок 8 ).

дизайн TIP

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

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

Образцы абзацев Lorum Ipsum можно создать на удобном веб-сайте Lipsum .

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

Создание иллюстраций для информационных панелей

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

Рисунок 8 — Стилизация текста и панелей

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

Теперь выберите переднюю белую панель, щелкнув ее миниатюру Vector mask — если все сделано правильно, вы должны увидеть, как ее путь отображается черным цветом. Выберите инструмент Direct Selection Tool (белая стрелка). Мы собираемся перетащить верхнюю часть белой панели, но снова нам нужно начать перетаскивание, щелкнув темно-серый фон, а не одну из других существующих векторных фигур.

Щелкните серый фон и перетащите рамку вокруг верхней части панели, убедившись, что все точки привязки, составляющие верхнюю часть слоя-фигуры, выбраны.Затем нажмите SHIFT + <СТРЕЛКА ВНИЗ> . Это сдвинет всю верхнюю часть панели вниз на 10 пикселей. Используйте клавиши ВВЕРХ, и ВНИЗ, стрелки , без клавишу SHIFT , чтобы подтолкнуть точки привязки до тех пор, пока вы не будете довольны.

Наконец, используйте инструмент Text Tool , чтобы щелкнуть в верхней части информационной панели, чтобы добавить заголовок. Вы можете решить либо сохранить это как изображение, либо позже стилизовать его в CSS — я использовал текст, а не изображение. Для этих заголовков я добавил интереса, используя комбинацию курсива в нижнем регистре и латинского шрифта в верхнем регистре, а также убрал пробелы между словами (см. Панель footNOTE справа) — действительно простой способ придать заголовку более забавный вид.

Готово

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

Создание веб-сайта в Photoshop — конец статьи

Перейти к предыдущей статье | Перейти на домашнюю страницу | К следующей статье

Требуется обратная связь!

Присылайте любые вопросы или отзывы по адресу: feedback @ using-dreamweaver.com или оставьте его на нашей странице в Facebook.

Создание веб-изображений с помощью Adobe Photoshop — Digital Engagement

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

Видео на этой странице:

Основы Photoshop: создание изображения для Интернета

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

Обсуждаемые темы:
0:00 — введение
0:25 — как просмотреть текущие размеры изображения
0:44 — о разрешении изображения / dpi (веб-изображения должны быть 72 dpi)
1:27 — настройки увеличения внутри приложение Photoshop
1:57 — изменение размера / размеров изображения
2:05 — размеры в пикселях по сравнению с размером документа в дюймах (используйте только пиксели!)
2:37 — совет: сначала измените разрешение изображения
3:36 — рекомендуемый общий размер изображения — 375 пикселей x 250 пикселей
4:40 — о «Сохранить / Сохранить как» (использовать только для оригиналов, а не веб-изображений)
5:30 — использовать «Сохранить для Интернета»
5:45 — сохранить небольшой размер файлов (попробуйте чтобы сохранить менее 100 КБ для большинства изображений)
6:30 — изменение настроек качества изображения
7:40 — убедитесь, что установлен режим sRGB
7:50 — выбор имени файла (по возможности сохраните исходное имя)
8:10 — если вы переименовываете файл, без пробелов или точек (используйте тире для разделения)

Обрезка и изменение размера изображений с помощью Photoshop

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

Охваченные темы:
0:00 — введение
0:18 — просмотр информации о размере и разрешении изображения
0:28 — пример настройки
0:52 — выбор области обрезки с помощью инструмента выделения
1:36 — использование изображения> Обрезка для кадрирования фотографии
1:48 — почему разрешение все еще необходимо отрегулировать (72 dpi для Интернета)
2:18 — с помощью Image> Image Size для изменения разрешения и размеров изображения
2:52 — измените наименьший размер до необходимого размера
3:54 — изменение вида увеличения в Photoshop
4:20 — обрезка лишних пикселей с помощью Image> Canvas Size
4:36 — Размер изображения (изменение размера) vs Размер холста (обрезка)
4:48 — убедитесь, что установлены единицы измерения в пиксели и выберите окончательные размеры изображения
5:24 — изображение готово для Интернета
5:35 — совет: используя сетку привязки Canvas Size, чтобы выбрать, какая сторона будет обрезана

Элементы управления настройкой изображения Photoshop

Узнайте, как настроить внешний вид вашего изображения.

Обсуждаемые темы:
0:00 — введение
0:45 — открытая панель истории помогает легко отменить
1:11 — значки ярлыков панели настройки цвета
1:35 — сначала попробуйте использовать автоматические настройки тона / контрастности / цвета
2:07 — использование истории для возврата на шаг
2:45 — настройка яркости / контрастности
3:45 — настройка цветового баланса
4:30 — настройка насыщенности / яркости (без оттенка)
5:22 — использование резкости фильтр для улучшения деталей
6:38 — когда не использовать Sharpen (лица людей — подчеркивает морщины)

70 руководств Использование Photoshop для создания веб-сайта

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

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

2) Макет дизайн-студии

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

3) Создание макета веб-2.0 в фотошопе

В этом руководстве вы узнаете, как создать очень красивый макет веб-сайта «Веб 2.0» в Adobe Photoshop, используя навыки начинающих. Если у вас есть какие-либо вопросы по этому руководству, не стесняйтесь задавать их в комментариях.

4) Макет блога студии акварельного дизайна

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

5) Корпоративный бизнес-макет

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

6) Как создать макет из потертой бумаги

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

7) Архитектурный макет

Этот учебник научит вас создавать этот потрясающий учебник.

8) Премиум макет WordPress Photoshop

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

9) Белый блокнот для дизайна веб-сайта.

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

10) Создание профессионального веб-макета журнала

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

11) Создание профессионального веб-макета журнала

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

12) Создание профессионального веб-макета журнала

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

13) Веб-шаблон в темном стиле

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

14) Учебник по чистому бизнес-макету

Отличный учебник по созданию чистого бизнес-макета.

15) Веб-страница Creative Studio

16) Веб-страница Creative Studio

17) Создайте чистый и красочный веб-макет в Photoshop

В этом уроке вы узнаете, как создать чистый корпоративный макет в Photoshop.Оригинальный макет был создан кунтизом из Theme Forest.

18) Макет студии дизайна # 2

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

19) Создание веб-шаблона профессиональной студии дизайна в Adobe Photoshop

Создание веб-шаблона профессиональной студии дизайна в Adobe Photoshop

20) Создайте уникальный безобразный макет веб-сайта

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

21) Современный веб-макет Web 2.0

В этом руководстве вы научитесь создавать современный веб-макет в стиле Web 2.0 с нуля.

22) Элегантный макет веб-сайта

В этом уроке будет показано, как создать простой дизайн веб-сайта в Adobe Photoshop, дизайн изначально был создан mjwalsh.

23) Создайте элегантный шаблон Photoshop (PSD) для WordPress

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

24) Яркий красочный веб-макет

Это довольно мало для учебника по веб-макету в Photoshop, всего лишь 18 шагов для создания красивого яркого макета.

25) Полный веб-дизайн в Photoshop — Журнал

В этом уроке мы рассмотрим полный дизайн фотошопа веб-сайта журнала / личного типа.

26) Онлайн-портфолио фотографий

27) Рисованные от руки макеты — самые популярные тенденции дизайна

28) Стильный веб-макет WebStudio

29) Сеть 2.0 векторный макет

30) Городская планировка, идеально подходящая для компании веб-дизайна

31) Веб-макет портфолио

32) Макет 3D Studio — Макет портфолио

33) Веб-макет Sound System Studio

34) Как создать веб-дизайн в стиле гранж в Photoshop

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

35) Создайте элегантный высококачественный веб-дизайн с нуля

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

36) Дизайн сайта блога

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

37) Создайте в Photoshop нарисованный фон, вдохновленный природой

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

38) Создание темного веб-дизайна с нуля

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

39) Черный стильный учебник

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

40) Макет студии дизайна — макет WordPress

Это учебное пособие № 163. В этом учебном пособии вы узнаете, как создать простой макет портфолио дизайнера.

41) Professional Modern Web Layout

Учебное пособие, которое проведет вас через процесс создания Professional Modern Web Layout.

42) WordPress Mockup Layout

Замечательный учебник по макету на WordPress сайта psd.

43) Макет фотографа — Макет портфолио

макет портфолио для фотографа.

44) Макет корзины для мобильного телефона

Как создать еще один вид макета веб-сайта корзины покупок.

45) Макет дизайна интерьера

Он покажет вам, как создать макет дизайна интерьера.

46) Модный макет веб-дизайна

Учебное пособие по созданию красочного модного веб-дизайна.

47) Векторный макет — векторный макет в стиле гранж

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

48) Создание собственной веб-страницы портфолио

В этом уроке мы научимся создавать красивую персональную веб-страницу портфолио.

49) Студия дизайна веб-сайтов

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

50) Студия дизайна веб-сайтов

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

51) Макет агентства дизайна

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

52) Макет агентства дизайна

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

53) Макет веб-страницы портфолио фотографий

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

54) Как создать гладкий и текстурированный веб-макет в Photoshop

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

55) [Учебник] — Создание элегантного макета блога в Photoshop

Вот окончательный результат того, как создать простой элегантный макет блога.

56) Создайте тематический веб-дизайн «Волшебная ночь» с нуля в Photoshop

Художественный веб-дизайн, изображающий концепцию «Волшебной ночи».

57) Текстура бумаги Photoshop с нуля, затем создайте с ее помощью безобразный веб-дизайн!

Учебник по созданию простой текстуры бумаги с нуля в Photoshop, а затем объединению ее с веб-макетом для создания аккуратного дизайна.

58) Создайте яркий современный дизайн блога в Photoshop

Более подробно изучив мир веб-дизайна, в этом руководстве будет рассмотрен процесс создания яркого и красочного современного макета блога в Adobe Photoshop. Начиная с чистого холста, мы рассмотрим процесс создания всей структуры и эффектов с нуля.

59) Первое руководство по веб-дизайну!

Очень простой урок для начинающих пользователей Photoshop.

60) Учебник по веб-дизайну в Photoshop

Узнайте, как создать идеальный веб-сайт с помощью Adobe Photoshop.

61) Graphic Design Studio Web Layout

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

62) Создание бизнес-макета web 2.0

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

63) Изящный и современный макет портфолио

В этом уроке вы узнаете, как создать красивый макет портфолио за несколько шагов.

64) Игровая раскладка # 3

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

65) Элегантный макет веб-сайта

В этом уроке я покажу вам, как создать простой дизайн веб-сайта в Adobe Photoshop, дизайн изначально был создан mjwalsh.

66) Портфолио фотографий

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

67) Учебное пособие по шаблону хостинга

Учебное пособие, которое проведет вас через создание макета для хостинговой компании.

68) Веб-макет в стиле рабочего стола

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

69) Архитектурное бюро Макет / Веб-сайт недвижимости

Простое руководство, дающее отличный конечный результат.

70) Технический макет хостинга

Он показывает вам, как создать еще один макет для хостингового бизнеса.

Публикация тегов

Как создать макет веб-сайта в Photoshop? | Webtrickshome Блоги

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

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

Вот дизайн веб-сайта, который мы собираемся имитировать с помощью Photoshop.

Если вы один из тех, кто предпочел бы видеоурок, то вот видео на ту же тему.

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

Создать новый файл

По сути, мы бы начали с холста с шириной от 1020 до 1440 пикселей и высотой от 1200 до 2000 пикселей, но в этом случае мы можем найти точный размер страницы дизайна, которую собираемся имитировать, и можем использовать тот же размер. для нашего холста.Откройте исходный файл в Photoshop и перейдите в меню «Изображение »> «Размер изображения» , чтобы просмотреть исходный размер файла. Вы можете увидеть ширину и высоту холста в пикселях, а также другие единицы измерения, как показано ниже.

Теперь перейдите к File> New и заполните те же детали для вашего нового файла с разрешением 72 пикселя / дюйм, цветным режимом RGB 8 бит и фоновый белый . Вы также можете дать имя своему файлу в поле Имя .Нажмите OK , чтобы получить новый файл с этими характеристиками.

Перейдите в меню View> Actual Pixels или воспользуйтесь ярлыком CTRL + 1 для обоих файлов, чтобы просмотреть их фактический размер. Это сделает оба размера файлов одинаковыми в области документа, и мы сможем измерить размеры каждого элемента, раздела и расстояния и легко имитировать их.

Создать заголовок

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

Перетащите выделение на вкладку нового файла и отпустите его в области документа нового файла после его открытия. Выровняйте его по верху. Щелкните и перетащите горизонтальную линейку над областью документа и поместите ее внизу выделенного фрагмента. Это даст вам настраиваемый ориентир, и это будет конец фона заголовка. Если вы не видите линейку, перейдите в меню «Просмотр »> «Линейка », и она появится в верхней и левой части области документа.

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

Теперь перейдите к новому файлу и выберите инструмент Rectangle Tool .Выберите опцию Shape из опции abr, и вы увидите, что цвет, который вы только что выбрали, выбран в качестве цвета заливки . Мы не будем добавлять границу к этой фигуре, поэтому выберите параметр No Color для обводки, и параметры Size и Style будут недействительными. Нарисуйте прямоугольник во всю ширину до направляющей, и ваш фон заголовка готов.

Теперь мы можем вернуться к исходному файлу и измерить интервалы для имени веб-сайта слева от заголовка.Выполните измерения со всех сторон по отношению к фону и создайте для него ориентиры. С помощью новой опции Type> Match Font из версий выше Photoshop CC 2015 вы можете узнать тип шрифта, используемый в изображении, но пока мы будем искать похожий шрифт и сопоставить его размер, используя рекомендации.

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

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

Поскольку это прямоугольник со скругленными углами, мы воспользуемся инструментом Rounded Rectangle Tool с радиусом 4px и создадим прямоугольник с закругленными углами в пределах направляющих.Мы узнали, как определять цвет заливки для фигур до их создания, мы можем сделать то же самое, выбрав инструмент «Форма» даже после создания шпа. Но здесь мы покажем вам, как изменить цвет заливки, не беспокоясь о выбранном инструменте. Итак, форма создана, а цвет заливки мы еще не выбрали. Перейдите к исходному файлу и используйте палитру цветов переднего плана или фона инструмента выбора цвета, чтобы выбрать цвет заливки для строки меню. Перейдите в новый файл и дважды щелкните значок формы на панели слоев.Цветовая рамка появится, а курсор изменится на палитру цветов. Щелкните цветовую палитру переднего плана или фона, на которой вы взяли образец цвета заливки из исходного файла, и щелкните ОК, и все готово. Перейдите в View> Extras , чтобы скрыть эти рекомендации и получить более четкое представление о вашей работе на данный момент.

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

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

Перейдите на панель параметров Цвет текста параметр и выберите цвет из цветовой палитры. И цвет выделенного текста изменится.

Теперь мы создадим тени под строкой меню. Если вы проследили путь тени в исходном файле с помощью инструмента «Перо» в режиме контура, вы увидите неправильную изогнутую форму на обоих концах строки меню. Мы можем создать это с помощью инструмента «Перо» в режиме формы. Выберите инструмент «Перо» и выберите блеклый черный цвет заливки в режиме формы.Создайте фигуру и поместите ее под слоем строки меню на панели слоев, чтобы даже если вам нужно переместить ее немного вверх, это не повлияет на основной вид. Перейдите в Filter> Blur> Gaussian Blur .

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

Дублируйте слой с тенью. Выберите Edit> Free Transform или ярлык CTRL + T , чтобы получить маркеры трансформации на слое. Щелкните правой кнопкой мыши в любом месте маркеров трансформации и выберите Отразить по горизонтали . Удерживая Shift , перетащите слой на другой конец. Удерживание Shift позволит вам перемещать слой по прямому пути либо по горизонтали, либо по вертикали в зависимости от того, в каком направлении вы переместите его первым.

Теперь вы можете сгруппировать все созданные слои, оставив фоновый слой. Щелкните либо самый верхний, либо самый нижний слой в разделе заголовка на панели слоев, удерживайте нажатой клавишу Shift и щелкните слой на другом конце. Все слои будут выделены. Либо перетащите их на значок группы внизу и отпустите, либо нажмите CTRL + G , чтобы объединить их в одну группу. Вы даже можете сначала щелкнуть значок группы , чтобы создать пустую группу, затем выбрать и перетащить слои на групповой слой и отпустить их по очереди или все сразу, когда вам будет удобно.Имейте в виду, когда вы перетаскиваете и отпускаете слои в групповой слой, последний удаляемый слой переместится в нижнюю часть группы, и вам может потребоваться переупорядочить их внутри группы, чтобы улучшить видимость содержимого в рабочей области. Вы можете переименовать слои или группу, дважды щелкнув их имена на панели слоев. Ваша работа должна выглядеть так.

Создать градиент фона

Вы можете увидеть градиентную заливку фона под заголовком в исходном файле.Давайте выберем эти цвета из нашей цветовой палитры и вернемся к нашему файлу. Мы можем добавить этот эффект градиента в наш фоновый слой после его разблокировки, но для этого мы создадим новый прямоугольник. Выберите инструмент «Прямоугольник» с опцией формы и любым цветом заливки фона и создайте прямоугольник под заголовком до самого низа. Убедитесь, что этот слой находится прямо над основным фоновым слоем и под всеми уже созданными слоями, а также под теми, которые будут созданы. Теперь мы добавим наложение градиента.Выберите этот слой на панели слоев и либо щелкните правой кнопкой мыши и выберите параметры смешивания, затем щелкните Gradient Overlay, либо щелкните значок fx внизу панели слоев и выберите Gradient Overlay . Появится диалоговое окно со всеми настройками, необходимыми для добавления эффектов градиента к выбранному слою.

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

Боковое меню

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

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

Новости и события

Теперь перейдем в раздел Новости и события под боковым меню. Измерьте интервалы, чтобы создать направляющие, и создайте прямоугольник со скругленными углами с радиусом 10 пикселей и заливкой белого цвета. Измерьте внутренний интервал и создайте направляющие для добавления текста. Удалите мешающие ориентиры с помощью инструмента перемещения, чтобы перетащить их обратно в исходное положение.Выберите цвет заголовка и добавьте текст с необходимыми корректировками. Выберите цвет для подзаголовка и также ознакомьтесь с интервалом. Добавьте текст и перейдите к абзацу. Чтобы добавить абзац, вы можете создать виртуальное текстовое поле с помощью текстового инструмента, а затем перейти к Type> Paste Lorem Ipsum , чтобы получить фиктивные тексты. При необходимости внесите изменения. Вы можете удалить переполненный текст из абзацев, хотя по умолчанию они будут скрыты, выбрав тексты для удаления или временно увеличив текстовое поле, чтобы увидеть все тексты, выбрать все сразу и удалить.Добавьте текст «Читать дальше» в правой части поля с желаемыми настройками.

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

Баннер

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

Рекомендуемый дом

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

Найти дом

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

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

Кнопка

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

Нижний колонтитул

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

Финальные штрихи

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

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

Основы: создание каркаса веб-сайта в Photoshop

Вот пошаговый процесс создания мэйнфрейма веб-сайта в Photoshop.

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

Рисунок A

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

Допустим, мы создаем сайт для компании The Juniper Wood Company, ведущего производителя деревянной мебели, которая хочет рекламировать и продавать свои товары и услуги ручной работы в Интернете.

Компания хочет изменить свое присутствие в Интернете со следующими требованиями:

• Простой, но элегантный сайт
• Рекомендуемый раздел изделий ручной работы
• Информация о компании
• Готовые продукты с онлайн-каталогом
• Доступны услуги индивидуальной отделки
• Галерея изображений и избранные видео
• Онлайн-заказ

Для этого учебника будет разработан начальный шаблон для домашней страницы, а остальные страницы (дочерние страницы) будут основаны на этом основном шаблоне.

Создать фон

Рисунок B

Рисунок C

Теперь перейдем к следующим шагам.

Фигурка D

Рисунок E

Рисунок F

Рисунок H

Элементы дизайна

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

Рисунок I

Рисунок J

Рисунок K

Рисунок L

Рисунок M

Рисунок N

Рисунок O

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

Рисунок P

Рисунок Q

Рисунок R

• Логотип компании — 200 пикселей по ширине, 70 пикселей по высоте, добавлен в заголовок баннера
• Основная навигация — ширина 550 пикселей, высота 50 пикселей, добавлено в заголовок баннера
• Рекомендуемые изделия ручной работы — 245 пикселей по ширине, 125 пикселей по высоте, добавлено на левую боковую панель
• Галерея изображений — 245 пикселей по ширине, 125 пикселей по высоте, добавлено на левую боковую панель
• Видео — 245 пикселей по ширине, 100 пикселей по высоте, добавлено на левую боковую панель
• Добро пожаловать — 490 пикселей по ширине, 100 пикселей по ширине, добавлено в правый столбец
• Интернет-каталог — 490 пикселей по ширине, 100 пикселей по высоте, добавлено в правый столбец
• Столовая, Гостиная, Кухня, На открытом воздухе, — 110 пикселей по ширине, 80 пикселей по высоте добавлены в элемент онлайн-каталога, измените непрозрачность на 90%
• Блог — 385 пикселей по ширине, 160 пикселей по высоте, добавлено в правый столбец
• Баннерное объявление — 100 пикселей по ширине, 160 пикселей по высоте, добавлено в правый столбец

Рисунок S

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

Как я разработал сайт без Photoshop | Питер Ассенторп

Итак, несколько недель назад я попробовал другой подход — подход, который с тех пор начал использовать снова и снова. Меня попросили создать новый пользовательский интерфейс и переделать весь веб-сайт overskrift.dk на основе платформы twitter bootstrap . Я должен был выполнять всю работу с внешним интерфейсом, а они впоследствии выполняли всю внутреннюю работу, чтобы интегрировать его со своей системой. Прежде чем мы продолжим, я должен отметить, что они не хотели, чтобы он был оптимизирован для мобильных устройств.

Overskrift.dk — датская служба мониторинга социальных сетей, которая собирает данные из Twitter, Facebook, блогов и других СМИ и показывает подробный обзор содержания.

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

Я сделал новый логотип в Adobe Illustrator (все еще работаю над улучшением в Sketch). Удален.dk, и придал ему более жирный и чистый шрифт под названием Noto Sans.

Вот результат.

Цветовая палитра, которую я выбрал для всего проекта, была белая, оранжевая, черная и серая. Для заголовков на веб-сайте я выбрал Source Sans Pro, а для основного текста я выбрал старую добрую Helvetica Neue. Заказчику очень понравился новый логотип выше. Установив идентичность, я перешел к следующему этапу…

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

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

После того, как клиент утвердил каркасы — почти без изменений. Я начал разрабатывать / кодировать первый шаблон, главную страницу, в HTML и тематический бутстрап для твиттера одновременно с Sass. И нет, я не использовал фотошоп для создания макетов. 🙂

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

Следует иметь в виду, что если они хотят увидеть другой цвет, например, на кнопке. Мне не нужно было входить в каждый слой в документе фотошопа и изменять его. Я мог просто ввести другое значение hex / rgba в моем проекте Sass, и оно мгновенно изменило бы его по всему сайту — не нужно создавать новые jpg или что-либо распечатывать… УДАРА!

Примечание. Если вы еще не используете Sass.СДЕЛАЙТЕ ЭТО, это css по скорости! 😉

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

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

Лучше всего было то, что если они его одобрили, мне не нужно было начинать нарезать документ фотошопа и начинать кодирование. Код уже был сделан. Как вы, наверное, догадались — это сэкономило много времени не только мне, но и клиенту.

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

Photoshop и система сеток 960

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

Мы будем использовать Photoshop и 960 Grid System.

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

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

Учебные ресурсы

960 Сетка

Текстура бумаги

BuddyIcons

Значок Twitter, созданный mfayaz

960 Введение в сетевую систему

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

Разархивируйте загруженный вами архивный файл, перейдите в папку «Шаблоны», а затем перейдите в папку «Фотошоп».Вы найдете три файла .PSD. Каждый из этих файлов содержит сетку с 12, 16 и 24 столбцами.

Для файлов .PSD уже настроено несколько руководств, которые будут очень полезны. Чтобы активировать направляющие, выберите «Просмотр»> «Показать»> «Направляющие» или используйте сочетание клавиш Ctrl / Cmd +;.

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

Шаг 1. Настройте документ

Откройте файл «960_grid_12_col.psd» в Photoshop. Затем перейдите в Edit> Canvas Size и установите ширину 1200 пикселей и высоту около 1600 пикселей. Позже вы можете отрегулировать высоту, чтобы ваш веб-макет поместился в документе.

Шаг 2: Создание фона

Чтобы добавить ощущение глубины, мы собираемся придать макету слегка текстурированный фон. Вместо того, чтобы копировать и вставлять текстуру с полным разрешением в основной документ, мы уменьшим размер файла, создав шаблон, который можно внедрить в макет как по горизонтали, так и по вертикали.Итак, приступим к созданию нового документа размером 500 × 500 пикселей в Photoshop. Обязательно установите разрешение 72 пикселя / дюйм, поскольку это идеальное разрешение для изображений, предназначенных для публикации в Интернете.

Залейте фон более светлым синим цветом из цветовой палитры (# d5e2e7)

Я выбрал эту текстуру состаренной бумаги от stock.xchng для урока. Вставьте текстуру в документ bg_texture и выполните следующие действия:

1. Сделайте текстуру меньше и примените фильтр повышения резкости, чтобы выделить детали.
2. Обесцветить текстуру (shift + ctrl + U)
3. Переключите режим наложения слоя на «Умножение» и уменьшите непрозрачность примерно до 20%. Результат должен быть примерно таким:

Результат тонкий, но достаточно, чтобы придать дизайну дополнительный характер. Теперь вы можете перейти в Edit> Define Pattern и дать ему соответствующий заголовок.

В нашем основном документе мы применим этот шаблон. Выберите фоновый слой, перейдите в Edit> Fill и выберите фоновый узор.

Шаг 3. Создайте заголовок

Создайте новую группу и назовите ее «Заголовок». Выберите инструмент «Прямоугольник» (U) и создайте прямоугольник размером 1200 на 150 пикселей и цветом # 404448. Назовите этот слой «header bg». Щелкните этот слой правой кнопкой мыши и выберите «Преобразовать в смарт-объект». Затем перейдите в Фильтр> Шум> Добавить шум и используйте настройки со следующего изображения.

Добавьте название своей дизайн-студии с помощью инструмента «Текст» (T) в левой части заголовка.Я использовал шрифт Steinem Bold Italic размером 90 пунктов. Активируйте направляющие (Ctrl / Cmd + 😉, чтобы помочь вам расположить этот слой, как показано на изображении ниже.

После размещения логотипа мы можем добавить меню в правом верхнем углу. Я использовал Myriad Pro и размер шрифта 15pt. Я также дал каждой ссылке небольшую тень, чтобы выделить ее на фоне.

Я рисую прямоугольник, чтобы выделить «Домой» самостоятельно. Чтобы выделить выбранную страницу, я применяю стиль кнопки к текущему выделению.Примените стиль ниже, дважды щелкнув форму кнопки на панели слоев, чтобы открыть диалоговое окно стиля слоя. Примените эти стили к внутренней тени, а также обводку в 1 пиксель (# 42454a) снаружи прямоугольника.

Чтобы добавить тонкости, я добавил рамку размером 1px #fffff под заголовком с помощью инструмента «Линия».

Шаг 4. Создайте слоган

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

Я использовал как Chunk Five (верхний текст), так и Gibson (нижний текст) для слогана. Сделать сетку видимой поможет с размещением.

Шаг 5: Добавьте разделитель

Чтобы отделить слоган от раздела портфолио, мы создадим разделитель. Создайте новую группу и назовите ее «разделители». Выберите инструмент «Линия» (U) и нарисуйте вертикальную линию от верха скругленного прямоугольника до низа. Установите цвет на #ffffff и назовите этот слой «Линия 1px».

Дублируйте этот слой (щелкните его правой кнопкой мыши и выберите «Дублировать»).Измените цвет новой строки на # abb0b3. Выберите инструмент «Перемещение» (V) и переместите этот слой на один пиксель вниз.

Добавьте маску в группу «разделители» (Слой> Маска слоя> Показать все). Затем выберите инструмент «Градиент» (G), удерживайте нажатой клавишу Shift и перетащите градиент от черного к прозрачному слева от разделителя, чтобы он исчез. Повторите с правой стороны. У вас должно получиться что-то вроде этого:

Поздравляю! Вы на полпути!

Щелкните здесь, чтобы перейти к части 2 этого руководства