Уроки веб-дизайна в Фотошопе, Photoshop для web-дизайна
От автора: на прошлых занятиях мы рассмотрели теоретические основы веб-дизайна. Пора переходить к практическим занятиям, поэтому сегодня Вы получите базовые уроки веб-дизайна в Фотошопе и научитесь создавать стильные кнопки для сайта.
Рекомендую Вам, в первую очередь, изучить именно эту программу. Новички, любители и профессионалы — все работают в Фотошопе. Без него не представляют своей жизни тысячи дизайнеров, художников, полиграфистов и веб-мастеров.
Если работа веб-дизайнера придется Вам по душе, с помощью Фотошопа Вы сможете не только обрабатывать фотографии, но и делать сайты, обложки книг, баннеры и многое другое! Огромный арсенал средств ретуширования, обработки и монтажа изображений, точная цветовая калибровка, «ювелирная» работа с цветом делают Adobe Photoshop самым популярным, да что там говорить — самым лучшим графическим редактором.
Данная статья будет Вам полезна в том случае, если Вы только учитесь использовать Photoshop в своей работе. Сразу приготовьтесь к тому, что будете постоянно изучать эту программу, совершенствовать свои навыки и вырабатывать свой собственный стиль.
Как начать изучение Фотошопа?
Чтобы понять, как пользоваться Фотошопом, начните с теоретических основ. В первую очередь, скачайте и установите программу. Если у вас современный компьютер на базе процессоров FX или i5–i7, с минимум 8 гигабайтами оперативки, можете смело устанавливать Photoshop СS6, если характеристики ниже — придется довольствоваться PhotoshopCS5.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееУстановили? Молодцы, теперь пришло время познакомиться с всевозможными инструментами и элементами интерфейса. Если будете регулярно заниматься уроками Photoshop для web-дизайна, то постепенно изучите все эти инструменты в процессе практических занятий.
Не пугайтесь этой программы, даже если начинаете ее изучение с нуля. В Вашем распоряжении тысячи книг, журналов, комплексных обучающих видеокурсов и уроков дизайна сайта в Фотошопе, которые структурированы таким образом, чтобы донести до новичка максимум полезной информации в кратчайшие сроки.
Дополнительно я бы посоветовал Вам полазить по разным профессиональным сайтам и изучить их оформление и структуру, чтобы найти сведения о модных тенденциях в сфере веб-дизайна, сформировать свое личное видение и развить художественный вкус.
Как настроить Photoshop для веб-дизайна?
Нажимаем Окно – Рабочая среда – Типография. Справа у Вас появятся панели работы со слоями и шрифтами.
Далее, советую перейти в настройки Ctrl+K и в разделе «Единицы измерения и линейки» выбрать Пиксели, т. к. мы работаем для веба, где используются именно пиксели, а не сантиметры.
Создаем новый файл: Файл — Новый, в каждом новом проекте проверяем, чтобы в настройках Ширины и Высоты стояли Пиксели. Разрешение — 72 точки на дюйм. Цветовая модель должна быть указана RGB цвет 8 бит.
Вообще, к параметрам создания нового документа относятся:
Имя будущего документа. Его обычно назначают при сохранении файла;
Ширина и Высота изображения. В нашем случае задается в пикселах, которые представляют собой единицу изображения в растровой графике;
Разрешение — количество точек на дюйм. Стандартным разрешением считается 72 пиксела на дюйм;
Режим. Самым распространенным является RGB цвет, глубина которого задается в битах. Обычно хватает 8 бит;
Содержимое фона, определяющее фон изображения.
Следующая настройка, о которой хотелось бы упомянуть, и о которой часто незаслуженно забывают, — это настройка обычной стрелки. Ставим галочку в Автовыборе, выбираем Слой и «Показывать управление трансформацией». Благодаря этому параметру вокруг выделенных областей будет появляться пунктирный прямоугольник с манипуляторами в серединах и углах сторон.
Ну и последняя настройка, которую нужно сделать, — это настройка на позитив 
. Без нее у вас не будет достаточной мотивации, чтобы эффективно и последовательно проходить уроки веб-дизайна в Фотошопе.
Создаем прямоугольник в Photoshop
Расскажу Вам, как сделать простенький объект в Фотошопе. С помощью инструмента «Прямоугольник» создаем одноименную фигуру, задаем ей нужный цвет заливки и границы. Здесь же можно создать прямоугольник с закругленными углами.
Небольшой лайфхак: если вы выделяете какой-либо объект (в данном случае, прямоугольник), то вы сможете изменить его размеры пропорционально, выделив его и зажав клавишу Shift. Таким образом, вы не деформируете изображение.
Это очень удобно, когда вы работаете с иконками. Зажав клавишу Alt, вы сможете скопировать объект при перетаскивании левой кнопкой мыши.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееДелаем кнопку для сайта в стиле flat design
Направление «плоский дизайн» в последнее время чрезвычайно популярно в создании сайтов. При этом отрисовка его элементов не требует экстраординарных художественных навыков.
Чтобы вы не отставали от современных тенденций, в сегодняшнем уроке веб-дизайна в Фотошопе я научу Вас, как быстро и легко сделать кнопку для сайта, даже не обладая глубокими знаниями этой программы.
Создаем новый документ Файл — Новый и выбираем инструмент «Прямоугольник со скругленными углами».
Выбираем цвет, например, оранжевый #ff8b00, и радиус углов — 4 пикселя.
Рисуем кнопку нужного размера:
Чтобы сделать небольшой объем в стиле «плоского дизайна», выполните следующий прием. Создайте копию слоя с нашей кнопкой Ctrl + J, затем нижний слой с прямоугольником на 2–3 пикселя передвиньте вниз. Сделайте его цвет более темным, например, оттенка #bf6800.
Получится примерно такой результат:
На верхний прямоугольник можно добавить стиль «Градиент». С помощью двойного клика нажмите на слой с фигурой, выберите стиль «Наложение градиента» и поставьте угол наклона 90 градусов.
Цвета градиента — #ff8c00 и #ffcc3f.
Теперь наша кнопка выглядит так:
Для подписи можно применить шрифт Myriad Pro белого цвета.
Чтобы надпись была более удобочитаемой, создадим небольшую тень. Для этого выполним те же действия, что и с прямоугольниками. Скопируем слой с надписью, а нижний слой передвинем вниз на 1 пиксель и зададим цвет #be6d00.
Результат:
Как видите, нарисовать стильную кнопку в Фотошопе — это не проблема. Теперь Вы можете создавать собственные кнопки. Главное, чтобы они вписывались в дизайн сайта, где Вы их будете использовать.
На этом наш урок веб-дизайна в Фотошопе подошел к концу. Надеемся, у Вас все получилось, и Вы извлекли максимум пользы из вышеизложенной информации.
Подписывайтесь на наш блог и получайте на почту все новые публикации по веб-дизайну. Рекомендуйте нас своим друзьям в социальных сетях. Новые знания и идеи еще никому не помешали . До новых встреч!
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнее
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видеоPhotoshop для WEB-дизайна. | Веб-мастерская Ларисы Ворониной
Photoshop для web-дизайнера является пожалуй самым основным инструментом. Если вы только начинаете осваивать web-дизайн, вам совсем не обязательно владеть программой в совершенстве, но кое-что знать нужно.
Ну для начала нужно настроить программу под себя.
Настраиваем Photoshop для web-дизайнера.
Редактирование -> настройки -> основные, или ctrl+k:
Во вкладке «интерфейс» выставляем всё как на картинке:
т.е. убираем все границы.
Во вкладке «производительность» историю действий выставляем побольше, например 60, рабочий диск лучше выбрать D.
Во вкладке «единицы измерения» везде ставим пиксели.
А почему собственно пиксели? Всё очень просто, в web-пространстве всё измеряется в пикселях, а не в сантиметрах или дюймах, Photoshop для web-дизайнера в этом плане всё предусмотрел.
Создаём рабочую среду в Photoshop.
Под рабочей средой понимается набор инструментов, которыми вы будете пользоваться постоянно.Для работы над web-дизайном нам понадобятся следующие окна: слои, история и символ. Открываются они следующим образом:
окно -> слои, окно -> история, окно -> символы
Таким же образом можете добавить и другие нужные вам окна.
Чтобы окна выглядели как одно, берём одно окно и тянем за верхнюю панель левой кнопкой мыши к верхней панели другого окна.
Сохраняем нашу рабочую среду:
окно -> рабочая среда -> новая рабочая среда,
даём ей имя и нажимаем кнопку «сохранить».
Изучаем инструменты Photoshop для web-дизайнера.
Создание нового документа:
файл -> создать, или Ctrl+N.
В открывшемся окне выставляем параметры в зависимости от нашей цели, примерно так:
Или в поле «набор» можем выбрать пункт «заказная» и выставить свои размеры.
Сохранение документа.
Чтобы сохранить созданный документ, в нашем случае это макет сайта, поступаем следующим образом:
файл -> сохранить как,
в открывшемся окне даём имя документу, например «макет сайта«, тип файла выбираем Photoshop (*.PSD;*.PDD) и нажимаем кнопку «сохранить».
Чтобы сохранить отдельную картинку для сайта делаем так:
файл -> сохранить для WEB.
Выставляем нужный нам формат, как правило, это либо JPEG, либо PNG (PNG используется для картинок с прозрачным фоном).
Чтобы сохранить отдельный блок из макета делаем следующие действия: берём инструмент «раскройка», выделяем блок (кнопку, картинку, логотип), далее
файл -> сохранить для WEB,
в открывшемся окне выставляем нужные параметры, нажимаем кнопку сохранить и появляется вот такое окно:
Если мы хотим сохранить только выделенный объект, то делаем как на рисунке и нажимаем кнопку сохранить.
Помните, что размер файла не должен превышать 100КБ, оптимальный размер 50-60КБ, иначе он будет тормозить работу сайта.
Линейки, направляющие.
Для создания макета сайта всегда используйте линейку и направляющие. В программе Photoshop для web-дизайнера это как раз предусмотрено.
Направляющие нужны для того, чтобы чётко отрисовывать все блоки сайта, кнопки, меню и т.д.
Линейка включается с помощью горячих клавиш Ctrl+R, или
просмотр -> линейки.
Направляющие создаются путём перетаскивания левой кнопкой мыши от линейки либо слева, либо сверху (с первого раза может не получиться, потренируйтесь).Отключать и включать уже созданные направляющие можно с помощью горячих клавиш Ctrl+;.
Слои.
Макет сайта всегда состоит из множества слоёв, которые помещены в отдельные папки. Выглядит это примерно вот так:
В папке «шапка» находятся все слои, которые относятся к шапке сайта, и т.д.
В папках могут находиться другие папки, которые будут содержать в себе слои.
Чтобы создать новую папку, жмём сюда:
Чтобы создать новый слой жмём сюда:
Чтобы переименовать слой или папку, щёлкаем два раза левой кнопкой мыши по названию слоя или папки и переименовываем.
Чтобы скопировать слой, делаем похожие действия, только выбираем пункт «создать дубликат слоя/группы».
Слои и папки можно менять местами путём перетаскивания.
И вот, кстати, важная вещь при настройке рабочей среды в Photoshop для web-дизайна, это настройка стрелки. Эта настройка важна тем, что при наведении курсором на слой на самом рисунке, стрелка «хватается» этот слой, тем самым мы можем передвигать любые слои на макете не переключая их.
Итак, нажимаем на стрелку в левом верхнем меню, выбираем «слой» и ставим галочку «автовыбор».
Стили.
Стили добавляются вот здесь:
С остальными инструментами и приёмами мы познакомимся на примерах в следующих уроках.
При создании WEB-дизайна сайта в Photoshop советую придерживаться правил стиля WEB 2.0
Почему Photoshop Считается Лучшим Продуктом Adobe Для Веб-Дизайна / WAYUP
Веб-дизайн многогранен и включает в себя не только работу над макетом по принципу «что где будет располагаться», но и создание необходимых изображений, обработку фотографий, различных элементов пользовательского интерфейса, иконок, клипартов, продумывание типографики и сочетания шрифтов и многое-многое иное. Поскольку веб-дизайнеры создают визуальный макет, то использование Photoshop более чем удобно и понятно. Но между тем, различные мастера в мире стараются пользоваться огромным набором приложений компании Adobe и при создании одного только макета задействуют и Illustrator, и Fireworks, и InDesign, даже новейший Experience Design (XD).
«Но зачем так много?» — спросите вы. «Какой от них может быть толк и есть ли он вообще?». Ответ и прост и сложен. Дело в том, что с одной стороны, все продукты Adobe предназначены для разных целей, с другой – кто к чему привык, а с третьей – они имеют интеграцию друг с другом. Впрочем, отличительные и особенные нюансы у каждого приложения все же есть и мы ниже постараемся их рассмотреть. Если грамотно использовать возможности каждого отдельного продукта, то создание дизайна сайтов станет проще, а может, и быстрее в некоторых моментах.
Наша цель не рассказать о конкретной работе в каждом приложении, но обратить внимание на их особенности, цели, задачи, решаемые ими. Если вы уже выбрали в чем работать, а это 99,9% Photoshop, то продолжайте совершенствоваться именно в этом, а прочее оставляйте для дополнительных возможней и расширения навыков.
Photoshop в веб-дизайне
Изначально приложение было создано для редактирования и ретуши растровых изображений и работе с фотографиями. Спустя 25 лет приложение позволяет создавать и редактировать 3D-объекты, работать с освещением в изображениях, цветностью, слоями, создавать анимацию и прочее.
В течении многих лет во всем мире Photoshop подходит и для создания веб-сайтов и макетов в формате PSD, благодаря, как раз таки, возможности работы со слоями. Они позволяют менять положение пользовательских элементов, отдельно редактировать их. Более того, макеты в Photoshop способствует тому, что сайты всегда будут в веб-браузере выглядеть так, как вы их изначально задумали при любом разрешении экрана. Стоит отметить набор фильтров, инструментов, плагинов для приложения.
Illustrator в веб-дизайне
Приложение для векторной графики. При этом можно создавать как отличные клипарты, так и иконки, крошечные favicon без потери качества и появления пикселей, как в случае с растровой графикой. Разумеется, что при необходимости обработки логотипа, так же подойдет данное приложение.
Но если рассматривать Illustrator с точки зрения веб-дизайна и макета сайта, то он не подходит как таковой. Как минимум, откорректировать фотографию вы не сможете и со шрифтами «поиграться» тоже. Что уж говорить о разметке и вёрстке, анимации. Впрочем, последнее обновление Illustrator CC (2017.1) от 5 апреля 2017 года позволяет обрезать растровое изображение без сторонних программ. В результате, обрезанные части не сохраняются, а размер общего файла уменьшается. Тем не менее, полноценно работать с изображениями в Иллюстраторе все же невозможно, но некоторые веб-мастера умудряются создавать макеты сайтов в формате AI и отсылать их заказчикам.
InDesign в веб-дизайне
Приложение, которое до сих пор поддерживается Adobe и предназначено для макетов печатной продукции (брошюр, плакатов, журналов, листовок). Но между тем, работать с сайтом тоже можно, хотя сложнее и сохранить в PSD не получится, а импорт этого формата бывает корявым частенько. Зато можно обрабатывать большие объемы текста. Настраивать колонки, поля, стиль. Назначить нумерацию для страниц, перемещать макеты, упорядочивать и многое другое.
Приложение обладает готовыми модульными сетками, есть панелька для просмотра готовых страниц, даже, например, можно создать шаблон footer и закрепить его один раз на все страницы. Можно даже редактировать AI и PSD. Но для работы Landing Page, с промо-станицами все равно потребуется Photoshop. Если же ваш сайт предназначается для большого количества текста или заказчик заказал макет множества страниц (более3-4) и готов их увидеть даже в PDF формате, то создать его в InDesign реально и удобно.
Глубокий анализ
Мысль о том, что логотипы и иконки проще создавать в Photoshop – не самая лучшая, ибо векторная графика в приложении превращается в растр. Для того чтобы искажения и пиксели были не видны, такой растр должен иметь очень высокое разрешение, что будет являться, по сути, уже вексельной графикой. Если готовую векторную картинку вставить из Illustrator – она будет пиксельной. Именно поэтому удобнее иметь или наборы готовых изображений в векторе или Illustrator на компьютере, дабы была возможность работы с вектором.
InDesign, несмотря на то, что предназначен для верстки печатной продукции может предложить минимальный набор для создания элементов веб-дизайна. Настолько минимальный, что все равно придется использовать сторонние программы. Нет даже подобающего функционала для работы с фотографиями и логотипами, фильтров.
Но вот в чем проблема. InDesign создает макеты страницы на основе готовых и имеющихся у него шаблонов. Даже сверстать их может и сгенерировать CSS и HTML. НО! Этот код не будет оптимизирован для различных браузеров. Как говорится: «код будет грязным». Очистка его превратиться в сложную рутину, которая у веб-разработчика отнимет колоссальное количество времени, а автоматический вариант не справится и вовсе. Именно поэтому Photoshop имеет большее преимущество, даже несмотря на то, что творческий процесс занимает большее количество времени. InDesign подойдет только тогда, когда заказчику нужен макет большого сайта с несколькими страницами, разными по содержанию и с большим количеством текста.
Почему не подойдет Photoshop? Потому что придется создавать отдельные PSD для каждой страницы и прорисовывать отдельно (InDesign есть шаблоны), а настроить между ними (страницами) связь и активные ссылки не получится. Более того, создать все страницы в одном PSD тоже не вариант – размер файла будет большим и затем уже верстальщикам будет неудобно разбираться, что и где. Именно поэтому при работе над большими страницами, над Landing Page – Photoshop лучшее, что может быть.
Если говорить о Illustrator и InDesign, то они похожи, с той разницей, что Иллюстратор не имеет возможности создания нумерации страниц и шаблонов книг. Но зато AI поддерживает монтажные области для создания брошюр или перевода макетов в формат PDF. В дальнейшем такой макет удобно представлять заказчикам/клиентам/партнерам. То есть Illustrator держится некоторым особняком от прочих приложений и выполняет особую роль в веб-дизайне.
Существует и такое приложение у Adobe, как Fireworks. Точнее существовал, но об этом чуть позже. Задача приложения – обработка растровых и векторных изображений для сайтов. Особенность в том, что в нем удобно делать элементы пользовательского интерфейса. Даже есть возможность проверить их работоспособность, добавить анимацию и прочее. В Photoshop это делать кропотливее. Поэтому многие известные веб-мастера имеют это приложение тоже на компьютере и сочетают в создании макета сайтов и PS, и Fw. Плюсом является то, что объекты, созданные в Fw можно переводить в CSS и HTML и затем уже вставлять непосредственно на страницы сайта. Да и код создается чистым.
Adobe Experience Design
Но сейчас программа более не поддерживается и на смену ей уже приходит Adobe Experience Design или XD. Доступна она в бета-версии для Windows и Mac бесплатно на официальном сайте. Что это за зверь? Adobe XD создаётся для макетов интерфейсов мобильных приложений, сайтов. То есть, если InDesign создан все же для полиграфии и печатной продукции, а возможность создания документов для Web как бонус, то Adobe XD создается, наоборот, для разработки «цифровой продукции», мобильных интерфейсов, десктопных. Существует совместимость с Illustrator, Photoshop, можно создавать кнопочки, макеты, элементы, работать с ссылками, переходами, анимацией, видео. И еще много всего. Можно создавать макет и видеть его в действии.
Между тем, некоторые веб-дизайнеры не стремятся на него переходить. Выглядит приложение уж больно «сырым» и многих возможностей, к которым люди уже привыкли и в Fireworks, и в Photoshop попросту нет. Да, шаблоны и принципы создания макетов разрабатывались Adobe при поддержке многих именитых специалистов, но реализовано все это еще не слишком успешно. При получении заказа на создание дизайна сайта гораздо быстрее открыть PS и нарисовать в нем, что-то создать и перенести из Fw или AI. Времени затрачивается гораздо меньше.
Так что выбирать
Итак, Adobe для веб-дизайнеров предлагает большой ассортимент приложений, каждое из которых удобно по-своему и выполняет разные задачи. Но при этом нужно понимать, что главное при создании дизайна сайтов – сделать быстро и качественно. Соответственно, выбор падает на привычный и удобный Photoshop и Illustrator для работы с вектором. Но не стоит забывать и о Fireworks, даже не смотря на то, что он не поддерживается уже, им продолжают пользоваться во всем мире. Свои непосредственные функции и задачи он выполняет. А стремиться заменять его на Adobe Experience Design тоже вопрос спорный, ибо до сих пор в версии для Mac функционала больше, чем в версии для Windows.
Цель нашего материала была не рассказать вам: «О, смотрите, это же уникальная вещь, пользуйтесь только ею!». Нет! Мы хотели просто напомнить, какие продукты у Adobe существуют для упрощения и ускорения работы веб-дизайнера и верстальщика. Рассмотреть заблуждения и нюансы этих программ, которые обычно становятся явными только после нескольких часов кропотливой работы в них.
Photoshop действительно самая удобная программа для дизайна-сайта, InDesign подойдет для макета, Illustrator – для векторных картинок, Fireworks/ Adobe Experience Design – совокупное приложение для веб-дизайна, растровых и векторных изображений. Здесь же отметим, что некоторые веб-мастера вообще стараются в своей работе не использовать Photoshop вообще и все делать только в Fireworks, даже в нынешнее время. Или не пользуются продуктами Adobe, но это же внутрикорпоративные особенности. Так или иначе, это отдельная тема, тем более что с каждым годом Photoshop продолжает улучшаться, а Fireworks переходит в формат XD.
Дизайн макета сайта в Photoshop. Детальное руководство
Что нужно знать о рисовке макета сайта в Photoshop?
Главным образом, почти 98% проектов функциональных сайтов начинаются с разработки и рисовки веб-дизайна в Фотошопе.
Дизайн-макет сайта – будущий Интернет-ресурс на стадии разработки. В будущем его можно применить к порталу, блогу или к торговой Интернет площадке. Также, это может быть лендинг страницей, отдельно прорисованным графическим образом и т.п. Дизайн сайта может быть как нейтральным, так и иметь функцию – главного представителя образа предоставленной продукции в нем или информационного контента.
На выходе получится многослойная раскладка, которая дальше пойдет в верстку и кодирование. Потому дизайн сайта имеет свой ряд обязательных элементов:
- шапка;
- расположение меню;
- навигация;
- цветовая гамма;
- шрифты и т. д.
Первое что тебе нужно – концепция.
Ответь себе на вопрос: «Для чего\кого тебе нужно создать дизайн веб-сайта?». Про рисуй целевую аудиторию и просчитай в уме перечень функций и задач, которые должен обязательно выполнять сайт.
Однако существуют каноны — дизайн сайта должен быть максимально функционален, практичен и эстетичен.
Пошаговое создание дизайна сайта в Photoshop
Нарисовать сайт в фотошопе — неотъемлемая часть жизни веб-дизайнера. Итак, мы пошагово разберем как создавать веб сайта. В этом уроке для новичков начнем разбирать пошагово шапку будущего сайт, а в следующем уроке для начинающих – основную часть. Итак, макет сайта в Photoshop.
Шаг №1
Делаем новый проект для чайников. Начни с создания план-эскиза будущего макета. Его можно как нарисовать от руки на листке бумаги, так и создать в Photoshop. Он представляет собой приблизительный будущий вид веб-сайта.
Шаг №2
Твой макет сайте будет шириной в 960 пикселов (px). Нажми «Файл» — «Создать» (> File > New Document) или комбинацию клавиш «Ctrl+N». Поставь размер 1200х1500 пикселов и разрешение 72 пиксела. Цвет RGB, 8 бит, фон – белый.
Шаг №3
Выдели весь документ при помощи инструмента «Прямоугольная область» (> Rectangular Marque Tool) или нажми комбинацию клавиш «Ctrl+A» -она автоматически выделит всю область документа без исключений.
Шаг №4
Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).
Сверху, на панели настроек установи значение ширины – 960 px. Это будет главная рабочая область макета, в которой тебе предстоит работать.
Шаг №5
Установи линейки (направляющие) точно по границам выделения. Перетащи их вручную указателем мыши. Если у тебя в Фотошопе не включены линейки, зайди в «Просмотр» и нажми галочку напротив — «Линейки» (> View > Rulers).
Шаг №6
Далее, сделай отступ между краями рабочей области макета и зоной главного контента. Перейди в меню «Выделение» – «Трансформировать выделенную область» (Select > Transform Selection). Уменьши выделение по ширине до отметки в 920 пикселов.
Шаг №7
Следующее, что нужно сделать – создать выделение высотой в 465 пикселов, как это показано на примере.
Шаг №8
Создай новый слой и залейте выделенную область серым, используя, например, «Инструмент Кисть» (> Brush Tool) или «Инструмент Заливка» (> Paint Bucket Tool).
Шаг №9
Выбери цвета для градиента, используя палитру цветов – она на панели инструментов слева.
Шаг №10
Примени градиент. Его можно найти также на панели инструментов или кликнув два раза мышкой по необходимому слою. На примере пошагово объяснено что за чем нужно кликать – 1. «Наложение градиента», 2. «Градиент», 3. Выбрать ваши цвета из палитры «Набор». 4. Указать желаемый угол градиента.
Шаг №11
Твоей шапке сайта нужна подсветка. Кстати, не забывай именовать и сортировать новые слои, чтобы потом не перепутать что где находиться.
Итак, продолжи. Создай новый слой (сразу его проименуй!) – «Ctrl + Alt + Shift + N»и выберите мягкую кисть, размер, например около 600 пикселов (можешь менять размеры по своем вкусу).
Шаг №12
Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».
Шаг №13
Кликни кистью один раз в центре шапки. Поставь прозрачность и удали потом часть пятна – разруби его, например, инструментом «Прямоугольная область» и нажмите клавишу «Delete». Слой с подсветкой сожми по вертикали и растяни (комбинация клавиш «Ctrl + T»).
Шаг №14
Чтобы отцентрировать необходимые слои – выбери их и выбери инструмент «Перемещение» (> Move Tool) или клавиша «V». На панели свойств (вверху) нажми «Выравнивание центров по горизонтали» (> Align Horizontal Centers).
Шаг №15
Создай новый слой («Shift + Ctrl + N»). Поставь карандашом (> Pencil Tool) точку. Растяни ее по горизонтали («Ctrl+T») и сгладь края градиентом как делал это ранее.
Шаг №16
Временно отключи видимость фонового слоя. Ставим там две точки инструментом «Каранадш» (Pencil Tool), размером в 2 пиксела. Жми далее «Редактирование» – «Определить узор» (Edit > Define Pattern).
Шаг №17
Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».
Шаг №18
Выбери далее «Регулярный» и кликни на созданный тобой узор.
Шаг №19
Выбери область как указанно на примере и примени задачу.
Шаг №20
Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.
Шаг №21
Далее, выделяй узор в произвольном порядке инструментом «Овальная область» (> Elliptical Marquee Tool). Применяй инверсию выделенной области и при помощи «Растушевки» (> Feather) сгладь края и удаляй ненужную область узора.
Шаг №22
Затем пишем название логотипа при помощи инструмента «Горизонтальный текст». К слою с логотипом можно также добавить стиль слоя «Тень» (>Drop Shadow), что находится в меню слоя (два раза жми кнопкой мыши на нужный слой).
Шаг №23
Добавь новые области границ линейкой, чтобы визуально текст не прыгал в разных абзацах друг от друга.
Шаг №24
Напиши название для будущих кнопок.
Шаг №25
Здесь в дальнейшем будет так званный – слайдер для контента. Выдели область размером 580х295 пикселов и помести туда любой снимок.
Шаг №26
Далее, создай визуальный эффект к слайдеру. Создай новый слой («Shift + Ctrl + N»), выбери «Кисть» (> Brush Tool) и по тому же принципу, что и с точкой – поставь точку диаметром около 400 пикселов и растяни ее (Ctrl+T).
Шаг №27
Продублируй слой и помести его за слайдер, который, кстати, тоже не помешает отрегулировать по цвету.
Шаг №28
Убираем ненужные края, чтобы смотрелось аккуратнее.
Шаг №29
Делай два новых слой и рисуй прямоугольные кнопки для слайдера. Делай их полупрозрачными.
Шаг №30
Добавь указательные стрелки инструментом «Произвольная фигура».
Шаг №31
Создай новый слой и прямоугольником выдели область внизу слайдера — инструмент «Прямоугольная область выделения» (> Rectangular Marqee Tool). Сделай ее полупрозрачной (непрозрачность — 50%). Напиши текст.
Шаг №32
Добавь описание сайта или проекта.
Настройка фотошопа для веб-дизайнера | Данил Фимушкин
Если ты только начинаешь осваивать фотошоп для веб-дизайна, начинай правильно. Расскажу о настройках фотошопа, которые надо применить для того, чтобы в вебе у тебя ничего не поехало и не выцветало.
Открываем фотошоп, после установки он будет выглядеть так:
Переходим во вкладку «окно» («window») -> «workspace» (рабочая среда) и выбрать типография («typograthy»)
У вас появится такая панель.
Обычно закрываю панельку «параграф стайл», для этого нужно 2 раза кликнуть и появится панель символ и абзац (работа со шрифтами). Разумеется, слева, панель инструментов.
Нажимаем ctrl + K, открываются основные настройки.
В разделе «единицы измерения и линейки» выбрать пиксели. Пиксели, потому что работаем для веба, а в вебе измерения производятся в пикселях, а не в точках, сантиметрах и прочем.
Когда создаешь новый файл, внимательно смотри, чтобы при каждом новом проекте в настройках стояли пиксели, в разрешении (resolution) 72 пикселя на дюйм, и цветовой режим RGB 8 bit. Этих настроек достаточно.
Следующая важная настройка стрелки. Обязательно поставь галку в поле «автовыбор» (auto select) выставить «слой» и галочку «показывать управляемый элемент».
На этом с основными настройками всё. Теперь об объектах, которые используюьтся в ФШ для веб-дизайна.
Чаще всего используется прямоугольник. Мы просто его протягиваем нужного размера, задаем цвет заполнения, цвет и ширину обводки. Есть так же прямоугольник со скругленными углами. Его можно найти если в панеле инструментов на прямоугольнике нажать маленькую стрелку в правом нижнем углу.
С ним работа такая же как с обычным прямоугольником, но есть дополнительный параметр (в новых версиях) — радиус закругления.
Интересные особенности фотошопа: если выделить объект и зажать клавишу shift, то он меняется пропорционально и не деформируется. Это очень помогает при работе с иконками или фотографиями. Если зажать клавишу alt при перетаскивании вы просто копируете элемент. Вам не нужно дополнительно нажимать «копировать» и «вставить».
Настройки смешивания в фотошоп
Очень часто в ФШ используются настройки смешивания. Выделяешь объект, 2 раза кликаешь по слою, открывается окно настроек слоя.
В нем можно добавить различные эффекты на слой: падающую тень, внутреннее свечение, наложение текстуры, градиента или цвета, внутренняя тень, внутреннее свечение, обводка и выдавливание. Не переборщи с ними, новички часто увлекаются и получается жесть.
Как сделать кнопку в фотошоп
Создаю новый файл размером 400×300 пикселей. Выбираю прямоугольник со скругленными краями с радиусом скругления 5 пикселей. Задаю моему прямоугольнику цвет. Беру инструмент текст, кликаю на нужном мне месте и пишу «загрузить». Выделяю текст, выбираю шрифт (можно его выбрать до того, как написали текст). Стрелкой выравниваю надпись, чтобы она была по центру. Кстати, для выравнивания можно зажать кнопку shift выбрать необходимые элементы (в нашем случае прямоугольник и текст) и на панели управления сверху нажать на иконку «выравнивание центров по горизонтали». Всё выравняется автоматически. Или можно использовать стрелки на клавиатуре, при каждом нажатии на стрелку выделенный элемент будет смещаться на 1 пиксель, с зажатой клавишей shift — на 10. Я часто использую стрелки для выравнивания, это очень удобно. Теперь придадим объема кнопке. Кликаем 2 раза на слой, добавляем настройки смешивания: немного внутренней тени. Я ставлю угол падения тени -90 градусов. Размер 4 пиксела и прозрачность 57.
Можно использовать такие же параметры, а можно сделать какие-то свои. Кнопка готова.
Далее выделяем наши 2 слоя в поле слоёв справа с помощью зажатой кнопки ctrl, нажимаем ctrl + G и получаем группу слоёв. Назову её button. Далее делаем скриншот нашей картинки с помощью gyazo и отправляем в комментарии под постом.
Photoshop для веб дизайнера: бесплатные инструменты
От автора: Photoshop все еще самый любимый инструмент среди веб-дизайнеров, а правильные дополнения сделают его еще более мощным. Чтобы повысить вашу продуктивность, сэкономить вам время и нервы мы подобрали несколько ценных ресурсов для фотошопа, плагинов и скриптов. Некоторые из них ускорят выполнение рутинных задач, чтобы вы могли уделить внимание настоящей работе, другие же инструменты создадут мостик между фотошопом и кодом, и ваши дизайны макетов вберут в себя все плюсы от обоих миров. Все инструменты бесплатные и работают с Photoshop CC 2015, если в статье не указано что-то другое.
HTML Block
Код и фотошоп не подходят друг другу? На самом деле подходят, если вы установите HTML Block. Плагин задействует Webkit движок для рендеринга HTML/CSS на лету, код размещается в специальных блоках. Удобно, если вы хотите использовать сторонние шрифты в макете и хотите видеть, как данный шрифт будет отображаться в живую на странице, как в браузере. Также удобен для создания изменяющих свой размер элементов интерфейса.
Page Layers
Если вы предпочитаете проектировать дизайн страницы прямо в браузере, но на выходе вам нужен файл фотошопа, то взгляните на Page Layers. Приложение конвертирует любые веб-страницы в файл фотошопа. Все элементы находятся на отдельных слоях со своими именами. Также полезен при изменении текущего дизайна страницы. Page Layers совместим с Mac OS X и стоит $34.99.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееBjango Actions
Коллекция с открытым исходным кодов экшенов и скриптов множества задач для фотошопа от автора Bjango. Среди прочего инструмент может масштабировать ваши документы, нарезать их и более точно позиционировать элементы.
Ditto
Ditto – плагин, с помощью которого элементам можно задавать переменные, такие как цвета, строки текста, размер шрифта, высота строки, Х и У позиционирование и даже видимость. После установки Ditto не обязательно всем редактировать PSD файл, но это самый надежный способ поддерживать самые новые значения переменных.
Renamy
У вас множество слоев, которые нужно переименовать за один раз, и вы не хотите делать это вручную? Тут на помощь придет Renamy. С помощью плагина можно выбрать несколько слоев и задать им новые имена всего в один клик. Демо версия бесплатная, но в ней можно за раз переименовать не больше пяти слоев. В полной версии ограничения отсутствуют.
Duplllicator
Duplllicator поможет вам клонировать слои и группы. Необходимо выбрать число копий и горизонтальный и вертикальный. Плагин работает с Photoshop CC и CC 2014.
Size Marks
Size Marks – скрипт конвертирует выделенную прямоугольную область в маркеры с расстоянием. Работает в CC 2014 и CC 2015.
Magic Wand Tricks
Последний, но не менее важный, один из самых старых инструментов для фотошопа, который уже встроен в программу — Magic Wand. Инструмент намного более универсальный, чем вы могли подумать. Вы знали, что с его помощью можно нарезать элементы? Также можно быстро центрировать слои и группы. В сочетании с гистограммой его можно использовать для подсчета пикселей на выделенной области.
А какие ваши любимые инструменты в фотошопе? Пишите об этом в комментариях!
Источник: https://www.smashingmagazine.com/
Редакция: Команда webformyself.
Веб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma
Узнать подробнееВеб-дизайн. Быстрый старт
Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!
Смотреть видео10 Бесплатных Полезных Плагинов Photoshop Для Веб-Дизайнеров / WAYUP
Adobe Photoshop – это лучшая в мире программа цифровой обработки изображений. В течение многих лет и до настоящего времени это программное обеспечение является самым лучшим другом веб-дизайнеров по всему миру, чтобы экспериментировать и осваивать новые цифровые горизонты визуализации.
Однако, иногда это занимает много времени и усилий, особенно, когда дело касается тонкой настройки эффектов в Photoshop, с целью сделать окончательный вариант дизайна реально крутым. Плагины Photoshop часто помогают разработчикам более эффективно делать свою работу.
Но выбрать хорошие плагины не так легко, к тому же это может занять некоторое время. Сохраняйте спокойствие: специально для вас мы сделали отличную подборку бесплатных плагинов, которые значительно облегчат процесс работы над созданием дизайна.
Ну, поехали!
Что бывает порой труднее всего сделать при создании дизайна? Выбрать правильную цветовую гамму, чтобы ваш дизайн гармонично смотрелся. Плагин Adobe’s Kuler , как нельзя лучше поможет вам в этом вопросе, подбирая за вас все подходящие оттенки и цветовую палитру на основе базового цвета.
Это бесплатный плагин, который позволяет использовать WebINK и шрифты Google Web Fonts в создании макетов веб-сайтов. Этот отличный инструмент дает легкий доступ к использованию более 1000 веб-шрифтов WebINK прямо в Adobe Photoshop. Чтобы получить плагин, вам придется скачать и установить пробную версию Suitcase Fusion 5 — профессиональный менеджер шрифтов от Extensis. В настоящее время плагин Web Font может быть использован в Adobe Photoshop CS5, Adobe Photoshop CS5.1, Adobe Photoshop CS6, Adobe Photoshop CC (версия 14), Adobe Creative Suite 5.5.
.png)
Так как создание сетки в Photoshop порой может затребовать много усилий, большинство дизайнеров просто прикидывают на глаз и произвольно перетаскивают направляющие. Это отличный плагин, который предоставляет инструмент для создания пиксельных точных столбцов, строк, срединных и базовых уровней. Если у вас есть активный выбор в документе Photoshop, GuideGuide создаст сетку, которую вы укажите в пределах границ выделенной области.
.png)
Flaticon.com — это популярная платформа с более 35 тысячами иконок, которые отвечают всем последним трендам в дизайне. А некоторое время назад платформа разработала специальный плагин для Photoshop, чтобы дизайнеры могли быстро находить нужные иконки, не выходя из своей рабочей среды. Созданный специально для дизайнеров и разработчиков, Flaticon — это классный бесплатный проект, который вы обязательно должны посмотреть. Вы можете находить необходимые иконки, выбирать и использовать их в векторном формате. Вы также можете настраивать их по своему усмотрению.
Это здоровский облачный плагин для Photoshop, который преобразует ваши слои в CSS3. Поскольку все вычисления производятся непосредственно в облаке, большинство обновлений и исправлений являются понятными для всех пользователей и вам не придется обновлять плагин, чтобы использовать новые возможности. Пользователи также могут просмотреть результат в браузере и поделиться им с другими людьми. Преобразование слоев в CSS3PS происходит за пять секунд.
Cut&Slice me — плагин Adobe Photoshop CS6, разработанный Daniel Peruho. Инструмент повышает до современного процесса нарезку с большим количеством мощных функций. Особенности этого плагина включают в себя принятие группы слоев и рассмотрения ее как единого объекта. После этого он обрезает лишние пиксели и экспортирует группу в файл изображения.
Ваш сайт или дизайн нуждается в детальном фоновом рисунке? В этом случае вы можете использовать плагин SubtlePatterns для своих нужд. Он поставляется с огромным разнообразием шаблонов и весьма легок в использовании. К слову сказать, почти все шаблоны были созданы самими пользователями, так что вы можете даже не сомневаться в их качестве. Даже если вы выберете замысловатые компоненты для шаблона, можете быть уверены, что они не будут отвлекать посетителей сайта от основного контента.
Вы находите затруднительным превращение ваших скевоморфических PSD сайтов в плоский дизайн? Тогда попробуйте использовать этот инструмент, чтобы раз и навсегда забыть об этой проблеме. Этот замечательный плагин, который вы можете легко скачать и использовать для удаления ненужных эффектов на слоях вашего дизайна.
Как создавать веб-страницы из PSD? Используйте SiteGrinder. Инструмент поможет вам превратить ваши файлы PSD в веб-страницы. С SiteGrinder, вам не нужно резать или писать код. Если вам когда-либо посчастливилось работать с Divine Elemente, то вы почти сразу заметите, что данный плагин имеет практически аналогичные удобства в использовании.
Если вы ищете плагин, который поможет вам в управление шрифтами, тогда этот инструмент то, что вам нужно. Вы можете просматривать шрифты, которые планируете использовать в вашем проекте, а также он помогает организовать их и с легкостью открывать. Плагин поставляется с набором шрифтов, из которых вы можете выбрать тот, который вписывается наилучшим образом в ваш дизайн.
Всего вам доброго!!!