Основы веб-дизайна: обучающий мини-курс. Курсы дизайнера фотошоп


Основы веб-дизайна: обучающий мини-курс | Уроки Фотошопа (Photoshop)

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

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

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

Вы можете посмотреть, что получилось по итогам курса на behance странице проекта

1. Основы веб дизайна #1 — модульные сетки (Grid Systems)

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

Сайты с сетками, которые упоминались в уроке:

Сайты для создания модульных сеток:

2. Основы веб дизайна #2 — Постановка задачи, работа с заказчиком, бриф, тз

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

Ссылки на документы, упомянутые в видео:

3. Основы веб дизайна #3 — Прототипирование (Prototype — Photoshop, Muse, Axure, Online services)

Третий модуль курса — введение в тему прототипирования. Рассмотрим основные понятия, сервисы и программы для создания прототипов. Поговорим в каких случаях прототипы незаменимы, а в каких могут оказаться откровенно вредны.

Сервисы:

Упомянутые программы:

4. Основы веб дизайна #4 — Создание главной страницы

В четвертом модуле от теории переходим к практике — создаем главную страницу. Это самый объёмный модуль курса. Помимо демонстрации рабочего процесса в фотошопе мы поговорим о необходимых инструментах и рассмотрим базовые принципы дизайна.

5. Основы веб дизайна #5 — Страница категории

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

6. Основы веб дизайна #6 — Мобильная (адаптивная) версия

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

На этом всё. Буду рад, если вы напишете в комментариях свои впечатления от курса.

psforce.ru

Обучение дизайну сайтов в Photoshop онлайн для начинающих

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

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

Обучение дизайну сайтов в Photoshop

Обучение дизайну сайтов в Photoshop

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

Обучение дизайну сайтов для начинающих

Обучение дизайну сайтов для начинающих

В своем курсе обучение дизайну автор расскажет и покажет на примере создание макета сайта. Вы сможете в любой момент нажать паузу и выполнить параллельно соответствующие действия. Если уделять обучению по 1-2 часа в день, то за пару недель вы освоите все материалы. В данном курсе 30 уроков, что занимают около 24 часов HD видео.

Видеокурс обучение дизайну сайтов

Видеокурс обучение дизайну сайтов

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

Что еще предлагает автор курсов?

  • Личный кабинет — возможность задавать вопросы по обучению.
  • Галерея работ — загрузите свои шаблоны в систему и получите советы от других участников.
  • Обучающая площадка — собственно вы сможете общаться не только с автором курса, но и обмениваться знаниями с другими учениками.
  • Уроки и ДЗ — после покупки курса получите доступ ко всем уроками. Некоторые из которых имеют домашние задания для выполнения.

Больше информации про обучение и автора курса найдете на сайте Sozdai Dizain. Напоследок хотелось бы рассказать о стоимости обучения и разных пакетах.

Обучение дизайну сайтов в Photoshop онлайн для начинающих

Обучение дизайну сайтов в Photoshop онлайн для начинающих

Вы можете зарегистрироваться на курс бесплатно и получить пакет Start. Сюда входят базовые теоретические знания. Посмотрите как выглядит личный кабинет, как представлены курсы, что за материалы имеются и т.п. Если все это вас устроит можно будет покупать платный курс. Там есть 2 версии — Lite (легкая) и Complete (полная). В первом случае вы рассмотрите только те видеоуроки, которые касаются создания блога. То есть, если вы учите дизайн с нуля и хотите создать свой блог, то вполне можете ограничиваться и легкой версией.

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

  • Урок по адаптивному дизайну — это весьма актуально. Здесь рассмотрена адаптация шаблона интернет-магазина под iPhone. Вообще сейчас впору дополнять все это материалами по работе с лучшими Android Apps для дизайнера которые становятся все популярнее.
  • Памятка для дизайнера — 60 инструкций по работе в фотошопе, которые пригодятся на каждый день.
  • 63000 векторных иконок + 56 стилей + видеоурок.

Данный курс в первую очередь пригодится начинающим пользователями, которые хотят научиться создавать макеты сайтов с нуля. Если же вы являетесь опытным веб-дизайнером, то здесь для вас не будет ничего нового. Также обучение не подойдет тем, кто ищет уроки по обработке фото в Photoshop, тут нужны другие курсы. Всем остальным Sozdai Dizain очень понравится! Даже, если вы неплохо ориентируетесь в фотошопе, рисуете иллюстрации, следует понимать, что дизайн сайта — это несколько иная область со своими правилами и нюансами. В этом курсе все такие моменты будут рассмотрены. Вам лишь остается выбрать подходящий пакет обучения. На данный момент действует скидка 60%, поэтому поспешите.

design-mania.ru

Бесплатные обучающие курсы в режиме онлайн!

Все бесплатные курсы в категории"Дизайн"

Количество записей в категории "Дизайн": 50

На данной странице находятся бесплатные курсы в категории "Дизайн".

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

Приглашаем Вас выбрать понравившиеся Вам курсы из категории "Дизайн" и начать проходить онлайн обучение!

С уважением, команда сайта http://freeonlinecourses.ru

Получение классных фотографий

Категория: Фотография

Краткое описание курса: В чек-листе "Получение классных фотографий" рассказывается о том, как научиться создавать привлекательные красивые фотографии Краткое содержание курса: чек-лист состоит из 4...

50 вопросов фотобизнеса

Категория: Фотография

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

7 главных принципов веб-дизайна

Категория: Веб-дизайн

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

Видеоуроки по ретуши фотографий

Категория: Фотография

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

3ds max для архитектурного моделирования

Категория: 3D дизайн

Краткое описание курса: В видеокурсе "3ds max для архитектурного моделирования" рассказывается о том, как научиться моделировать различные объекты, используя программу 3ds max. Краткое содержание ...

3ds max для дизайнера интерьера

Категория: 3D дизайн

Краткое описание курса: В видеокурсе "3ds max для дизайнера интерьера" рассказывается о том, как научиться создавать великолепные дизайнерские объекты. Краткое содержание курса: видеокурс состоит ...

Рисуем сайт с нуля в Photoshop

Категория: Adobe Photoshop

Краткое описание курса: В видеокурсе "Рисуем сайт с нуля в Photoshop" рассказывается о том, как научиться рисовать красивый сайт в программе Photoshop. Краткое содержание курса: видеокурс состоит и...

Основы визуализации в 3D Max

Категория: 3D дизайн

Краткое описание курса: В видеокурсе "Основы визуализации в 3D Max" рассказывается о том, как научиться пользоваться основными функциями в 3D Max для создания интерьера. Краткое содержание курса: к...

Пять шагов создания слайд-шоу для новичка

Категория: Фотография

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

Креативный дизайн для разминки

Категория: Adobe Photoshop

Краткое описание курса: В видеокурсе "Креативный дизайн для разминки" рассказывается о том, как научиться создавать дизайнерский макет помощью Adobe Photoshop. Краткое содержание курса: видеокурс с...

Обработка фотографий в Photoshop

Категория: Фотография

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

3dsMAX для новичков

Категория: 3D дизайн

Краткое описание курса: В видеокурсе "3dsMAX для новичков" рассказывается о том, как научиться моделировать простую мебель и создавать различные материалы. Краткое содержание курса: видеокурс состо...

Фотошоп для начинающих

Категория: Adobe Photoshop

Краткое описание курса: В видеокурсе "Фотошоп для начинающих" рассказывается о том, как научиться работать в Photoshop CS6 и создавать великолепные фотографии. Краткое содержание курса: видеокурс с...

Ретушь для новичка

Категория: Adobe Photoshop

Краткое описание курса: В видеокурсе "Ретушь для новичка" рассказывается о том, как научиться редактировать фотографии с помощью ретуширования в программе Фотошоп. Краткое содержание курса: видеоку...

Основы 3ds Max

Категория: 3D дизайн

Краткое описание курса: В видеокурсе "Основы 3ds Max" рассказывается о том, как научиться работать в программе 3ds Max и создавать трёхмерные графики и анимации. Краткое содержание курса: видеокурс...

Посмотрите также другие полезные материалы:

freeonlinecourses.ru

Курсы Photoshop в Москве – обучение Фотошопу у Максима Солдаткина

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

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

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

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.1 Быстрый старт в Фотошоп

Поехали!

Дизайн сайта в фотошопе: с нуля за 60 минут!

Для начала, это настройка рабочей области. Прежде всего, стоит зайти во вкладку “Window” в верхней панели и отключить все лишнее и включить все нужное. Во-первых — это “Character” — символы, цвета, слои, “Options”  — опции и “Tools”- инструменты. Просто поставьте эти галочки, дальше мы чуть подробнее про каждый инструмент поговорим. Просто бывает частая ошибка — очень много всего включено, на рабочей области бардак и совет такой — отключите все лишнее, включите вот только это, действительно необходимые инструменты (рис.2).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.2 Настройка рабочей области

В фотошопе при создании дизайна сайта мы создаем макет (рис.3), где горячая клавиша ⌘N (Command N), вот таким образом я буду обозначать горячую клавишу в презентации — ⌘N на Mac-е, если вы пользуетесь Windows — то это CTRL+N (Control N). То есть вот этот вот “цветочек”- это CTRL на Windows. Стоит установить единицу измерения пиксели, разрешение — 72 пикселя на дюйм, режим цвета (цветовая палитра) — RGB 8 bit.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.3 Настройка макета

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

Как создать дизайн сайта в фотошопе: фигуры и трансформация

Фигуры. Горячая клавиша “U”. Фигуры — это прямоугольник, прямоугольник с округленными углами, эллипс, многоугольник, прямая и фигура произвольной формы (рис.4).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.4 Фигуры

Этот инструмент часто применяется в photoshop при создании дизайна сайта,  и находится  он на панели инструментов, да, вот он выделен, горячая клавиша “U”. С формами, с фигурами можно производить трансформации, мы сейчас это рассмотрим на примере фигур, то же самое можно делать и с картинками. Горячая клавиша ⌘Т — свободная трансформация (рис.5), т.е. мы двигаем объект, он у нас свободно изменяет свои размеры. Если мы нажимаем тоже ⌘Т и  берем за краешек и двигаем с SHIFT-ом (вот такой вот стрелочкой я буду обозначать нажатую клавишу SHIFT), мы видим, что размер, точнее пропорция объекта сохраняется.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.5 Трансформация

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

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.6 Прямоугольник с округленными углами (неправильно)

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.7 Прямоугольник с округленными углами (правильно)

При дизайне сайта в фотошопе прямоугольник с округленными углами правильно трансформировать по точкам. Это горячая клавиша “А”. Мы выделяем точки и дальше уже начинаем их двигать стрелочками SHIFT-ом. В общем, стоит запомнить, что прямоугольник с округленными углами нельзя просто так взять и трансформировать, его нужно трансформировать по точкам.

Выделение, перемещение. Вообще, для выделения объекта — горячая клавиша “V” для выделения и перемещения она называется move to и есть клавиша “А” для точечного перемещения (рис.8). В предыдущем примере мы видели, когда я выделял точки в прямоугольнике с округленными углами, вот я как раз нажимал эту горячую клавишу “А”, выделял точки и с ним уже дальше работал.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.8 Выделение, перемещение

Копирование. Вот этот значок “⌥” — это на Mac-е “option” , если вы работаете на Windows, то это клавиша Alt (рис.9).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.9 Копирование

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

Прозрачность. Клавишами от 1 до 0 мы можем изменять прозрачность объекта, “opacity” , так называемая. Вот я сейчас просто нажимаю сейчас будет 1 — это 10, 2 — 20, 30 и так далее и так до 100, т.е. 0 — это 100% прозрачности (рис.10).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.10 Прозрачность

Дизайн сайта в photoshop: текст, выравнивание и цвет

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

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.11 Текст

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.12 Текст

При создании дизайна сайта в photoshop большую роль имеет выравнивание. Если у вас есть несколько объектов хаотичных, мы можем их выделить и выровнять. Сейчас я еще раз покажу, как это делается. Т.е. я выделяю все объекты, нажимаю “выровнять по верхнему краю” и равномерно распределить, беря за размер, за точку отсчета центр изображения. Т.е. по верхнему краю, посередине, по нижнему, то же самое по вертикали и так далее — это чтобы равномерно распределить объекты по, ну то есть равномерно распределить от первого к последнему (рис.13).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.13 Выравнивание

Дальше группы слоев еще есть (рис.14). “ ⌘G” — сгруппировать, “ ⌘ SHIFT G” — разгруппировать.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.14 Группа слоев

Давайте посмотрим дальше как сделать дизайн сайта самому. Есть несколько эллипсов, несколько объектов, я их выделяю и группирую, они у меня находятся в папочке все. Можно группы в группы заносить, можно создавать папку из нескольких папок и так далее. Горячая клавиша “⌘ G”.

Цвет. Палитра с цветами, стоит установить цветовые координаты Hue, Saturation, Brightness , т.е. тон, насыщенность и яркость в палитре, в инструменте вот эта маленькая кнопочка, маленькая иконочка, нажмите на нее и установите HSB Sliders (рис.15).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.15 Цвет

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

Как сделать дизайн сайта в фотошопе: картинки, смарт-объекты и маски

Картинки и смарт-объекты. Что важно сказать про это — смарт-объект не теряет в качестве при изменении размера, растровая картинка превращается в пятно (рис.16,17).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.16 Картинки и смарт-объекты

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.17 Картинки и смарт-объекты

О том как сделать дизайн сайта в фотошопе, я расскажу далее. Давайте еще раз. Я просто изменяю размер, смарт-объект, растровая картинка, увеличиваю, видим цветовое пятно. Смарт-объекты не теряют в качестве после уменьшения размера и последующего увеличения, т.е. можно спокойно их трансформировать и ресайдить. Картинки в дизайне сайта автоматически импортируются в Фотошоп как смарт-объекты, т.е. если вы добавляете картинку в Фотошоп, она превращается в смарт-объект. Особенность в том, что смарт-объекты нельзя редактировать. Имею ввиду, кисточкой что-то подтереть, подретушировать смарт-объекты не получится. Нужно либо заходить внутрь смарт-объекта, т.е. двойным кликом, либо просто, самый простой варинт — это кликнуть “растризовать”, кликнуть по изображению правой кнопкой мыши в слоях “Rastrize” и “Convert to smart oject”. Видим, когда “Растр” — это у нас просто изображение, когда “Smart object”, здесь появляется такая маленькая икононочка, надеюсь, вам видно. Нет иконочки, смарт-объект — есть иконочка.

Маски. Alt click между слоями, т.е. мы наживаем Alt и кликаем между слоями(рис.18).Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.18 Маски

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.19 Маски

И просто поймите сейчас, как это работает, на следующем слайде я покажу в чем суть. Т.е. у нас есть два слоя, есть эллипс, есть картинка. Мы наводим курсор, нажимаем Alt, появляется вот такая вот стрелочка и просто кликаем. Вот как это работает.

Давайте далее рассмотрим дизайн сайта в photoshop по шагам. Опять же эллипс, картинка, давайте я на паузу поставлю, когда мы превращаем эллипс в маску, у нас верхняя картинка заполняет форму этого эллипса. Соответственно, когда вы хотите сделать что-то похожее, внизу у вас должен быть, как бы, родительский объект, тот объект, формы которого вы хотите заимствовать, а сверху уже накладываете картинку, которая будет его перекрывать. Это очень распространено в фотографиях, т.е. как сделать фотографию в круге? Очень просто! Нужно сделать несколько кружочков, наложить на них фотографии и включить маску.

Настройка фотошопа для веб-дизайна: направляющие

Направляющие. Горячая клавиша “⌘R”, чтобы скрыть и показать линейки (рис.20).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.20 Направляющие

При создании сайта в фотошопе используйте линейку — это черные штучки с цифрами, это они и есть. И горячая клавиша “ ⌘;” , чтобы скрыть и показать направляющие. Т.е. давайте на скриншоте на примере, я открываю линейки и просто перетаскиваю из углов направляющие, опять же направляющие нужны, чтобы ваш макет выглядел ровно, чтобы вы могли по этим направляющим ваши текстовые блоки, картинки и фигуры уметь выровнять. И стоит еще здесь проверить, чтобы единица измерения была “пиксели”. Нужно просто нажать правой кнопкой мыши на линейке и установить пиксели(рис.21). У нас везде все в пикселях должно быть.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.21 Направляющие

Для экспорта мы заходим — “Файл”, “save for web”(сохранить для веб) и сохраняйте ваш макет, если вы делаете сайты, проще всего, самый простой формат, который  не требует настроек дополнительных — это “PNG 24” (рис.22).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.22 Экспорт файла

В чем его прелесть?  Т.е. в чем минус GPEG-а , все знаем, что картинки принято хранить в GPEG-е. GPEG — ломает шрифты, т.е. если у вас макет сайта, где много шрифтов, много текста,   в GPEG-е шрифты будут размываться, шрифты будут, так называемыми артефактами. Если мы сохраняем в PNG 24, то картинка выглядит гораздо чище. Она может занимать чуть больше места, но на первых порах, на первых этапах , чтобы не перегрузить себя какими-то настройками , ставьте PNG 24 и смело сохраняйте ваши макеты в этом формате.

И я напомню про горячие клавиши (рис.23).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Горячие клавиши в photoshop значительно ускорят работу при создании дизайна сайта.

“U” — прямоугольник, эллипс, фигуры.

“Т” — это текст.

“В” — выделение, перемещение объекта.

Клавиша “А” — для точечного выделения, помним про прямоугольник с округленными углами.

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

Alt clic между слоями — мы превращаем слои в маску, нижний слой становится маской, верхний слой на него накладывается.

“⌘Т” — трансформация, изменение размера.

“ ⌘G”, “ ⌘ SHIFT G” — группировка, разгруппировка в папки.

“ ⌘R” — скрыть и показать линейки.

“ ⌘;” — скрыть и показать направляющие.

И, думаю, всем известная клавиша “ ⌘Z” — отменить предыдущее действие и если мы зажимаем “Option” или “Alt” на Windows , ALT+Z — мы можем шагать назад по нашей истории изменений, а если мы зажимаем  ⌘SHIFT и нажимаем Z, то мы делаем шаг вперед. Т.е. с ALT-ом мы двигаемся назад, с SHIFT-ом мы можем сделать вперед, потом снова назад, вперед. Нажимаем  ⌘Z, откатываемся на предыдущее изменение.

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

maximsoldatkin.com


Смотрите также