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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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).

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

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

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

В статье используются названия инструментов и термины описание, которых не реально включить в данный материал из за объема. Поэтому если ты впервые открыл(а) эту программу, то нужно сначала изучить азы работы с ней. Еще рекомендую ознакомится с материалами раздела «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) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

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

Прежде чем верстать шаблон сайта в 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 сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

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

Верстка сайта из PSD макета

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

В этой статье я покажу, как сверстать его из PSD-макета в готовую веб-страницу, используя инструменты HTML-разметки и каскадные таблицы стилей (CSS).

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

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

• back_all — подложка сайта.
• header_top — фон шапки.
• big_pic — логотип.
• title — фон заголовков левой панели.
• footer — заливка низа сайта.
• 1mini — первое фото для основной части страницы.
• 2mini — второе фото.

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

Делим документ на блоки

Откройте документ index.html и впишите в него следующий код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шаблон сайта</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="styles. css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
</body>
</html>

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

Блоков у нас 7, перечислим их по идентификатору (значению атрибута id):

1. content — блок, внутри которого будут храниться остальные блоки.

2. header — блок шапки, внутри которого будут:

2.1. menu — верхняя навигация.

2.2. logo — картинка с текстом.

3. right — основная часть страницы.

4. left — панель слева.

5. footer — низ сайта.

Так и запишем (в контейнер <body> вставьте следующий код):

<div>
<!-- Шапка -->
	<div>
	  <div>
	  </div>
	  <div>
	  </div>
	</div>
<!-- Конец шапки -->
<!-- Основной блок -->
	<div>
	</div>
<!-- Конец основного блока -->
<!-- Левая панель -->
	<div>
	<div>
<!-- Конец левой панели -->
<!-- Ноги сайта -->
	<div>
	</div>
<!-- Конец -->
</div>

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

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

*
{
margin: 0px;
padding: 0px;
}

Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

a:link {
	color: #D72020;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a:visited {
	color: #D72020;
}

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

body {
	background: #FFD723 url(images/back_all.jpg) repeat-x;
	font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}

Определение блока content:

#content {
	margin: 0 auto;
	background: #ffffff;
	width: 786px;
	text-align: left;
}

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

Оформляем горизонтальное меню

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

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

Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

#header {
	background: #ffffff;
	height: 306px;
	text-align: left;		
}

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

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

Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

#menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top. gif) repeat-x;
}

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

Теперь можно добавить и само меню в файл index.html:

<table>
		<tr>
			<td><a href="#"  title="">Главная</a></td>
			<td><a href="#"  title="">Галерея</a></td>
			<td><a href="#"  title="">Договор</a></td>
			<td><a href="#"  title="">Прайс</a></td>
			<td><a href="#"  title="">Образцы</a></td>
			<td><a href="#"  title="">Контакты</a></td>
		</tr>
		</table>

Обновив страницу можно увидеть, что оно действительно появилось.

Только вот вид ссылок оставляет желать лучшего. Установим для них свои правила (выравнивание, ширину, цвет, жирность и т. д.), а ссылкам при наведении зададим смену цвета и вернём убранное по всему шаблону подчёркивание:

#menu a {
	float: left;
	width: 99px;
	height: 46px;
display: block;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	font-size: 14px;
	padding-top: 35px;
}

#menu a:hover {
	color: #D72020;
	text-decoration: underline;
}

Теперь форматирование меню можно сопоставить с PSD-шаблоном.

Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).

Настраиваем логотип

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

#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}

Логотип вставлен ровно по размеру.

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

  <div>
		<h2><a href="#">Имя сайта</a></h2>
		<h3><a href="№">Слоган сайта</a></h3>
	  </div>

Текст появился, но его тоже нужно оформлять.

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

#logo a {
	text-decoration: none;
	text-transform: lowercase;
	font-style: italic;
	font-size: 36px;
	color: #FFFFFF;
}
#logo h3 a
{
font-size: 24px;
}

Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right
{
float: right;
width: 500px;
padding-right: 10px;
}

#right h5
{
	margin: 0;
	padding: 0px;
	font-size: 12px;
	color: #D72020;
}

#right a
{
color: #D72020;
text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right h3 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #D72020;
}

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

Заполним контейнер right. Изображения поместим в простую таблицу.

<h3>Галерея</h3><br />
		<h3>Кухни</h3><br />
		<table cellspacing = 40>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		</table>

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

Создание левой панели

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

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

В файл CSS впишите следующий код.

#left
{
	padding: 10px;
	width: 237px;
	padding-right: 1em;
}

#left h4
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}

#left ul {
	margin: 0;
	padding: 10px;
	list-style: none;
	width: 100px;
	font-size: 18px;
}

#left li ul {
	position: absolute;
	left: 90px;
	top: 0;
	display: none;
}

#left ul li {
	position: relative;
	margin-bottom:20px;
} 

#left ul li a {
	display: block;
	text-decoration: none;
	color: #ffffcc;
	background: #ff9900;
	padding: 5px;
	border: 1px solid gold;
	border-bottom: 0;
} 

#left li:hover ul {
	display: block;
}

#left li li {
	margin-bottom:0px;
	width: 150px;
}

#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}

Обратите внимание на правила классов ul и li — секрет исчезновения меню находится там, раскройте его самостоятельно.

В контейнер left HTML-документа добавим сначала информационный блок без меню.

<h4>Информация</h4>
	<p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br />
	<h4>Меню</h4>

Белый фон распространился ещё ниже по странице.

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

<ul>
			<li><a href="#">Галерея</a>
					<ul>
						<li><a href="#">Кухни</a></li>
						<li><a href="#">Кровати</a></li>
						<li><a href="#">Стенки</a></li>
						<li><a href="#">Прихожие</a></li>
						<li><a href="#">Шкафы-купе</a></li>
						<li><a href="#">Компьютерные столы</a></li>
					</ul>
				</li>
				<li><a href="#">Договор</a></li>
				<li><a href="#">Прайс</a>
					<ul>
						<li><a href="#">Кухни</a></li>
						<li><a href="#">Кровати</a></li>
						<li><a href="#">Стенки</a></li>
						<li><a href="#">Прихожие</a></li>
						<li><a href="#">Шкафы-купе</a></li>
						<li><a href="#">Компьютерные столы</a></li>
					</ul>
				</li>
				<li><a href="#">Образцы</a>
					<ul>
						<li><a href="#">Стекло</a></li>
						<li><a href="#">ДСП</a></li>
						<li><a href="#">Фурнитура</a></li>
						<li><a href="#">И т.д.</a></li>
					</ul>
				</li>
				<li><a href="#">Контакты</a>
				<li><a href="#">Важно</a>
			</li>
		</ul>

Взгляните, как смотрится список. Многие могут подумать, что это таблица.

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

Делаем ноги

Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

#footer {
	height: 44px;
	clear: both;
	padding-top: 20px;
	background: url(images/footer.gif) repeat-x;
	border-top: 5px solid #A6640E;
}

#footer p {
	margin: 0;
	font-size: 10px;
	text-align: center;
	color: #ffffff;
}

#footer a {
	color: #ffffff;
}

Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

<p>Copyright © 2016. <a href="http://test1.ru/" title="Адрес с

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

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

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

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

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

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

А вот о ширине следует призадуматься, так какого размера делать то ее???? А рисовать ширину тела сайта необходимо в 1003 пикселя, Вы спросите, почему 1003 пикселя, а не 1024, да потому как нужно учитывать боковой скроллинг у браузера, а он составляет немного не мало 21 пиксель.

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

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

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

Я при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

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

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

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

Создание веб-страницы с помощью Photoshop

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

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

Начало работы

Создайте большой документ Photoshop, не менее 1200 пикселей в ширину и 900 пикселей в глубину (это можно увеличить позже с помощью Canvas Size), RGB с разрешением 72 dpi.

Затем я обычно центрирую дизайн в пределах холста шириной 1200 пикселей, рисуя пару направляющих. (Домашний раздражитель: веб-сайты, выровненные по левому краю окна браузера.) Нарисуйте вертикальные направляющие, перетаскивая их за вертикальную линейку по бокам документа. Если вы не видите линейки, нажмите Cmd (Mac) / Ctrl (PC) -R.

Вы можете сделать это на глаз, хотя я обычно хочу, чтобы ширина веб-сайта была ровно 1024 пикселя. Увеличьте масштаб [Cmd (Mac) / Ctrl (PC) -plus] для большей точности.Вы можете просмотреть / скрыть направляющие, выбрав Cmd (Mac) / Ctrl (PC) — ;.

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

Использование векторов, фигур и смарт-объектов

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

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

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

Слои имен и группы слоев, чтобы все было организовано

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

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

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

Стили слоя для тени текста

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

Для темных теней текста , например {1px 1px # 000}, используйте эффект Drop Shadow по умолчанию, изменяя только расстояние и размер на 1 пиксель.

Для светлых текстовых теней , например {1px 1px # 000}, используйте эффект Drop Shadow по умолчанию, изменяя только цвет с черного на белый, режим наложения с Mulitply на Normal, а Distance and Size на 1 пиксель ( увидеть ниже).

Возьмите свой цвет с помощью пипетки

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

Затем вы получаете HEX-версию цвета, которую можете использовать в своей разметке CSS. Нажмите «Добавить в образцы», если вы хотите легко получить доступ к этому точному цвету в другом месте дизайна.

Представляем клиенту дизайн веб-страницы

Вы, наконец, закончили страницу и сохранили ее в формате JPG, что вы делаете? Вы просто отправляете JPG клиенту? Нет! Разместите его на веб-странице, чтобы клиент мог просматривать его в браузере, чтобы не было путаницы в том, как он выглядит.

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

Вот HTML-код, который я использую для отображения большого JPG-файла по центру веб-страницы:

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

Сохраните его как «home-1.html» вместе с JPG в папке на вашем веб-сайте (я использую / dev / client-name) и отправьте ссылку клиенту. Когда клиент возвращается с комментариями, просто повторно сохраните HTML-файл как «home-2.html» и не забудьте изменить имя и заголовок изображения.Это позволяет легко ссылаться на более ранние версии.

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

Углубленное обучение : Создание веб-сайта в Photoshop и Illustrator

А ты?

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

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

стр. СВОДКА

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

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

Начните с документа RGB Photoshop не шире 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 . Щелкните ОК.

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

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

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

Рисунок 3

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

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

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

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

Рисунок 4

Frame 2:
Следующая панель будет светло-зеленой с тенью

дизайнTIP

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

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

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

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

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

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

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

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

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

релевантная ссылка

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

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

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

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

• Непрозрачность = 75%
• Distance = 0px
• Спред = 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.

Сделайте красивую посадочную страницу | Photoshop

Предварительный просмотр учебного пособия

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

Учебные ресурсы

Шаг 1. Базовая настройка документа Photoshop

Для этой целевой страницы мы будем полагаться на сетку. Мы можем использовать популярную сетку 960 Grid System. Это поможет нам упростить согласование элементов веб-дизайна.

Загрузите ZIP-файл 960 Grid System с официального сайта проекта, извлеките его содержимое и откройте PSD-файл Photoshop с 12 столбцами. Файл называется 960_grid_12_col.psd. Файл находится в папке templates \ photoshop .

Давайте изменим ширину и высоту холста PSD, чтобы у нас было немного больше места для работы. Перейдите в Изображение> Размер холста и установите W, , , ширину от до 1200 пикселей и H восемь на 133 0 пикселей.

Оставьте около 245px от верхнего края макета для нашего основного изображения заголовка.

Задайте серый цвет ( # f0f0f0 ) оставшемуся пространству макета. Вы можете сделать это разными способами. Мой способ — использовать инструмент «Прямоугольник». Выберите инструмент «Прямоугольник» на панели «Инструменты». На панели параметров убедитесь, что выбран параметр Shape Layers , и установите для параметра Color нужный цвет: # f0f0f0 . Нарисуйте прямоугольник, который покрывает весь холст , за исключением верхних 245 пикселей холста. Переименуйте слой примерно в «base».

Шаг 2: изображение заголовка

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

Придадим фото размытый эффект. Есть несколько способов сделать это, но мы будем придерживаться самого простого: перейдите в раздел Filter > Blur > Gaussian Filter. Установите для параметра Radius значение 4.0px .

Шаг 3: верхняя панель навигации

Используйте инструмент «Прямоугольник» (M), чтобы создать горизонтальную прямоугольную полосу на самом верхнем крае холста, высотой 20 пикселей и занимающую всю ширину холста.

Придайте слою непрозрачность . = 2 5% — так мы получим полупрозрачную полосу вверху.

Переключитесь на инструмент Horizontal Type Tool (T).

Мы будем использовать шрифт Source Sans Pro, который можно бесплатно загрузить с сайта Google Web Fonts.

На панели параметров вы можете настроить инструмент Horizontal Type Tool так, чтобы:

• Семейство шрифтов : Source Sans Pro
• стиль шрифта : Полужирный
• размер шрифта : 16px
• цвет текста: # aed572 (зеленый цвет)

Используйте инструмент «Горизонтальный текст», чтобы записать номер телефона и вымышленный адрес электронной почты или любой текст, который вы хотите использовать.

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

Я установлю белый цвет значков, #ffffff.

После того, как текст и значки будут правильно расположены, примените к ним эффект слоя Drop Shadow .

Вот предварительный просмотр нашей работы на данный момент:

Шаг 4. Логотип в форме ленты

Откройте для себя направляющие Photoshop, встроенные в PSD-файл 960 Grid System, выбрав View> Show> Guides .Эти руководства помогут нам выровнять элементы на холсте, включая логотип в форме зеленой ленты, который мы создадим на этом этапе.

Чтобы создать форму, аналогичную той, которую вы видите в верхнем левом углу макета целевой страницы, вы можете разместить дополнительные направляющие на своем холсте, а затем использовать инструмент «Перо» (P), чтобы следовать направляющим для достижения формы. Придайте фигуре светло-зеленый цвет (# 79b02f).

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

Начните с добавления эффекта слоя Inner Shadow с непрозрачностью Opacity , установленной на 35%.

Мы также добавим немного глубины основанию логотипа, применив эффект слоя Bevel and Emboss . Установите для параметра Opacity значение 0% для параметра Highlight Mode (потому что нам не нужен эффект выделения) и установите для параметра Opacity для параметра Shading Mode значение 15% .

Мы также добавим к форме мягкий эффект слоя Gradient Overlay . Мне нравится, как установка Blend Mode на Soft Light и использование Opacity около 50% ищет именно эту форму.

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

Вы можете найти множество бесплатных шаблонов Photoshop на этом сайте: subtlepatterns.com.

Я установил для параметра Opacity эффекта слоя Pattern Overlay значение 5% .

Теперь введите текст поверх основы логотипа, используя инструмент Horizontal Type Tool. Я использовал бесплатный шрифт Nevis со стилем шрифта , установленным на Bold и размером шрифта , установленным на 36px , чтобы записать две буквы — «DM» .

После этого я применил к текстовому слою эффект слоя Drop Shadow .

Шаг 5: Заголовки в заголовке

Я использую шрифт Source Sans Pro со стилем шрифта , установленным на Bold , для написания заголовков. В большем заголовке используется 24p t , размер шрифта , а в меньшем заголовке под большим заголовком — 18 pt , размер шрифта .

Я дал заголовкам эффект слоя Drop Shadow .

Шаг 6: Круговое изображение

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

Используйте инструмент Ellipse Tool, чтобы создать круги, а затем инструмент Line Tool с параметром Weight , установленным на 5px , чтобы создать линию 5px, которая проходит через них.

Используя шрифт Bebas Neue, я разместил несколько случайных текстов и центрировал их внутри каждого круга.Увеличьте размер шрифта в среднем круге примерно на + 10 пунктов.

Шаг 7. Основная кнопка призыва к действию

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

Сначала создайте форму кнопки с призывом к действию с помощью инструмента Rounded Rectangle Tool. На панели параметров убедитесь, что выбран параметр Shape Layers , для параметра Radius установлено значение 3px , а для параметра Color установлен светло-зеленый цвет, # 96c64f .

Затем создайте фигуру примерно 7 пикселей в ширину и пикселей в ширину и 35 пикселей в высоту пикселей.

Придайте фигуре эффект слоя Drop Shadow .

Также придайте форме эффект слоя Inner Shadow . Установите для параметра Distance значение 1 пикселей и для параметра Opacity значение 30%.

Добавьте эффект слоя Bevel and Emboss к кнопке с призывом к действию.Он должен быть едва заметен, чтобы не переборщить с этим популярным дизайнерским эффектом. Тем не менее, мне очень нравится добавлять глубины веб-кнопкам, и Bevel and Emboss хорошо для этого. Чтобы сделать эффект едва заметным и незаметным, установите для параметра Opacity для параметра Highlight Mode значение 0% и установите для параметра Opacity для параметра Shadow Mode значение 7%.

Давайте добавим к кнопке эффект слоя Gradient Overlay.Установите Blend Mode на Soft Light и Opacity на 60%.

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

1. Создайте новый документ Photoshop (любого размера)
2. Создайте новый слой и удалите фоновый слой по умолчанию
3. Перейдите к Select> All (который поместит выделение вокруг холста), чтобы выделить весь холст
4. Выберите Edit> Fill , чтобы заполнить слой
.
5. Снимите выделение, перейдя к Select> Deselect
6. Примените к слою очень заметный фильтр шума, перейдя в Фильтр> Шум> Добавить шум
7. Снова выберите весь холст ( Выбрать> Все )
8. Перейдите в Edit> D efine Pattern и сохраните свой узор

Вы создали собственный узор Photoshop.

Затем вернитесь к основному документу Photoshop и задайте веб-кнопке эффект слоя Pattern Overlay , используя только что созданный пользовательский узор Photoshop.

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

Теперь мы создадим небольшую фигуру, которая будет разделителем между значком и текстом кнопки.Чтобы создать его, с помощью инструмента «Линия» создайте вертикальную линию высотой около 10 пикселей . Примените эффект слоя Gradient Overlay к вертикальной линии.

Используйте тот же шрифт, который мы использовали в текстах заголовков ( Nevis ), чтобы ввести текст на веб-кнопке. Я просто записал фразу: Загрузите сейчас.

Придайте тексту темно-зеленый цвет ( # 4d7500 ) и примените эффект Drop Shadow с цветом тени , установленным на белый ( #ffffff ) и размером O на 30 %.

Шаг 8: значок облака (для основной кнопки призыва к действию)

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

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

Сначала используйте инструмент Elipse Tool, чтобы создать от 4 до 5 кругов. Удерживая нажатой клавишу Shift, рисуя круги, вы получите только одну фигуру и один слой вместо 4–5 фигур, разделенных на 4–5 слоев.

Теперь установите для параметра Fill слоя значка облака значение 0% — вы можете сделать это на панели Layers.

После этого придайте слою эффект слоя Stroke , чтобы придать значку облака темно-зеленую обводку 2px.

Шаг 9: форма ленты рядом с основной кнопкой с призывом к действию

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

Уменьшите значение параметра Непрозрачность для светло-зеленой формы, чтобы часть фоновой фотографии была видна.

Напечатайте текст поверх него. Я набрал «100% бесплатно».

Шаг 10: Раздел «Рекомендуемые»

Давайте поработаем над разделом «Избранные».

Используйте инструмент «Прямоугольник» (U), чтобы создать фигуру шириной 220 пикселей и 214 пикселей высотой.

Внизу прямоугольника я также добавлю зеленый прямоугольник ( # 91c04c ) примерно 5 пикселей в высоту.

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

Используйте инструмент Horizontal Type Tool (T) со шрифтом Source Sans Pro, чтобы придать нашему заголовку темно-серый цвет ( # 262626 ) и более светлый серый цвет для текста ( # 9c9c9c ).

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

Используйте шрифт Nevis со стилем шрифта , установленным на B старый и размером шрифта из 18pt, и запишите предложение.Используемый серый цвет такой же, как и для абзацев на предыдущих шагах. А зеленый цвет такой же, как цвет нижних полос.

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

Придайте тексту эффект слоя Drop Shadow .

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

Шаг 11: Нижний колонтитул

Используйте инструмент «Прямоугольник» (U), чтобы создать фигуру шириной 1200 пикселей и высотой 280 пикселей пикселей.Придайте ему светло-серый цвет ( # d0d0d0 ). Это будет фон для нашего нижнего колонтитула.

Используйте инструмент Horizontal Type Tool (T) и тот же шрифт, что и раньше, чтобы ввести текст заголовка, как на следующем изображении. Мы разделим нижний колонтитул на три раздела, и каждый раздел будет иметь заголовок. Как показано ниже, заголовок первого раздела — « Подробнее о нас ». Мы применим эффект слоя Drop Shadow к текстам заголовков с непрозрачностью , установленной на 1%.

Используйте тот же шрифт, чтобы написать абзац фиктивного текста. Придайте этому тексту более светлый цвет ( # 7a7a7a ).

Используйте инструмент «Линия» (U), чтобы создать простую серую линию, которая будет разделительной линией для каждого раздела.

Следующим разделом нижнего колонтитула нашего веб-дизайна будет раздел «Информационный бюллетень » . Создайте поле ввода текста информационного бюллетеня с помощью инструмента Rounded Rectangle Tool (U) с радиусом 3 пикселя. Придайте фону информационного бюллетеня светло-серый цвет ( # f5f5f5 ). Придайте ему тонкий эффект Drop Shadow . Придайте форме действительно тонкий эффект слоя 1px Stroke . Используйте инструмент Horizontal Type Tool (T), чтобы ввести текст в форму.

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

Краткое содержание учебника

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

Вот наш окончательный результат:

Дополнительные ресурсы, связанные с целевыми страницами

Скачать исходные файлы

20 лучших бесплатных шаблонов веб-сайтов для Photoshop [PSD-файлы]

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

Photoshop — один из самых популярных инструментов дизайна для дизайнеров UX / UI. Веб-дизайнеры и разработчики рады поделиться другими шаблонами веб-сайтов в формате PSD.

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

Начнем!

1. Piroll — Бесплатный HTML PSD шаблон сайта для портфолио

Piroll — это шаблон дизайна PSD для агентства или личного портфолио с большой гибкостью. Предлагая большую гибкость, шаблон разработан дизайнером пользовательского интерфейса Светланой из Нью-Йорка.

Характеристики:

• Минималистичный и современный вид
• 5 примеров страниц в формате PSD
• Хорошо организованные слои для создания MVP

Скачать бесплатно

2.Cesis Creative Agency — БЕСПЛАТНЫЙ PSD шаблон сайта

Шаблон Cesis Creative PSD разработан Транмаутритамом, который является самым продаваемым автором PSD за все время на ThemeForest. Это бесплатный шаблон для сайтов креативных агентств, дизайнеров, фрилансеров, блогеров и художников. Включены следующие страницы: Домашняя страница, О нас, Контакты, Ошибка 404, Полноэкранное меню, Регистрация, Блог о листинге, Отдельный блог, Портфолио, Единое портфолио и Услуги.

Характеристики:

• Минималистичный элегантный дизайн
• Креативные и подробные макеты
• Свежий цвет
• 11 файлов изображений предварительного просмотра
• 11 потрясающих PSD с идеальными пикселями и детализацией

Скачать бесплатно

3.MoGo — Бесплатный одностраничный PSD шаблон для агентств

Mogo — это одностраничный шаблон веб-сайта, созданный в Photoshop Александром Карсаковым и выпущенный исключительно на freebiesbug.com. Он включает в себя множество полезных компонентов, которые помогут вам быстро создать сайт.

Характеристики:

• Чистый и современный дизайн
• Включает карусели с отзывами
• Включает миниатюры портфолио и другие виджеты

Скачать бесплатно

4.Avenue Fashion — бесплатный шаблон электронной коммерции в формате PSD

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

Характеристики:

• Включает 6 страниц продукта
• Модный дизайн

Скачать бесплатно

5. Fun Weather — бесплатный шаблон целевой страницы для ваших приложений

Fun Weather — это бесплатный шаблон дизайна целевой страницы, созданный в Photoshop.Он идеально подходит для демонстрации погодных приложений. Этот шаблон разработан молодым талантливым московским дизайнером Чаниевой.

Характеристики:

• Легко адаптировать для любого мобильного приложения
• Чистый пользовательский интерфейс

Скачать бесплатно

6. Maker Landing Template — Шаблон целевой страницы Photoshop

Еще один бесплатный шаблон Photoshop для целевой страницы. Если вам нужна версия HTML / CSS, оставьте строку с дизайнером Ильясом Алиевым.

Характеристики:

• Raleway Бесплатный шрифт Google
• Совместимость с Photoshop

Скачать бесплатно

7. PSD шаблон для серфинга — бесплатный одностраничный PSD шаблон

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

Характеристики:

• Один файл PSD
• Бесплатные шрифты
• Бесплатные изображения CC0
• Простая настройка
• Совместимость с Photoshop

Скачать бесплатно

8.Shopy — PSD веб-шаблоны для электронной коммерции

Shopy — это красивый набор бесплатных веб-шаблонов PSD для электронной коммерции.

Характеристики:

• 3 шаблона PSD
• Страница товаров
• Домашняя страница
• Страница с описанием продукта

Скачать бесплатно

9. PSD шаблон «Еда и ресторан» — PSD шаблон «Вкусная еда» для Интернета

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

Характеристики:

• 1 PSD
• Простота настройки
• Еда тематическая
• Веб-шаблон

Скачать бесплатно

10. Бесплатный шаблон веб-сайта орегано — бесплатный шаблон веб-сайта для Photoshop, Sketch и Adobe XD

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

Характеристики:

• Разработано для Интернета
• Разрешение 820x1600px
• Совместимость с Photoshop и Sketch

Скачать бесплатно

11.PSD шаблон Free Portfolio — PSD шаблон Bootstrap для бесплатной загрузки

Это лучший минималистичный шаблон веб-сайта Bootstrap для презентации ваших работ или графики. Он имеет полностью настраиваемые формы и хорошо сгруппированные слои. У него есть бесплатные шрифты Google и изображения Unsplash.

Характеристики:

• 2 страницы включены
• 1170px Сетка начальной загрузки
• Бесплатные изображения CC0
• Простая настройка
• Полностью многослойный
• Совместимость с Photoshop

Скачать бесплатно

12.Веб-шаблон «Исследование космоса» — бесплатный веб-сайт Photoshop

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

Характеристики:

• 1 PSD файл
• Включает 4+ страницы

Скачать бесплатно

13. Веб-шаблон для креативов — креативный PSD-шаблон, идеально подходящий для веб-сайтов цифровых агентств.

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

Характеристики:

• Хорошо названные и организованные слои
• Простота использования
• Полностью настраиваемая в формате PSD

Скачать бесплатно

14. Пекарня — Бесплатный адаптивный PSD шаблон сайта

Bakery — это бесплатный одностраничный шаблон веб-сайта для пекарен в формате PSD. Дизайнер — Мальте Вестедт, UI-дизайнер из Германии.

Характеристики:

• Векторные иконки и шрифты
• Полностью отзывчивый

Скачать бесплатно

15. Снег: бесплатный PSD + HTML шаблон портфолио

Snow — это бесплатный шаблон веб-сайта, разработанный Светланой С. Это шаблон, который идеально подходит для создания минималистичных и чистых портфолио. Он поставляется как в формате PSD, так и в формате HTML и включает в себя первую страницу, две страницы портфолио и две страницы блога.

Характеристики:

• Включает версию WordPress

Скачать бесплатно

16.ONAIR2 — PSD шаблон сайта радиостанции

Onair2 — это бесплатный шаблон Photoshop, который можно использовать для создания веб-сайта радиостанции. Он также включает версию WordPress и отличается современным минималистичным стилем. Файлы созданы в Photoshop CS6 и совместимы с Photoshop CC.

Характеристики:

• Прочная и последовательная конструкция
• 5 шаблонов PSD
• Руководство по типографике и цвету

Скачать бесплатно

17.Clemo: бесплатный шаблон PSD для компаний

Clemo — это бесплатный шаблон веб-сайта Photoshop, подходящий для компаний и агентств, разработанный и выпущенный Ильей Нестеровым. Он включает 10 страниц в высоком разрешении на основе сеток Bootstrap 1170 пикселей.

Характеристики:

Скачать бесплатно

18. Minimo: минимальный шаблон блога

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

Характеристики:

• Организованные слои
• Простота настройки

Скачать бесплатно

19. Axit — PSD Landing page

Axit — это эксклюзивный бесплатный шаблон целевой страницы в формате PSD. Он отличается чистым, современным дизайном и хорошо организованными слоями и папками для легкой настройки. Кроме того, Axit поставляется в интерактивной версии прототипа Axure.

Характеристики:

Скачать бесплатно

20. Подпись — Бесплатный лендинг PSD дизайн шаблона

Signature — это бесплатный шаблон целевой страницы для Photoshop и Sketch. Он предоставляет инструменты, которые могут создавать веб-сайты титульных страниц из ваших учетных записей в социальных сетях.

Характеристики:

• Совместимость с Sketch и Photoshop

Скачать бесплатно

Сайты, вы можете получить больше шаблонов сайтов в формате PSD

1. Freebiesbug

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

2. Behance

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

3. Themeforest

Включает 2945 PSD-файлов веб-сайтов PSD-файлов и шаблонов Photoshop.

4. UI8

Содержит бесплатные шаблоны веб-сайтов Photoshop.

5. Themewagon

Ценный поставщик шаблонов веб-сайтов.

Сводка

На этом мы завершаем список из 20 лучших бесплатных шаблонов веб-сайтов Photoshop в 2019 году. Какой бы шаблон PSD вы ни выбрали, вы, скорее всего, найдете выше. Скачай!

Вас также может заинтересовать:

25 лучших бесплатных шаблонов и ресурсов для персональных веб-сайтов

20 лучших бесплатных шаблонов посадочных страниц HTML5, CSS3 и Bootstrap в 2018 году

8 лучших бесплатных адаптивных шаблонов веб-сайтов на CSS для создания вашего веб-сайта

Как создать логотип компании в Photoshop | Small Business

Автор: Jill Harness Обновлено 29 марта 2019 г.

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

Мозговой штурм своей идеи логотипа

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

Создать новый документ

Откройте Photoshop и выберите File -> New t o создайте новый документ, и откроется диалоговое окно с множеством различных настроек.Поскольку большинство логотипов имеют прямоугольную форму. вы, вероятно, захотите выбрать размеры документа с шириной, превышающей высоту, поэтому просто начните с _ 1000 пикселей в ширину на 600 пикселей в высоту _t. На этом этапе вам не нужно слишком беспокоиться о размере холста, потому что его всегда можно изменить по мере необходимости позже.

Установите прозрачный фон, разрешение 300 и режим цвета RBG Color 8 Bit . Теперь нажмите «OK », и у вас будет пустое место для документа, готовое для заполнения.

Логотипу Photoshop нужны слои

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

Если вы собираетесь использовать текстуру или фон как часть своего логотипа, вы захотите добавить его сейчас, перетащив изображение из сохраненной папки на холст, что автоматически создаст новый слой, или открыв изображение на отдельной вкладке, затем выделив все (Ctrl + A ), вырезав (Ctrl + C) , а затем вставив изображение на пустой слой в вашем проекте логотипа.Размещение фонового изображения на отдельном слое позволяет легко оставить позади все остальные элементы вашего логотипа, чтобы ничто другое не было закрыто.

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

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

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

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

Выберите текст для вашего логотипа

Затем вы захотите решить, какой шрифт или шрифты вы будете использовать в качестве букв / текста

Как создать веб-сайт

Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.

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

A «Эскизный план»

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

Панель навигации

Боковое содержание

Какой-то текст какой-то текст..

Основное содержание

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

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

Первый шаг — базовая HTML-страница

HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример