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

Читайте другие статьи

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

Веб-дизайн

28 мая 2021

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

Веб-дизайн

27 июля 2020

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

Веб-дизайн

27 февр. 2020

Photosop как инструмент веб-мастера

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

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

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

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

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

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

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

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

Новый документ для будующего сайта

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

Документ создан, начинаем рисовать. О том как рисовать в Photoshop в двух словах не расскажешь — дело это не простое. Но по данной тематике в интернете очень много полезных сайтов. Вот, например, http://www.photoshop-master.ru/ . Так же есть большое количество полезной литературы (для скачки книг бесплатно пользуйтесь сайтом http://torrents.ru/).

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

Теперь остается грамотно порезать макет дизайна сайта и сохранить в грамотные форматы грамотным образом.

Картинка на градиентном или сложном фоне

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

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

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

Простой фон

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

В этом случае для нас оптимален формат сохранения jpg.

Сохранять из Фотошопа нужно по комбинации клавиш Shift+Ctrl+Alt+S — это сохранение для web или устройств.

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

Дополнительные настройки сохраняемого изображения

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

Хочу заметить, что при сохранении простого изображения (четкие границы, отсутствие градиентных и сложных цветом) даже в случае простого фона, оптимальным по соотношению вес/качество окажется формат gif.

Как правильно вырезать

Очень часто приходится видеть следующие ошибки:

Когда нужно замостить блок градиентным цветом (блок имеет изменяемую длину и постоянную высоту) вырезают слишком длинный кусок градиентного фона. Это совершенно ни к чему. Достаточно вырезать кусочек градиента длинной в 1 пиксель и высотой, равный высоте заполняемого градиентом блока. Далее свойством background-repeat: repeat-x повторяем нашу градиентную картинку вдоль оси Х и замащиваем фоном весь, отведенный под него, блок. При этом наша 1-пиксельная картинка (формата jpg) залетает на компьютер пользователя в мгновение ока.

Так же часто приходится видеть использование png-формата с прозрачным фоном в тех местах, где можно обойтись обычным jpg. Моя нелюбовь к формату png следует из того, что прозрачность в нем не работает корректно с IE6 и необходимо подключать дополнительные фиксы.

С уважением, Андрей Морковин.

Как нарисовать сайт в фотошопе

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

Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить.

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

Продолжение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх.

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

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

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

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

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

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

Важно!

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

Группы

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

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

Верхнее меню

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

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

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

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

1. Переходим в пункт «Тень» и задаём следующие параметры:
2. Вот, что должно получиться:
3. После этого просто копируем слой с нашей линией и выставляем после каждого слова. Вот что у меня получилось:

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

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

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

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

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

Логотип

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

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

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

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

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

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

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

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

• Сейчас переходим к панели с информацией, которая будет говорить пользователю где он находится на сайте.
• Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

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

1. Для начала добавляем полосы с линейки как на рисунке ниже:
2. Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000
3. Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #eeeeee

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

Контент

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск».

   С помощью линии делаем вот так:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скачать

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

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

Источник: http://beloweb.ru/novichkam/kak-sdelat-maket-ili-dizayn-sayta-v-photoshop.html

Дизайн макета сайта в 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

Добавь описание сайта или проекта.

Источник: https://webdesguru.com/dizajn/lekcii/photoshop-lektor-dizajn-maketa-sajta-v-photoshop-detalnoe-rukovodstvo/

Создание чистого современного дизайна сайта в Photoshop

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

Начнем создание дизайна сайта в Photoshop с заголовка. Сделайте выделение по всей ширине документа и залейте его белым цветом. Дважды щелкните на слое, чтобы открыть стили слоя и добавьте «Наложение градиента» (Gradient Overlay) с вертикальным переходом от серого цвета к белому:

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

1. 
   Выделив область заголовка с маской, нажмите CTRL+SHIFT+C, чтобы скопировать совмещенные данные, а затем вставьте их на новый слой. Перейдите на вкладку Фильтр > Шум > Добавить шум, чтобы создать простую текстуру, затем установите режим наложения «Умножение» и снизьте прозрачность до подходящего значения:
2. 
   Далее продолжаем делать сайт в Фотошоп, вставив логотип компании и расположив его в сетке. Добавьте стиль «Наложение градиента» с настройками, соответствующими цветам заголовка, затем создайте мягкую внутреннюю тень:
3. 
   Используйте инструмент «Текст» для создания меню главной навигации, задайте средне-серый цвет для шрифта, а для активной ссылки используйте немного более темный оттенок:

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

• Продолжайте детализировать вводный контент, но на этот раз используйте семейства шрифта Arial или Helvetica, чтобы текст можно было поместить в html без замены изображений:
• Перед тем, как сделать сайт в Фотошопе до конца, расположите изображение ноутбука посередине. Это хорошо согласуется с образом выдуманной компании, и создает отличное тематическое пространство для отображения примеров работ на экране компьютера:
• Подчеркните эту область радиальным градиентом, исходящим из-за компьютера. Этот дополнительный штрих поможет возвысить элемент над страницей:
• Под основным заголовком создайте другое выделение и заполните его бело-серым градиентом:

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

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

1. При создании сайта с нуля в Фотошопе и верстке используем инструмент «Прямоугольник со скругленными углами», чтобы нарисовать прямоугольник на боковой панели. Первоначальный цвет не имеет значения, так как мы будем менять его стиль в следующем шаге:
2. Дважды щелкните по слою и добавьте ряд стилей слоя, в том числе серо-белый градиент, тонкую серую обводку и мягкую внутреннюю тень:
3. Используйте эту боковую панель, чтобы разработать секцию Featured Project (Рекомендуемый проект). Ее элементы могут включать в себя небольшие снимки и отрывки текста:
4. Нарисуйте еще один прямоугольник, чтобы использовать его как кнопку. Добавьте пару стилей слоя, таких как «Наложение градиента» и «Обводка», чтобы стиль кнопки соответствовал общей серой теме:
5. Создайте короткую и содержательную надпись для кнопки, побуждающую пользователя пройтись по сайту, чтобы посмотреть будущие проекты:
6. Обозначьте конец контента, нарисовав на экране область подвала. Заполните это пространство светло-серым цветом, чтобы отличить его от области основного контента:
7. Создание сайта в Photoshop продолжим с рисования круглой маски и заполнения ее радиальным градиентом от черного до прозрачного. Нажмите Ctrl+T, чтобы трансформировать выделение, сожмите и растяните созданную область для формирования длинного, похожего на тень изображения:
8. Расположите тень по центру экрана, затем удалите лишнее пространство над подвалом. В результате получится тонкая тень, которая «приподнимает» главную страницу, добавив дизайну немного деталей:

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

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

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

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

Данная публикация представляет собой перевод статьи «Create a Clean Modern Website Design in Photoshop» , подготовленной дружной командой проекта Интернет-технологии.ру

Источник: https://www.internet-technologies.ru/articles/sozdanie-chistogo-sovremennogo-dizayna-sayta-v-photoshop.html

Создание дизайна сайта при помощи Photoshop

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

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

Нужны лишь базовые знания Фотошопа и фантазия.

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

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

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

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

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

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

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

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

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

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

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

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

Макет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://nastroyvse.ru/programs/review/kak-narisovat-sajt-v-fotoshope.html

Пошаговое создание макета сайта в фотошопе — шаблон для сайта

• 2,482 просмотров всего, 5 просмотров сегодня
• Оглавление
• Итак, вы решили поднять бизнес на новый уровень и запустить свой собственный сайт. У вас есть несколько вариантов:

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

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

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

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

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

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

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

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

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

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

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

Мы рекомендуем использовать сетку BOOTSTRAP? для удобства дальнейшей верстки и адаптации

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

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

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

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

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

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

Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V). Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).

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

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

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

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

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

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

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

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

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

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

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

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

Источник: https://stebnev-studio.ru/blog/sozdanie-maketa-sayta-v-photoshop-rukovodstv/

Программы для веб-дизайнера: где рисовать сайты? | GeekBrains

https://d2xzmw6cctk25h.cloudfront.net/post/831/og_cover_image/97fa033cee88a8a8ad015e3c2dd8614b

Перед тем, как читать дальше, настоятельно рекомендую убедиться в том, что вы правильно понимаете, что такое «веб-дизайн». Ведь это не вёрстка и не программирование. И точно не создание сайта под ключ. Поэтому программы Dreamweaver, Muse, Webflow и прочие автоматически отпадают.

Также хочется отметить, что для рисования сайтов НЕ подходят графические программы:

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

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

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

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

Плюсы:

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

Минусы:

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

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

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

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

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

Pixate

Удобный сервис для визуального прототипирования. Веб-версия позволяет создавать анимацию для мобильных устройств на базе iOS и Android. А настольное приложение для Windows и Mac. В Pixate много разноплановой встроенной анимации и интерактивных жестов. Также есть библиотека скриптов. Для продвинутых дизайнеров, которым мало шаблонных инструментов, предусмотрена возможность создания авторских программ на JavaScript. Сервис постоянно развивается, что сделало его ТОП-овым для западноевропейских и американских веб-дизайнеров. В среде отечественных специалистов он только набирает популярность.

Affinity (for Mac OSx)

По мнению профессиональных веб-дизайнеров, этот редактор вскоре заставит забыть о Photoshop. И не только потому, что его стоимость на порядок ниже популярного аналога. Его функционал объективно превосходит софтверную легенду. Программа работает с CMYK и LAB, поддерживает PSD и обработку RAW. Особенно впечатляет работа с векторной графикой, качественное масштабирование и ещё некоторые «фишки». Инструмент заточен только под «яблочную» ОС и становится всё более популярным в профессиональной среде.

Avocode

Программа полностью совместима с Photoshop. Позволяет превратить эскиз сайта (в формате psd или sketch) в интерактивную страницу. Незаменима для тех, кто занимается вёрсткой и разработкой мобильных приложений. Используя Avocode с исходниками удастся работать непосредственно через веб-интерфейс или десктоп-приложение.

Antetype

Многофункциональная среда для разработчиков пользовательского интерфейса самого разного формата с учётом правил UX дизайна. Ресурс радует объёмной библиотекой виджетов и гибкой отзывчивостью. А встроенный учебник образцов проектов позволяет быстро приступить к работе даже новичку. Среди плюшек Antetype можно обозначить возможность настроить свойства экрана, стиль, ресурсы, истории.

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

А вы используете хоть один из этих инструментов в своей работе? Может есть другие альтернативные варианты? Пишите в комментариях! 

Как нарисовать красивую кнопку для сайта — уроки фотошоп

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

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

Начнем с того, что создадим новый документ, на котором будем работать. Я сделал серенький фон (почему-то часто попадается такой фон на сайтах, где нужны кнопки). На панели инструментов выбираем Rounded Rectangle Tool (прямоугольник со скругленными краями). Показал на скриншоте ниже.

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

Делаем форму

Создаем при помощи выбранного инструменты такую фигуру.

На панели слоев выбираем слой с нашей фигурой и добавляем ей стили Gradient и Stroke (для этого внизу панельки Layers нажимаем на кнопку Functions и выбираем один из перечисленных ранее стилей, второй настроем уже в открывшейся панели).

В настройках Gradient выставляем прозрачность 100%, цвет градиента от #0e6aab до #73d8fe, а также стиль Linear и угол 90 градусов. Чтобы было нагляднее, сфоткал этот экран.

Настраиваем теперь Stroke – это будет рамка или ободок для нашей кнопки. Делаем максимально тонкой – выставляем всего 1px, “Color” ставим такой же, как внизу градиента – #0e6aab.

Получаем вот такую основу, с которой нам предстоит совсем чуть-чуть поработать.

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

Добавляем на нашу основу текст. Например, при нажатии должно отправляться письмо, поэтому сделаем надпись “Отправить”. Шрифт я выбрал Arial размера 18 и начертанием Bold, цвет белый.

Также, ниже создаем копию надписи, но Coloe #1b75af и сдвигаем на одну точку вправо и вниз. Результат ниже.

Создадим еще белый слой-подложку и сдвинем его по аналогии с текстом. Это поможет немного отделить объект от фона, добавит объем.

Скачать PSD-шаблоны кнопок для сайта (набор из 8 штук)

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

Скачать (размер архива 380 кб)

Видео-урок на ту же тему

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

Похожие публикации на блоге:

Источник: http://astrapromo.com/articles/uroki-photoshop/sozdaem-krasivuyu-knopku-dlya-sayta-v-fotoshope.html

Создание кнопки в фотошопе

/ Сергей Нуйкин / Уроки по фотошопу

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

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

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

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

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

Давайте рассмотрим эти четыре состояния:

1. Статичное состояние — это состояние кнопки, при котором пользователь не производит никакого действия с ней.
2. Наведение — это состояние кнопки, при котором пользователь навел на нее курсор мыши.
3. Нажатие — это состояние кнопки, при котором пользователь нажал на нее.
4. Активная – это состояние кнопки при котором она является выделенной и показывает пользователю где он находится (обычно это используется для того чтобы пользователь понимал свое место нахождения к примеру на какой странице сайта он находится).

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

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

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

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

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

И сдвинем слои вниз при помощи инструмента перемещение (V).

Чтобы кнопка была более объемна, создадим немного свечения и контур, сделаем мы это через внутреннее свечение в стиле слоя. Зададим цвет для свечения.

Теперь доработаем слой с тенью. Идем слой > растрировать. Уменьшаем непрозрачность до 13% . Далее применим фильтр размытие по гауссу, с параметрами как показано на скрине ниже.

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

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

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

Первым делом заключим созданную кнопку в группу слоев и назовем группу статичное состояние. Для этого зажмем кнопку Shift и выделим все слои кроме фона, затем нажмем Ctrl+G и переименуем группу.

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

Расположим группы ниже по порядку, для этого выделим инструмент перемещение (V) выделяем группу и нажимаем на стрелку вниз на клавиатуре.

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

Далее отредактируем состояние кнопки при нажатие.

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

  Чтобы уменьшить объем нам придется выделить слои объем и тень, так как наша тень также станет меньше, и при помощи инструмента перемещение (V) стрелочкой на клавиатуре поднимем их вверх.

И наконец, сделаем кнопку в активном состояние. Для этого необходимо изменить цвет наложения градиента как у кнопки наведение, а также убрать тень и объем как у кнопки нажатие.

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

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

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

Источник: http://FotoDizArt.ru/knopka-v-fotoshope.html

В предыдущей статье я рассказала вам об основных правилах стиля WEB 2.0.  А в этой статье применим эти правила на примере создания кнопки для сайта.

Идём в Photoshop и создаём новый документ CTRL+N.

Ширину выставляем 500px, высоту 300px.

На верхней панели нажимаем на пункт меню «окно» и выбираем «слои», или просто нажимаем F7.

У нас появляется вот такое окно:

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

!!! Всегда давайте названия каждому слою! Именно по названию вы всегда сможете найти нужный вам слой.

Кнопку для сайта мы сделаем на голубом фоне.

Берём инструмент «Заливка»

и заливаем фон голубым  цветом.

Для точного подбора цвета скачайте программу ColorMania.

Сама кнопка будет шириной 300px, высотой 100px.

Включаем линейку: CTRL+R или на верхней панели нажимаем пункт «просмотр» и выбираем «линейки».

Выставляем направляющие. Вертикальные на 100px и на 400px, горизонтальные на 100px и на 200px.

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

Берём инструмент «прямоугольник со скруглёнными углами». Он находится на панели слева, ближе к низу, или горячая клавиша U.

Вверху выставляем параметры: заливку выбираем белую, обводку выключаем.

Радиус (там же на верхней панели) делаем 10px.

А теперь аккуратно строго по направляющим рисуем нашу кнопку.

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

Направляющие отключаем CTRL+;

Обратите внимание на то, что в окне «слои» появился новый слой, переименовываем этот слой, щёлкнув два раза левой кнопкой мыши,  и даём ему название «кнопка».

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

Основа для нашей кнопки готова, теперь наша задача cделать из неё кнопку с градиентом в стиле WEB 2.0.

Итак, для этого применяем стили.

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

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

Нажимаем на кнопку fx и выбираем пункт «наложение градиента»

У нас появляется вот такое окно:

После того, как мы нажали на окно с градиентом, у нас появляется окно, в котором мы меняем цвета градиента.

Нижний цвет берём тёмно-синий, верхний голубой, нажимаем везде OK и у нас получается вот такая кнопка для сайта с градиентом:

Но выглядит она как-то плосковато, поэтому добавляем тень и обводку.

Нажимаем fx и выбираем стиль «тень» и выставляем параметры как на картинке.

И добавляем обводку: fx -> обводка.

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

Ну а теперь можно дать нашей кнопке название.

Берём инструмент «текст» или просто нажимаем латинскую клавишу «T», параметры текста выставляем следующие:

Шрифт – Verdana, bold, 30px.

И пишем текст «КНОПКА».

Применяем к тексту стиль «тень» с параметрами как на картинке.

И, наконец, у нас получилась вот такая замечательная кнопка для сайта:

Сохраняем нашу кнопку в формате Photoshop(*.PSD;*.PDD).

Это самый простой вариант кнопки с градиентом.

Как сверстать такую кнопку с помощью HTML и CSS читайте вот здесь

Источник: http://www.fly-webmaster.ru/knopka-dlya-sajta.html

Рисуем кнопку-переключатель в Adobe Photoshop

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

Однако несмотря на всю простоту урока, полезен он тем, что дает представление о том, как передать углубления и объем кнопок для UI.

Также урок будет интересен тем, кто еще не пробовал рисовать векторные изображения в Adobe Photoshop.

Шаг 1

Откройте Photoshop и нажмите Control + N, чтобы создать новый документ. Введите данные, которые видите на картинке ниже.

Включите сетку (View > Show > Grid) и привязку с сетке (View > Snap To > Grid). Для начала нам понадобится расстояние между линиями сетки в 5px.

Зайдите в Edit > Preferences > Guides, Grid & Slices и обратите внимание на раздел Grid. Укажите 5 в поле Gridline Every и 1 в поле Subdivision. Также смените цвет сетки на #a7a7a7.

После того как вы закончили с настройками нажмите OK. Не пугайтесь вида этой сетки. Она упростит вашу работу.

Откройте палитру Info (Window > Info), чтобы следить за размером и расположением вашей работы.

Шаг 2

Выберите в качестве первого цвета #e8d8a7, возьмите инструмент Rounded Rectangle Tool и обратите внимание на меню настроек вверху экрана. Укажите радиус в 30px, создайте векторную фигуру размером 190 на 60px и убедитесь что она осталась выделенной.

Продолжаем работать с Rounded Rectangle Tool. Снова обращаемся к верхнему меню настроек и выбираем кнопку Add. Добавьте еще одну векторную фигуру размером 20 на 10px и разместите ее как показано на второй картинке. Привязка к сетке вам поможет.

Убедитесь что ваша фигура все еще выделена, и все тем же инструментом Rounded Rectangle Tool нарисуйте вторую векторную фигуру (как на третьей картинке).

Шаг 3

Посмотрите на палитру Layers (Window > Layers). Двойным кликом на слое с фигурой, которую мы только что нарисовали откройте окно Layer Style. Поставьте галочку напротив Drop Shadow, Inner Shadow, Outer Glow, Bevel and Emboss и Gradient Overlay, затем введите параметры, указанные на картинках ниже.

Шаг 4

Выберите в качестве первого цвета #a29261 и возьмите инструмент Rounded Rectangle Tool. Нарисуйте фигуру размером 180 на 50px, расположите ее как на картинке ниже и убедитесь что она все еще выделена. Убедитесь, что выбранный инструмент — Rounded Rectangle Tool, и в верхнем меню настроек нажмите на кнопку Subtract.

Нарисуйте фигуру размером 170 на 40px и расположите ее так, как показано на картинке ниже. Откройте окно Layers Style нового векторного слоя и введите параметры, которые вы видите на картинке ниже.

Шаг 5

Укажите в качестве первого цвета #d4c493 и выберите инструмент Rounded Rectangle Tool. Создайте фигуру размером 170 на 40px и разместите как показано на картинке ниже. Откройте окно Layers Style для этого слоя и введите указанные ниже параметры.

Вернитесь в палитру Layers и переименуйте этот слой в «interior».

Шаг 6

Для выполнения следующего шага нам понадобится расстояние между линиями сетки в 1px. Зайдите в меню в Edit > Preferences > Guides, Grid & Slices и введите 1 в поле Gridline Every. Выберите в качестве первого цвета #ac9c6b, возьмите инструмент Ellipse Tool, создайте круг размером в 4px и поместите так, как показано на картинке ниже.

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

Шаг 7

Дублируйте фигуру, которую нарисовали в предыдущем шаге (CTRL + J). Выделите эту копию и перетащите ее вправо, как показано ниже.

Шаг 8

Укажите в качестве первого цвета #a29261 и возьмите Rounded Rectangle Tool. Нарисуйте фигуру размером 100 на 44px и разместите как показано ниже.

В окне Layers Style для этого слоя введите указанные параметры.

Шаг 9

Дублируйте фигуру из предыдущего шага (CTRL + J). В панели Layers кликните правой кнопкой на только что сделанную копию слоя и выберите Clear Layer Style.

Также для этого слоя снизьте параметр Fill до 0%, затем откройте Layer Style и введите указанные ниже параметры.

Шаг 10

Снова дублируйте фигуру из предыдущего шага (CTRL + J). В панели Layers кликните правой кнопкой по этой копии и выберите Сlear Layer Style.

Далее работаем с палитрой Layers. Удерживая CTRL нажмите на слой «interior». Должно появиться выделение по форме этой фигуры. Убедитесь что это случилось, затем выберите слой, который создали в начале этого шага и нажмите кнопку «Add layer mask».

После применения маски ваша работа должна выглядеть как на третьей картинке ниже. Нажмите Control + D чтобы снять выделение.

Шаг 11

Снова задайте выделение фигуре, к которой применили маску, снизьте параметр Fill до 0%, затем откройте окно Layer Style. Поставьте галочку напротив «Layer Mask Hides Effects», после чего активируйте Drop Shadow и введите параметры как на картинке ниже.

Шаг 12

Выберите в качестве первого цвета #85bc46, возьмите Rounded Rectangle Tool, создайте фигуру размером 5 на 14px и убедитесь что она осталась выделена. В верхнем меню настроек нажмите кнопку Add, и нарисуйте еще две фигуры размером 5 на 14px, как показано на картинке ниже.

Шаг 13

Выделите фигуры, которые нарисовали в предыдущем шаге и разместите как показано ниже. Откройте Layer Style для этого слоя и введите параметры, показанные на картинке ниже.

Шаг 14

Возьмите инструмент Type Tool (T) и просто напишите «ON», как показано на первой картинке ниже. Можете использовать жирный шрифт Latha, размером в 15pt и цвета #b6a675. Откройте Layers Style для слоя с текстом и введите значения из рисунков ниже.

Шаг 15

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

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

Шаг 16

Выделите текст, перепишите «ON» на «OFF» и разместите как на картинке ниже. Выберите слой с фигурой, к которой применяли маску и в меню выберите Edit > Transform > Flip Horizontal. После чего откройте Layer Style и просто инвертируйте угол указанный в закладке Drop Shadow.

Шаг 17

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

Работа сделана!

Вот как выглядит финальный вариант:

Автор урока Andrei Marius

Перевод — Дежурка

Читайте также:

Источник: http://www.dejurka.ru/tutorial/photoshop-tutorial-switch-button/

Как нарисовать кнопки для сайта

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

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

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

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

Шаг 2Залейте фон цветом #СCCBCC и кистью (Brush Tool) (В) большого размера белого цвета кликните один раз в центре фона, чтобы создать световое пятно. Теперь фон похож на радиальный градиент.03

Подробнее: Photoshop-master.ru

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

Подробнее: www.gimpart.org

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

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

Подробнее: photoshoppro.ru

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

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

Шаг 2
Залейте фон цветом #CCBCC и кистью (Brush Tool) (В) большого размера белого цвета кликните один раз в центре фона, чтобы создать световое пятно. Теперь фон похож на радиальный градиент.03

Подробнее: softsettings.com

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

Подробнее: photoshop-i-ya.ru

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

В этом уроке я покажу вам, как за несколько простых шагов создать кнопку для сайта в Фотошоп. Такая кнопка позволит вам с легкостью приукрасить дизайн вашего сайта. Воспользуйтесь также сеткой, для этого перейдите View > Show > Grid (Просмотр > Показать > Сетка) она поможет нам в позиционировании элементов кнопки.

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

Но, до недавнего времени, как-то, не использовала в них эти привлекающие внимание графические элементы.

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

Подробнее: o-zarabotkeonline.ru

Предлагаю вашему вниманию урок фотошоп по теме «создание дизайна сайта», в котором будем учиться делать симпатичные кнопки для сайта, интернет-магазина, блога и т.д. Делаем заготовку.С помощью инструмента «Прямоугольник со скругленными краями» (Rounded Rectangle) рисуем такую фигуру. У меня радиус закругления 5 пикселей.

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

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

Ряд исследований, путем проб и ошибок, заставил нас составить список 7-ми крутых правил, которым стоит следовать!

Подробнее: www.webdesguru.com

Шаг 1. Создайте новый документ 102*50 пикселей. Фон залейте цветом #838383. Выберите инструмент Rounded tool(Прямоугольник со скругленными краями). Установите следующие настройки: Измените фоновый цвет на #111111 . Начертите прямоугольник так, чтобы он вписался в размер холста. 

Подробнее: photoshoplesson.ru

Шаг 1. Создайте новый документ, цвет фона задайте показателем: #f7f5f6. Активизируйте инструмент Rounded reqtangle Tool (Прямоугольник со скругленными углами) с радиусом скругления 10 пикселей. В качестве цвета для переднего плана установите цвет с показателем: #2f88bb. На новом слое создайте небольшой скругленный прямоугольник.

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

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

Подробнее: astrapromo.com

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

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

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

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

Подробнее: KtoNaNovenkogo.ruЕще по теме: Zara последние новости

Источник: http://www.chsvu.ru/kak-narisovat-knopki-dlya-sajta/

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

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

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

Как в фотошопе сделать любой сайт?  Я выбрал Вконтакте из-за популярности и достаточной простоты. Прежде всего, вы открываете Photoshop и рисуете макет сайта. В сложных и дорогих проектах макет создают специально нанятые люди с системным мышлением. Они создают пустой фреим или каркас, где размещают кнопки, меню и контент сайта. Далее фреим передается дизайнеру, и дизайнер «одевает» каркас, рисуя дизайн и его элементы поверх каркаса. Почему именно так? Не все дизайнеры способны соединить в себе логику, здравомыслие и чувство прекрасного. Особенно страдают данным недугом дизайнеры с обостренным чувством прекрасного. Они, дизайнеры, не в состояние понять, что их навороченной красотой, банально неудобно пользоваться. Что в этой красоте, невозможно найти ни нужный раздел, ни нужное меню, ни нужные материалы. Поэтому внешний вид и эргономика сайта (понятность и простота) — разное.

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

Создаем рабочую область

Прежде всего создаем правильную рабочую область. Сайт Вконтакте выровнен по центру, тянущиеся задние фона отсутствует. Ширина Вконтакте 790px Длина — бесконечна. Ширина не случайна. Вконтакте рассчитан на просмотр  с самых древних мониторов с самым древним разрешением 800 на 600px. 10 дополнительных пикселей — запас для полосы прокрутки браузера. В отдельных случаях Вконтакте расширяется в разделе Приложений. Расширяется он за счет пространства между логотипом и меню, но нам это не важно. В диалоговом окне File > New создаем рабочую область на 800 х 600 пикселей.

Размечаем рабочую область

Воспользуемся Направляющими Guides. Включите линейку Windows > Rulers или Ctrl+R, кликните по линейке мышкой, и не отпуская кнопки перетяните направляющую в начало рабочей области. Вторую направляющую поставим точечно, View > New Guides. В появившемся окне выберите Вертикальную направляющую и 790 px, такой же ширины сайт Вконтакте. Между этими направляющими мы будем рисовать наш сайт Вконтакте в Фотошопе.

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

С размерами порядок, но сайт придавлен к одной стороне, а с другой сторону у него  10px зазора. Давайте выравним рабочую область прибавив немного пикселей с обоих сторон. Откройте Image > Canvas Size. В области Anchor направьте расширение в левую сторону. Поставьте галочку Relative. Тогда изменение размера области будет происходить относительно тех размеров, которые уже есть. В области ширины Width добавьте 10px и нажмите OK.

Теперь проделайте все тоже самое, но на этот раз стрелки в Anchor оставьте по центру, чтобы расширение происходило в обе стороны. И расширьте рабочую область ещё на 40px что бы сайту визуально не было тесно.

Создаем элементы сайта

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

Нам понадобится панель слоев Layers, которую можно открыть в Windows > Layers. Нам понадобится умело перемещать элементы. Для этого пригодится инструмент Move Tool, о котором подробнее можно прочесть в моей статье Работа с Move Tool. И я бы сказал что Move Tool вам понадобится особенно, так как большее время вы будете распихивать элементы макета по нужным местам, да выравнивать между ними расстояние. Итак, выберем первый инструмент Rounded Rectangle Tool и нарисуем шапку сайта. В настройках инструмента поставим не более 5px округлости и не забудьте про Snap to Pixels, с этой галочкой вектор будет привязан к размерам пикселей,  что очень важно при создании графики для Web.

Шапка вконтакте округлая лишь с одной стороны и вот как я срежу края. Я выберу инструмент Rectangle Tool, в настройках инструмента выберите Subtract from Shape area (-) C этой настройкой инструмент будет отсекать части нарисованного вектора, а не создавать новые. Подробнее читайте в моих статьях о настройках Add, Subtract и Intersect.  С включенной опцией Subtract выделите векторную маску в слоях и просто отсеките ненужную часть прямоугольника. Почему это выгодно? во первых у вас остается контроль за маской, так как вы создаете сложную фигуру. Если вам понадобятся округленные края с обратной стороны фигуры, вы всегда сможете их достать, удалив второй прямоугольник.

Создаем стиль

Что такое стиль? Стиль это графическая одежда, которая надевается на любой элемент графики, будь то векторный объект, растровый объект или шрифт. Стили в фотошопе включают в себя рад эффектов, которые не видоизменяются начиная с царя Соломона. Это тени, градиенты, заливки, 3D выдавливание, текстуры, окантовки, свечения и эффекты смешивания слоев. В целом этого набора хватает чтобы создать практически любую графику для сайта, и не только для неё. Я предлагаю работать со стилями очень бережно. Для этого урока мы создадим и сохраним несколько стилей, которые просто будем доставать в нужный момент из сундучка и применять по необходимости. Начнем с шапки.

Вызовите Менеджер настроек Edit > Preset Manager и выберите в выпадающем меню стили Styles. Выделите все при помощи SHIFT и удалите. Подробнее о Preset Manager можно почитать в моей статье Все о Preset Manager. Мы вычищаем все лишние стили, чтобы они нас не путали и создаем пространство для новых стилей. Удаленные же стили являются шаблонными, и их можно вызвать назад в любой момент. Если у вас  там сохранены свои стили, не удаляйте их. Этот шаг я выполняю для простоты демонстрации, не более.

В панели слоев Layers выберите слой с шапкой. Теперь вызовите окно Стилей слоев. Layers > Layer Style > Gradient Overlay. Начнем с главного. Создадим правильный градиент.

Кликните по полоске градиента. Появится редактор градиентов. В редакторе кликните по ползункам градиента и выберите правильные цвета — #6185ad и #406287.

При ближайшем рассмотрении можно заметить что у шапки есть небольшая двойная окантовка из 1px темной линии и 1px светлой линии. Не выходя из Стилей слоев переключитесь на Stroke. Stroke создает окантовку вокруг объекта. В размерах поставьте 1 px в Position поставьте Inside, то есть внутрь. В типе заливки выберите градиент, с цветами #416184 и #4a6a91. Проявляйте внимание к деталям, если выбрать не градиент а сплошной цвет, то он будет теряться к вершине шапки, так как там цвет темнее. Если выбрать темнее цвет, чтобы он не терялся к вершине, то у основания он будет чрезмерно выразителен.

Наконец полосочка второго уровня, Выберите Inner Shadow, он создает внутреннюю тень, цвет тени #7e9fc8. Угол -90. Все ползунки на 0 и только Distanse — 2px.

С правой стороны мы видим изображение стиля. Это и есть «графическая чешуя», надеваемая на любой объект к которой будет применяться стиль. Нажмите на кнопку New Style и назовите стиль VK Style 1. Если вы переключитесь из левого меню в графу стилей Style, то увидите, что наша коллекция пополнилась первым стилем.

Создаем логотип

Точнее копируем логотип, ведь Вконтакт уже любезно предоставил его каждому желающему на своей спец странице. Скачайте версию в PDF и откройте её в Фотошопе. Первое что вам бросится в глаза — логотип несоразмерно большой. Конечно сейчас мы его уменьшим, однако, если вы уже собрались уменьшить его при помощи Edit > Free Transform, будьте готовы к тому, что его стили, рассчитанные именно на такие размеры, останутся неизменными. Конечный результат получится неприглядным.

Конечно настройки стилей всегда можно подкрутить в сторону уменьшения. Я так и сделал в первый раз, переделав стили «на глаз». Но вот что я предлагаю вам. Вместо того, чтобы открывать стили, и начинать методично подбирать на глаз все параметры или же растрировать графику лишаясь контроля за стилями, просто откройте логотип, зайдите в Image > Image Size убедитесь что в меню у вас выбраны галочки Scale Styles и Constrain Proportions и уменьшите высоту логотипа с 600px до 40px. Маловато? Уменьшите ещё.

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

Создаем меню шапки

Пришла очередь меню. Для создания меню нам понадобится инструмент Type Tool, панель настроек шрифтов Character которую можно найти в Windows > Characte, а для создания других текстов в перспективе нам понадобится панель Paragraph, которую тоже можно найти в меню Windows > Paragraph. Выберите инструмент Type Tool и напишите текст. Эмпирическим путем я установил что Вконтакт использует шрифт Verdana. Возможно установил ошибочно, но визуально они один в один. Напишите первый пункт меню маленькими буквами — «Поиск». Размер шрифта 11pt стиль шрифта Bold. Вконтакт и более тесное расположение букв при помощи CSS. Учтем и этот нюанс, измените расстояние между буквами (tracking) до -55.

Когда вы закончите с одной надписью, продублируйте слой и напишите вторую Layers > Dublicate Layers Затем третью, четвертую. Затем выделите все созданные слои и рассортируйте их при помощи функций инструмента Mover Tool, котором мы уже говорили в этой статье. Но есть более простой способ создания меню. Чем создавать по 5 слоев, перегружая панель слоев, а затем возиться, расставляя их ровно инструментом Move Tool, создайте все на одной строчке. Напишите «Поиск» поставьте 4-5 пробела, напишите «Пригласить», опять 4-5 пробела и так далее. В итоге, все меню на одном слое, стили тоже надеваем на один слой, а не на 5 слоев. Удобно.

Создав меню, создаем правильные стили. Совет: либо задавайте шрифтам заранее правильный цвет, либо не думайте о цвете вообще, раскрашивая все после создания макета через стили. Откройте стили слоя, конечно, не забыв выделить шрифт меню Layer > Layer Style > Color Overlay Этот стиль просто и непринужденно натягивает на объект цвет. Вот и натяните белый цвет, #FFFFFF. У меню Меню Вконтакте имеется нехитрая тень, создаваемая силами CSS, мы же, рисуя макет в фотошопе создаем её через стили, и только потом верстальщик отобразит её языком верстки. Зайдите в Drop Shadow, в настройках тени выберите цвет #2f5076, невидимость 100% Угол падения любой приемлемый на ваш взгляд. Главное, везде отключайте опцию Use Global Light. Эта галочка соединяет в себе угол падения света всех стилей. Что это значит? Это значит, что если вам взбредет в голову поменять угол наклона тени в одном из объектов на следующий день, этот угол сменится у всех объектов, к которым применялся стиль с этой галочкой. Удобно, когда нужно регулировать общий угол падения тени для всех стилей из одного места, не удобно, когда этого не нужно делать.

Закончив со стилем, сразу сохраняйте её известным методом в этом же окне New Style. Стиль назовите VK Type Style 1.

Создаем общий макет для сайта

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

Вы наверняка заметили, что Вконтакт разделяет области 1px полосками графики. Они едва заметны, но все же различимы. Для их рисования мы не будем использовать векторный вариант Line Tools и вот почему. Векторные инструменты работают вне пиксельной сетки. Векторная линия может сесть ровно на пиксель, левее пикселя, правее, Фотошопу придется графически как то отобразить это. Мы помним, Фотошоп программа растровая и всю графику фотошоп отображает Растром. Это не плохо, потому что браузеры тоже отображают сайты растром. Проблема инструмента Line Tool проста, у него нет привязки к пикселям Snap to Pixels. Поэтому нарисовать ровную полоску, которая не будет заступать ни за один пиксель можно только случайно либо в режиме Fill Pixels при отключенной настройке Anti-Alias, подробнее о которых можно прочитать в моей статье Все о режимах Shape Layers, Path и Fill Pixels.

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

Я выберу инструмент Rectangle Tool и нарисую все объекты макета, места для аватарок, разделительные полоски, разделительные блоки. Получится пустой сайт с объектами на которые я натяну стили. Конечно, не забудем о известной опции Snap to Pixels

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

Стилизация объектов сайта в Фотошопе

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

Выберите первый блок Фотографий, и кликните дважды по слою с прямоугольником. Появится диалоговое меню Стилей, которое так же можно вызвать в основном меню — Layer > Layer Style. В Стилях слоя выберите Color Overlay, залейте объект светло голубым цветом #e1e7ed. Теперь разберемся с верхней и нижней полосками. Верхнюю полоску создадим через Drop Shadow. Цвет — #d3dae0 Угол наклона -90, то есть тень направится сверху вниз. И конечно нам нужна не тень, в полном смысле, а лишь 1px полосочка, поэтому убейте все параметры, отвечающие за величину и растушевку тени Spread и Size. Оставим лишь 1 для Distanse, то есть тень выступает на 1 пиксель.

Аналогично для нижней полоски, её мы создадим с помощью внутренней тени Inner Shadow. Цвет тени #d3dae0, угол наклона -90, галочку Global Lights, как я писал выше убирать везде. С остальными настройками тоже самое. И конечно сохраняем стиль через New Style.

Создадим свой стиль и для формы поиска. Она находится в разделе Стены Вконтакта и представляет из себя белое поле с 1px окантовкой. Выбираем этот элемент, заходим в Стили слоев эффект Stroke. Перво наперво создаем цвет окантовки — #c0cad5. В настройках позиционирования Position выбираем Inside. Это важно, полоска внутрь создает острые края, полоска наружу округлые. Так устроен Фотошоп. Размер окантовки 1 px. Cнова сохраняем стиль.

Теперь у нас следующая ситуация. В макете остались не задизайненные объекты, но не повторять же для каждого квадратика уже созданный стиль? В фотошопе есть 100500 возможностей копировать стили с одного объекта на другой, в том числе не сохраненные стили. Тема эта скорее для статьи о работе со стилями. Я лишь расскажу об одном из них для которого мы специально и сохраняли все стили. Откройте панель Стилей через Windos > Style. Если вы делали все правильно, вы увидите пустое поле и сохраненные для сайта Вконтакте стили. Выделите нужный слой из панели слоев и щелкните по нужному стилю. Чтобы анулировать стиль, щелкните по белой иконке с красной линией.

Шрифты для сайта Вконтакте в Фотошопе

Разобравшись с дизайном объектов перейдем к шрифтам. Оставшиеся шрифты не представляют из себя особенной сложности. Выберите инструмент Type Tool и создайте боковое меню со следующими настройками. Размер шрифта 11pt, расстояние между строками 21pt, цвет #416288, шрифт Arial обычный. Похожие настройки используются и для меню с правой стороны сайта.

Для блоков текста используйте Параграфы. Для создания параграфа кликните инструментом Type Tool по рабочей области и не отпуская мышку протяните указатель, создав область для печати. Так вам не придется переносить текст «на глаз». При этом мы сможете воспользоваться настройками из панели параграфа Paragrapg из Windows > Paragraph, где можно регулировать позиционирование, расстояние между параграфами, красные строки, отступы и многое другое.

Ту же технику я применил для создания постов Ленты.

Создание других элементов для сайта Вконтакте

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

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

Заполнение фотографий при помощи Clipping Mask

У нас остались пустые формы макета, означающий графику и картинки, которые будут загружать пользователи. Но ведь намного лучше продемонстрировать их в действии. Как это сделать самым простым образом? Дайте подумать, я бы открыл все фотографии, которые использую на сайте, затем нашел бы их размер, уменьшил, обрезал, доведя до одинаковых размеров. Ах да, там ведь ещё разные шаблоны макетов, есть фото для фотографий, есть иконки для раздела Участники, есть большой аватар, есть иконки в постах. Все разных размеров. Не проще ли открыть нужную графику а затем одним щелчком заставить её «сесть» в эти созданные формы? Конечно проще. Откройте необходимые фотографии и перетяните их на рабочую область. В панели слоев разместите каждую фотографию над своим прямоугольником.

Способов создать Clipping Mask много. Выделите слой с фотографией, и выберите в меню Layer > Create Clippig Mask или нажмите Alt+Ctrl+G. Более простые способы — выделите слой фотографии в панели слоев, кликните по нему правой кнопкой мышки и в меню выберите Create Clippig Mask. Более быстрый и элегантный способ — наведите указатель мышки между двумя слоями, на панели слоев и нажмите Alt. Указатель превратится в восьмерку. Кликните и это тоже создаст Clippig Mask.

Смысл Clippig Mask в том, что изображение выше, встраивается в объект ниже. Соответственно фотография может быть любого размера, но объект ниже обрезает ненужные края. Если фотография слишком большая просто уменьшите её при помощи Edit > Free Transgorm что называется на лету. Если вы не слышали про такое, читайте мою статью Free Transform в Фотошопе

Организация сайта в Фотошопе

Пожалуй последнее, на чем я хотел бы остановиться — организация слоев. Организация важна, постольку поскольку фаил будет передан верстальщику, а ему разбираться с вашими слоями. Если вы и дизайнер и верстальщик правильная организация не будет лишней, и в стократ упростит для вас поиски нужного в старом фаиле через месяц. Организуйте слои по смысловой нагрузке. Размещайте их по порядку. Выделяйте ряд слоев и нажимайте Ctr+G. Это помещает их в папку. Создавайте папку в ручную из панели слоев, давайте файлам правильные имена, что бы легко узнавать их в меню Move Tool и на панели Слоев Layers. В конце концов раскрашивайте слои и группы по смысловой нагрузке. Сделать это можно через Layer > Group Properties

B вот так вы можете сделать сайт Вконтакте. И не только Вконтакте, но и любой другой сайт. Пожалуй в следующих статьях я продолжу практику воссоздания популярных в интернете сайтов. На повестке для Twitter, Facebook или Однокласники. Если вы хотите получить готовый макет сайта Вконтакте, кликните по кнопке Like для Фэйсбука, чтобы появилась ссылка на скачку. В конце концов, это меньшее что можно сделать, чтобы получить готовый макет для в формате PSD для сайта. Я надеюсь что теперь вы знаете, как сделать сайт в Фотошопе. Хорошего вам дня.

Скачать PSD

Автор:

Проиллюстрируйте классный веб-сайт в Photoshop с помощью этих 4 простых шагов

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

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

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

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

1. Создание эскиза

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

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

2. Векторизация эскиза

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

Давайте создадим новый документ и поместим в него наш эскиз.Мы хотим сделать набросок тонким, чтобы линии контура были видны. Мы сделаем это, снизив непрозрачность до 30%.

С чего начать векторизацию? Тебе решать! Я собираюсь начать с перца чили и использовать инструмент «Перо», чтобы обвести каждую секцию:

После того, как вы нарисуете форму, выберите контур и залейте его основным цветом с помощью инструмента «Заливка» (alt + Delete).

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

На палитре «Слои» щелкните «Заблокировать прозрачные пиксели», чтобы при запуске этапа кисти вы оставляли отметки только на реальном изображении (а не на прозрачном фоне).

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

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

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

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

• Создание контуров (инструмент «Перо»)
• Заполнение цветом
• Расчесывание оттенков и мелирование

Не забудьте создать новый слой для каждого раздела!

3.Включите разные текстуры

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

Текстура 1:

Текстура 2:

Текстура (изображение) 3:

После помещения текстуры 1 в мой документ я включил инструмент «Свободное преобразование» (Ctrl + T), чтобы я мог поместить текстуру в свою иллюстрацию.

Есть еще несколько шагов для текстур 2 и 3 (см. Изображение ниже, где указаны номера):

1. Создайте новую группу в палитре слоев
2. Щелкните значок Добавить векторную маску и замаскируйте группу
3. Маска текстуры 2 и преобразование 2 и 3 по размеру изображения
4. Добавить текстуру 2 и 3 в группу
5. Замаскируйте текстуру 3 и создайте градиент поверх нее
6. В слоях палитры измените режим наложения для текстуры 3 с нормального на более светлый цвет

4.Создание фона и добавление текста

Пришло время внести последние изменения в наш веб-сайт:

• Фон: Я создал радиальный градиент, переходящий от цвета # f05c1e к # fff200
.
• Добавьте текст: для панели навигации. Я использовал шрифт Freehand BT 521; для белого текста меню я использовал шрифт FINTRYPARK с цветом #ebebeb; для салатового шрифта я использовал Chalk Dust Condensed с цветом # 7fb900
.
• Последние штрихи: Я добавил тени перцу чили и рукам, а также добавил глянцевый штрих к перцу чили и буфер обмена

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

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

БОЛЬШАЯ благодарность дизайнеру Мустагу Фирину (aka freaky) за этот отличный и очень вкусный урок!

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

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

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

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

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

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

Разместите направляющие шириной 960 пикселей в центре документа и создайте базовую сетку для размещения элементов страницы.

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

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

Тонкие штрихи текстуры могут действительно оживить дизайн. Выделив область заголовка с помощью маски, нажмите CMD + SHIFT + C, чтобы скопировать объединенное, затем вставьте на новый слой.Перейдите в меню «Фильтр»> «Шум»> «Добавить шум», чтобы создать простую текстуру, затем установите режим наложения на «Умножение» и уменьшите непрозрачность в соответствии с требованиями.

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

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

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

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

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

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

Под основным заголовком нарисуйте еще одно выделение и залейте серо-белым градиентом.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следите за новостями в будущем руководстве, в котором мы рассмотрим кодирование визуального элемента в полную веб-страницу XHMTL / CSS.

Photoshop для веб-дизайна: 20 советов профессионалов

Для многих веб-дизайнеров пакет Adobe Creative Cloud, в частности Photoshop, играет неотъемлемую часть в процессе создания веб-сайтов.Создаваете ли вы макеты веб-сайтов или разрабатываете отдельные элементы сайта, Photoshop — отличный вариант.

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

01. Использование систем сеток

Системы сеток могут сэкономить массу головной боли в веб-дизайне. Попробуйте использовать такие ресурсы, как расширение Cameron McEfee’s GuideGuide для Photoshop, чтобы сделать настраиваемые сетки простыми и точными.

02. Получите все

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

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

03. Изучите пользовательские предустановки документов

Нажмите cmd + N , чтобы открыть окно «Новый документ». Меню предустановок содержит базовые веб-и мобильные предустановки, но в нем отсутствуют многие общие параметры для различных систем сеток, баннеров, устройств iOS и Android. Уделите несколько минут, чтобы заполнить недостающие области.

04. Настроить тип по умолчанию

Закройте все открытые документы. Откройте палитру символов, чтобы выбрать предпочтительное семейство шрифтов, толщину, интервал и цвет. Больше не будет мириад по умолчанию!

05. Сделайте ваши векторные изображения четкими

Сохраняйте четкость ваших векторных объектов.Выбрав инструмент «Прямоугольник» ( U ), откройте меню параметров геометрии на панели параметров. Установите флажок «Привязать к пикселям».

06. Создайте пунктирные линии.

Выберите инструмент «Кисть» ( B ), затем откройте палитру «Наборы кистей», за которой следует раскрывающееся меню в правом верхнем углу. Выберите Квадратные кисти и нажмите «Добавить».

Теперь выберите кисть Hard Square 1 Pixel.Переключитесь на палитру кистей и нажмите Brush Tip Shape, установив интервал на 300%. На холсте зажмите Shift , перетаскивая кисть по горизонтали или вертикали, чтобы создать четкую пунктирную линию.

07. Простой перенос текста

Используя быстрое решение, Photoshop может применять функции переноса текста, аналогичные функциям InDesign. Выберите инструмент «Прямоугольник» ( U ). На панели параметров установите для заливки значение «Контуры», выберите для формы инструмент «Прямоугольник» и выберите «Добавить в область контура» (или нажмите + ).

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

Выберите инструмент «Текст» ( T ) и щелкните внутри большого прямоугольника, чтобы преобразовать форму в рабочий контур «Текст» для заливки шрифтом. Вы можете дополнительно уточнить размеры рабочего контура текста с помощью инструмента «Прямоугольник» ( U ) и инструмента «Прямой выбор» ( A ).

08. Создание быстрых цветных заливок

Нажмите alt + Delete , чтобы залить текст, фигуры и слои выбранным цветом переднего плана. Нажмите cmd + Delete , чтобы залить область выбранным цветом фона. Нажмите D , чтобы вернуться к черно-белому по умолчанию, и нажмите X , чтобы поменять местами цвета переднего плана и фона.

09. Оставайтесь организованными

Используйте cmd + G для группировки слоев и помогите вам оставаться организованным и сосредоточенным.Группирование областей содержимого и компонентов, таких как навигация, области избранного содержимого, вспомогательные компоненты и нижние колонтитулы, по отдельности избавит вас от головной боли на протяжении всего процесса проектирования и разработки проекта.

10. Станьте умнее

Использование смарт-объектов (перейдите в «Фильтр> Преобразовать для смарт-фильтров» и ctrl или щелкните правой кнопкой мыши «Слой> Преобразовать в смарт-объект»), разумно может действительно ускорить ваш рабочий процесс на всем протяжении процесс проектирования. Преобразование больших фотографий и векторных объектов в смарт-объекты сохраняет исходное качество изображения после масштабирования, поворота и наклона.

Следующая страница: еще 10 советов по веб-дизайну для Photoshop …

Как ускорить процесс создания каркасов с помощью Photoshop и Adobe XD — Smashing Magazine

Об авторе

Мануэла — цифровой иллюстратор из Неаполя, Италия. Она начинала как веб-дизайнер, но затем последовала своему основному увлечению: Adobe Illustrator. Рисунок — это ее… Больше о Мануэла ↬

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

Перед тем, как начать любой дизайн-проект, есть одно слово, которое обязательно будет следовать за вами с самого начала: wireframing . Сегодня мы узнаем, как создать каркас в Adobe XD и как реализовать некоторую графику из Photoshop, просто используя библиотеки.

Но сначала, что такое каркас?

Каркас — это визуальное представление структуры вашего проекта.Он определяет кости, элементы, которые будут работать в вашем макете, и размещение контента для вашего прототипа.

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

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

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

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

В этом руководстве мы рассмотрим следующие шаги:

1. Создайте каркас, выберите и вставьте ресурсы PS через библиотеки;
2. Обновите файлы PS и просмотрите результаты в Adobe XD.

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

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

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

Вот что мы создадим:

1. Создание каркаса, выбор и вставка ресурсов PS через библиотеки)

Лучшее место для начала разработки каркаса с нуля — сначала нарисовать его вручную

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

Первый шаг : Вот мои собственные нарисованные от руки каркасы.

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

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

Третий этап : Давайте начнем создавать наш цифровой каркас с Adobe XD.

Откройте Adobe XD и в открывшемся окне выберите «Web 1920».

Сохраните проект как «Каркас», выбрав Файл → Сохранить как .

После сохранения файла создайте еще одну монтажную область для iPhone ⁶ ⁄ ₇ Plus.

Нажмите кнопку A (Artboard) слева и выберите «iPhone 6/7/8» на правой боковой панели.

А вот и два наших артборда: один для настольного компьютера и один для мобильного.

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

Изображение героя
Выберите инструмент «Прямоугольник» ( R ) и нарисуйте фигуру там, где должно быть изображение вашего героя. Затем возьмите Line Tool ( L ) и нарисуйте две линии, соединяющие вершины. Эта форма представляет собой заполнитель нашего изображения.

Сгруппируйте формы и линии и назовите группу «Герой»:

Теперь продолжим с разделом «Значки».Я помещаю текст перед значками и собираюсь представить его визуально с помощью нескольких линий. Снова возьмите Line Tool ( L ) и нарисуйте одну горизонтальную линию. Щелкните инструмент «Повторить сетку» ( ⌘ + R на Mac или CTRL + R в Windows) и перетащите линию, пока у вас не получится три из них.

Нам нужны три символа для наших значков, поэтому нажмите Ellipse Tool / E ) и нарисуйте круг. Щелкните еще раз на Repeat Grid Tool ( ⌘ + R в Mac или CTRL + R в Windows) и создайте три круга.Затем выберите пространство между кругами и перетащите его, чтобы сделать его шире.

Раздел элементов
Создайте светло-серый фон ( # F8F8F8 ) с помощью инструмента «Прямоугольник» ( R ). Повторите шаги из предыдущего раздела «Изображение героя» выше, чтобы создать заполнитель изображения, затем повторите шаги из раздела «Значки» (также выше), чтобы создать строку для текста. Наконец, создайте простую кнопку с помощью инструмента Rectangle Tool ( R ).

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

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

Сделаем это с помощью Photoshop.

Откройте предоставленный мной файл Photoshop, щелкнув по этой ссылке.

Я хочу вставить это изображение как символ с помощью Libraries CC.

В Photoshop не забудьте увидеть панель Библиотеки, перейдя в Окно → Библиотеки . Создайте новую библиотеку, щелкнув маленький значок вверху справа (см. Изображение):

Я назвал свою библиотеку «Каркас».Не стесняйтесь давать своей библиотеке желаемое имя.

Теперь щелкните и перетащите символ, который вы хотите добавить в свою библиотеку:

Вернитесь к XD и перейдите в File → Open CC Libraries , и вы увидите последний символ, который вы только что загрузили через Photoshop, и созданная вами библиотека.

Перетащите символ цитаты в каркас в XD и поместите его в нужное место.

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

Примечание : Вы можете найти значок электронной почты в файле Photoshop, который я предоставил здесь .)

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

Это результат:

Последнее, что нам нужно сделать перед тем, как продолжить, — это упорядочить наши слои. Убедитесь, что ваши слои активированы, щелкнув значок слоя ( ⌘ + Y для Mac или CTRL + Y для Windows).

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

Мы закончили с нашим каркасом!

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

2. Добавление уровня точности к вашему каркасу

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

Мы готовы двигаться дальше и обновлять наш каркас, чтобы сделать его «живым» с изображениями, цветом и копией-заполнителем.

Создайте свой дизайн. Дублируйте свой каркас, сохранив его под другим именем (например, «Wireframe-Layout»).

Во-первых, нам понадобится изображение для раздела «Герои» (я пошел дальше и использовал это изображение Присциллы Дю Пре из Unsplash..)

Откройте изображение в Photoshop и уменьшите его размер, щелкнув Изображение → Размер изображения и установите ширину 3000 пикселей:

Сохраните изображение и перетащите его в свои библиотеки.

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

Я собираюсь добавить логотип и текст к этому изображению; Мне нужно, чтобы изображение было немного темнее, чтобы информацию было легко читать.Вернитесь в библиотеки Photoshop и дважды щелкните изображение на панели. Когда изображение открыто, перейдите на панель «Слой», выберите слой изображения и нажмите «». Добавьте стиль слоя в нижней части панели. Установите Color Overlay с настройками, как показано ниже:

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

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

А теперь вставим наш логотип. Откройте файл Photoshop и перетащите надпись «Learn!» логотип в библиотеки. Это шрифт, который я использовал.

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

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

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

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

Как и раньше, откройте значки и добавьте их в свои библиотеки в Photoshop, затем вернитесь в XD, чтобы разместить их в каркасе.Вот результат:

Теперь мы перейдем к разделу Feature . Как и раньше, мы перетащим изображение на заполнитель изображения (я использовал это изображение Сонни Хайлса, найденное на Unsplash). Добавьте текст и кнопку, как я показал вам в предыдущих шагах выше.

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

Теперь давайте изменим цвет символа галочки.Вернитесь в Photoshop, откройте его из библиотек и задайте наложение цвета, как показано ниже:

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

Теперь закончим наш макет.

Для раздела Testimonial добавьте текст и изображение для отзыва (я взял свое из UI Faces).

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

И… готово!

Заключение

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

Посмотрим ваш результат в комментариях!

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Инструмент Adobe XD создан для быстрого и гибкого процесса проектирования UX, поскольку он позволяет быстрее переходить от идеи к прототипу. Создавайте, создавайте прототипы и делитесь ими — все в одном приложении. Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также подписаться на информационный бюллетень Adobe Experience Design, чтобы оставаться в курсе последних тенденций и идей в области дизайна UX / UI.

5 опытных дизайнеров делятся своими мыслями

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

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

Панель инструментов вашего веб-дизайнера

Неограниченные загрузки: 500 000+ веб-шаблонов, наборов значков, тем и элементов дизайна
Начиная с всего 16 долларов.50 / мес!

СКАЧАТЬ

Многие веб-дизайнеры по-прежнему отдают предпочтение Photoshop

Photoshop: молоток дизайнера

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

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

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

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

• Библиотеки. Ресурсы синхронизируются с учетной записью Creative Cloud, которую можно снова использовать в другом программном обеспечении Adobe, файлах и будущих проектах.
• Смарт-объекты. Как и его библиотеки, смарт-объекты можно повторно использовать в нескольких ситуациях, будь то в одном файле или с другими файлами.
• Извлечь активы. В наши дни Photoshop позволяет веб-дизайнерам извлекать объекты, элементы и изображения для веб-элементов и мобильных устройств после интеграции более всеобъемлющих функций. С помощью таких плагинов, как Cut & Slice и DevRocket, экспортировать эти ресурсы очень просто.
• Слои комп.Композиции слоев позволяют дизайнеру создавать вариации дизайна, настраивая атрибуты, позиционирование и видимость элементов, не создавая проблем с созданием нескольких файлов.

Давайте посмотрим правде в глаза: Photoshop по-прежнему остается дизайнерским инструментом номер один, которым должен овладеть дизайнер. Я считаю Photoshop «матерью» всего программного обеспечения Adobe и веб-дизайна. Все необходимое (ну почти все) есть. Вам просто нужно немного расширить свой творческий потенциал. Но будучи несовершенным, Photoshop временами имеет свои пределы.Иногда кажется, что это не работает так, как мы хотим.

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

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

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

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

Присоединяясь к Envato Elements, вы получаете доступ ко множеству ресурсов для Sketch и Photoshop, а также ко многим другим полезным элементам дизайна.Все это доступно для одной ежемесячной подписки на Envato Elements. Присоединяйтесь сегодня и получите доступ к огромной и постоянно растущей библиотеке из 24 500+ творческих ресурсов с неограниченными загрузками .

Sketch агрессивно пробивается в топ

Восстание эскиза

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

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

У вас есть все, что вам нужно

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

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

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

Артборды

Создание нескольких артбордов в Sketch — это совсем несложно. Просто нажмите A и вуаля, у вас есть артборд! Затем Sketch покажет список из 28 наиболее распространенных размеров значков экрана, из которых вы можете выбрать. Это очень полезно при создании адаптивного дизайна, потому что получить нужные размеры при создании мокапа очень просто.

Moodboards

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

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

Набор инструментов для эскизов

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

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

На основе векторов

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

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

Зеркало для эскиза

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

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

AEFlowchart

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

Стили текста в приложении Sketch

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

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

Простота управления цветом

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

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

Встроенная сетка макетов

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

Если вы хотите настроить сетку макета, вам просто нужно перейти в «Просмотр», а затем в «Настройки макета». Если вы хотите отключить сетку, вам нужно нажать Control + L.

Неограниченные возможности CSS

«Мне также очень нравится, как Sketch включил логику CSS в приложение. Это значительно упрощает преобразование ваших дизайнов в CSS, поскольку вам нужно использовать логику CSS при применении стилей.Еще одна функция, которая действительно удобна для ускорения кроссовера проектирования / разработки, — это автоматическая нарезка ». — Дэн Эдвардс

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

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

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

«Символический» эскиз

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

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

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

Динамические кнопки — одна из самых заметных особенностей Sketch

Динамические кнопки в Sketch

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

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

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

Day Player

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

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

Content Generator

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

Встроенная генерация маркированных списков

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

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

Поддержка нескольких артбордов на одном холсте

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

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

Экспорт активов

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

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

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

У обоих инструментов есть свои плюсы и минусы

Sketch VS Photoshop: что лучше для вас?

Итак, что вам следует выбрать: всегда знакомый Adobe Photoshop или неудержимый Sketch?

Вот список основных различий между этими двумя:

• Рендеринг. По рендерингу Sketch близок к вебу. К сожалению, этого нельзя сказать о фотошопе.
• Ярлыки. Photoshop побеждает в этом раунде, так как в нем много ярлыков. В Sketch явно не хватает ярлыков, которые могут способствовать дальнейшему упрощению работы.
• Документы. В Sketch есть крошечные документы, а в Photoshop — большие. Этот крошечный размер файла документа — это то, что вы можете ожидать от векторного приложения. Поскольку большинство файлов, созданных с помощью Sketch, меньше 4 МБ, они не только легко загружаются на жесткий диск, но и быстро загружаются и обрабатываются.
• Библиотека. В Photoshop одна библиотека, в Sketch ее нет.
• Сетки. Sketch имеет встроенные сетки, в то время как с Photoshop вы должны создавать свои собственные сетки.
• Управление цветом. Adobe Photoshop имеет отличное управление цветом. Это в отличие от Sketch.
• Приложение. Sketch снова побеждает в этом раунде, потому что он обеспечивает более быстрое приложение по сравнению с Photoshop, который работает медленно.
• Символы и объекты. Символы — в Sketch, объекты — в Photoshop. Похоже, это галстук, да! Однако символы Sketch бывают одинакового размера, тогда как объекты Photoshop бывают разных размеров.
• Артборды. Sketch имеет явное преимущество, так как поставляется с несколькими монтажными областями. Это контрастирует с единственной монтажной областью Photoshop.
• Измерение. Ясно, что Sketch побеждает в этом. С помощью инструмента выделения вы открываете информационную палитру, рисуете расстояние между двумя объектами и уже можете проверить результаты.Это действительно сложное измерение, которое может предоставить только Sketch. Очевидно, что подход Sketch не только более прямой, но и простой. Если вы используете Photoshop, это просто невозможно, так как линейка, которую он предоставляет, громоздка.
• Увеличить просмотры. Этот раунд идет в Photoshop, поскольку он имеет несколько уровней масштабирования. Скетч только один.
• Тонкая настройка. С его неразрушающей настройкой Sketch берет верх. Вам просто нужно ввести число в радиус, и все будет хорошо.В случае с Photoshop вам нужно подключить новый радиус и перерисовать форму, и вам нужно убедиться, что вы скопировали точные размеры
• Масса. Sketch легкий, в то время как Photoshop намного тяжелее.
• Возможности редактирования фотографий. Ну, этот раунд идет в Photoshop, поскольку он изначально был создан для этой цели. Однако Sketch компенсирует это определенными функциями, которые позволяют создавать хорошо продуманные цифровые дизайны.
• Удобство использования. Sketch — приложение, предназначенное только для Mac. Однако Adobe Photoshop Creative Cloud может использоваться как пользователями Mac, так и ПК.

Эскиз: реальная угроза Photoshop

«Я убежден, что на данный момент Sketch — лучший инструмент для разработки веб-сайтов, пользовательских интерфейсов и приложений». — Брайан Хофф

Очевидно, что благодаря многочисленным преимуществам Sketch он превзошел Adobe Photoshop. Значит ли это, что вы должны пойти на это, особенно если вы только новичок в веб-дизайне?

Что ж, на этот вопрос будет довольно сложно ответить.Это правда, что многие дизайнеры уже переходят на Sketch, потому что, во-первых, он стоит всего 99 долларов. С другой стороны, Creative Cloud в Adobe Photoshop может заставить вас потратить 49 долларов. 99 для ежемесячной подписки.

Лояльность играет большую роль, почему Photoshop все еще правит

Эскиз великолепен, но многие по-прежнему верны Photoshop

«Я вижу проблемы при обмене файлами с другими дизайнерами, если один или несколько из них еще не перешли на Sketch. Однако прелесть веб-стека заключается в том, что вы можете создавать ресурсы, как вам нравится, поэтому с этой точки зрения Sketch может выводить ваши PNG или что-то еще, как это может делать Photoshop.»- Хой Вин

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

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

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

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

Заключение

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

Этот пост может содержать партнерские ссылки. Смотрите наше раскрытие о партнерских ссылках здесь .

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

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

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

ресурсов, которые вам понадобятся:

Плоский набор иконок

Step 1 New Canvas

Откройте программу Photoshop и создайте новый файл, выбрав «Файл»> «Создать» или просто нажав Ctrl + N.Когда откроется диалоговое меню, вы захотите, чтобы ваш новый холст имел размеры 1360 x 1979 пикселей. Нажмите ОК.

Шаг 2 Цвет фона

Создайте новый слой; это будет то место, где вы хотите разместить основной цвет фона. В этом случае я буду использовать цвет # d5bfc4. Используйте инструмент «Заливка», чтобы заполнить слой.

Шаг 3 Рекомендации

Теперь, когда у вас есть цвета фона, вам нужно добавить направляющие. Эти рекомендации помогут вам разделить холст так, чтобы у каждого раздела страницы была своя выделенная область.Чтобы добавить рекомендации, вам нужно перейти в View> New Guide. Затем появится окно, в котором вы можете ввести свои измерения. Ниже показано изображение, показывающее, как ввести первые размеры 751 пикселей.

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

Шаг 4 Цвета раздела

В вашем первом разделе размером 751px вы хотите заполнить это пространство цветом # e62452 вот так.

Оставьте пространство размером 1163 пикселей, но заполните область под ним цветом #ffffff.

Шаг 5 Текст раздела

Теперь мы собираемся начать добавлять контент в нашу первую цветовую секцию. Используя шрифт Arial и размер шрифта 60pt, введите желаемый текст в #ffffff и сместите его влево от раздела.

Затем введите 30pt под строкой вашего тега или любой другой информации, которую вы предпочитаете.

Кнопка шага 6

Под только что созданным текстом необходимо добавить кнопку, но мы хотим сохранить плоский вид.Для этого используйте инструмент Rectangle Tool, чтобы создать небольшой прямоугольник под второстепенным текстом, убедившись, что ваш цвет переднего плана установлен на # fc2f60.

Дважды щелкните слой с кнопкой и откройте диалоговое меню «Параметры наложения». Установите флажок Обводка и установите размер обводки на 3 пикселя и цвет на #ffffff. По завершении нажмите ОК.

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

Завершите, добавив к кнопке текст «ЗАПУСК» размером 46 пунктов.

Step 7 Планшет

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

Заполните внутреннюю часть планшета цветом # d99f9b, чтобы представить экран.

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

Шаг 8 Логотип

Когда наш основной раздел почти завершен, мы можем теперь пойти и добавить наш логотип, чтобы завершить раздел. Сначала убедитесь, что ваш цвет переднего плана установлен на #ffffff. Теперь вверху экрана укажите, что вы хотите, чтобы у вашей фигуры было 8 сторон. Щелкните стрелку инструмента Custom Shape Tool и заполните следующие разделы.

Теперь создайте форму прямо над текстом. Форма должна выглядеть так.

Затем растеризуйте свой слой, щелкнув по нему правой кнопкой мыши и выбрав «Растеризовать слой». Когда вы это сделаете, вы можете использовать инструмент Circular Marquee Tool, чтобы вырезать кусок из середины формы вашего логотипа.

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

Шаг 9 Сервисный ящик

Теперь мы пойдем и начнем конкретизировать нашу «служебную» коробку. Сначала начните с добавления заголовка УСЛУГИ вверху шрифтом 46pt и цветом #ffffff.

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

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

Откройте свой Flat Icon Set еще раз и выберите шестеренку, защитный экран, речевой пузырь и облако загрузки. Измените размер каждого значка и поместите по одному в каждый круг.

Завершите служебную коробку, добавив свой текст.

Шаг 10 Коробка с отзывами

Начните с добавления желаемого текста заголовка в поле для отзывов.

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

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

Перейдите к третьему кругу отзывов и откройте меню «Параметры наложения». Установите флажок «Обводка» и измените размер обводки на 3 пикселя и цвет обводки на # e62452. Нажмите ОК, а затем измените режим слоя на Светлее.

Шаг 11 Информационный бюллетень

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

Теперь мелким шрифтом (30 пунктов) напечатайте дополнительный текст под заголовком.

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

Точно так же, как вы это делали, добавьте контур #ffffff на 3 пикселя вокруг ваших блоков, затем измените режим слоя на Darken.

Добавьте значок конверта в квадрат, а затем введите «ваш адрес электронной почты» в большее поле.

Вот как будет выглядеть ваше окончательное изображение.

Скачать PSD файл

Выбор приложения для веб / UI / UX-дизайна: Sketch, Photoshop и Adobe XD | Блог Noble Desktop

ВАЖНО: Информация в этом посте с тех пор устарела. Прочтите нашу более свежую статью по этой теме.

При разработке цифровых продуктов, таких как веб-сайты, приложения и т. Д.есть много приложений на выбор. Какой из них вам подходит? Хотя некоторые люди используют Figma, InVision Studio и другие, в этой статье мы сосредоточимся на трех лидерах отрасли: Sketch, Adobe Photoshop и Adobe XD.

Эскиз

Хотя некоторые дизайнеры только сейчас переходят на Sketch, он существует с 2010 года. Sketch — это приложение только для Mac, что устраивает большинство дизайнеров, но пользователям ПК нужно будет взглянуть на Adobe XD или Photoshop.

Sketch отлично подходит для дизайна UX / UI.Вы можете создавать каркасы или готовые визуальные конструкции и превращать их в интерактивные прототипы с помощью недавно добавленных инструментов создания прототипов Sketch или плагина InVision Craft.

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

Sketch стоит 99 долларов США, и вы получаете год обновлений, а также Sketch Cloud. По истечении первого года вы можете продолжать использовать последнее обновление столько, сколько захотите, без каких-либо других платежей.Однако, если вам нужен еще один год обновлений и Sketch Cloud, вы должны продлить лицензию на 69 долларов США.

Sketch — отличный вариант для пользователей Mac, которым нужно доступное и мощное приложение для дизайна.

Узнайте больше в нашем классе Sketch.

Adobe Photoshop

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

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

Photoshop не имеет таких функций, как символы (для повторного использования компонентов дизайна) или создание прототипов.Хотя вы можете превратить файл Photoshop в интерактивный прототип с помощью InVision, это не так просто сделать, как встроенные функции прототипирования, имеющиеся в Sketch и XD. Мы сомневаемся, что Photoshop добавит эти функции, особенно сейчас, когда они так сильно сосредоточены на Adobe XD.

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

Photoshop встроены инструменты для создания анимированных GIF-файлов, чего нельзя сделать ни в Sketch, ни в XD.

Вы можете получить Photoshop за 9,99 доллара США в месяц или Photoshop со всеми приложениями CC за 52,99 доллара США.

Узнайте больше в нашем уроке Photoshop для веб-дизайна и пользовательского интерфейса.

Adobe XD

XD — новейшее из этих приложений, и Adobe прилагает много усилий для его быстрой разработки. Обновления выпускаются каждые 1-2 месяца, и XD прошла долгий путь с момента появления первых бета-версий.

XD стремится стать универсальным решением для UX / UI-дизайна, от каркасов до визуального дизайна, визуального прототипирования, голосового прототипирования и многого другого.XD больше всего похож на Sketch по принципу работы. Несмотря на то, что XD такое молодое приложение, у него есть некоторые функции (такие как голосовое прототипирование, автоанимация и повторение сетки), которых нет у его конкурентов. Хотя в некоторых отношениях он более продвинутый, он показывает свой юный возраст в отсутствии некоторых основных функций. Например, вы по-прежнему не можете создавать направляющие вручную, символы не могут быть изменены, как в Sketch (очень полезно!), Отсутствуют стили графики / объектов, а функции экспорта реализованы плохо, и это лишь некоторые из них.Мы знаем, что над руководствами работают, и, поскольку обновления приходят так быстро, мы надеемся, что другие функции будут добавлены / исправлены довольно скоро.

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

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

Вы можете использовать XD бесплатно, чтобы узнать, нравится ли вам это! Бесплатная версия XD предоставляет вам полное приложение, но ограничивает вас одним общим прототипом и спецификацией дизайна. Если вам нужно поделиться несколькими прототипами и спецификациями дизайна, вы можете получить XD за 9,99 долларов в месяц (долларов США) или XD со всеми приложениями CC за 52,99 долларов США.