Верстка в фотошопе: Какой фотошоп необходим верстальщику? — Хабр Q&A

Что нужно знать в Adobe Photoshop для верстки веб-страницы

Автор Владислав На чтение 4 мин Просмотров 7.2к.

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

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

Можете, кстати, скачать этот (Сlick) макет и поэкспериментировать на нём. Загружаем макет и видим что-то подобное. Если у Вас слои не включены, то посмотрите как это сделать ниже.

Итак, первый совет, который будет полезна верстальщику, это использования функции “Авто-выбор”.

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

Прежде всего, включаем “Move Tool” (Инструмент перемещения), ставим галочку на “Auto-Select” (Авто-выбор) и в выпадающем списке выбираем “Layer” (Слой).

И теперь кликаем нужному нам объекту левой кнопкой мышки. И в списке слоев мы сможем увидеть выделенный слой, это он и есть.

Второй совет, если Вам нужно вырезать или что-то сделать с элементом, но Вам мешает все остальное, Вы можете в один клик скрыть все элементы, кроме нужного. Для этого зажимаем Alt и нажимаем на индикатор видимости (глаз).

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

“Show/Hide all other layers” (Показать/Скрыть остальные слои).

Третий совет:

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

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

1. Зажимаем Ctrl и щелкаем по иконке слоя.

Как Вы сможете видеть, слой выделился. Теперь нажимаем

Ctrl + C, тем самым копируя слой и Ctrl + N, с помощью которого мы создаем новый файл уже с нужными размерами.

Жмем “ОК” и нажимаем Ctrl + V. Изображение вставлено. Проверьте, не нужно ли убирать фон.

Когда изображение было вставлено, нажимаем Alt+Shift+Ctrl+S или же, если для Вас так будет проще, то “Файл –> Сохранить для веб-устройств”.

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

Какие еще инструменты понадобятся Вам?

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

Выбираем инструмент и нажимаем, к примеру, на фон.

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

color: #2d3844;

 

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

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

Прежде копируем слой, как мы это делали выше, а потом нажимаете “Copy style layer” (Копировать стиль слоя) и в новом файле нажимаем “Paste style layer” (Вставить стиль слоя).

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

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

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

Есть вопросы? Пишите в комментариях!

С ув. Владислав

Верстать или не верстать выпускной альбом в фотошопе? | fotoknigin 🎓 альбомы и фото

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

Фотошоп для верстки неудобен.

Фотошоп для верстки неудобен.

Как верстается выпускной альбом в фотошопе и почему лучше этого не делать?

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

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

Что такое фотошоп?

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

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

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

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

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

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

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

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

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

Для чего лучше использовать фотошоп при работе над фотокнигами?

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

В чем действительно удобно верстать выпускные альбомы? Только индизайн indesign

Я для верстки испольную всегда только индизайн

Я для верстки испольную всегда только индизайн

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

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

О модульной верстке · Мир Фотошопа

ьтитсупорп онжом ,акириЛ

С Рождеством, господа хорошие! Авторский коллектив МФ выходит из праздничного запоя с новым материалом, и сегодня мы поговорим о прекрасном.

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

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

А теперь — по полочкам

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

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

Пропорция означает равенство двух или нескольких отношений. Существует несколько видов пропорциональности: математическая, гармоническая, геометрическая и др. В математической равенство двух отношений выражается формулой a:b=c:d, и каждый член ее может быть определен через остальные три. В гармонической пропорции 3 элемента. Они являются или попарными разностями некоторой тройки элементов, или самими этими элементами, например а:с=(а — в):(в — с).

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

Золотое сечение (з. с.). Особенностью пропорции золотого сечения является то, что в ней последний член представляет собой разность между двумя предыдущими членами, т. е., а:в=в:(а -в). Отношение з. с. выражается числом 0,618. Пропорция з. с. 1:0,618= 0,618:0,382.

Если, отрезок прямой выразить через единицу, а затем разделить его на два отрезка по з. с., то больший отрезок будет равен 0,618, а меньший 0,382. Если округлить з.с., получим соотношение 2:1 — так его легче запомнить. На рисунке ниже показано деление отрезка на части по золотому сечению.

На основании пропорции з. с. Итальянский математик Фибоначчи построил ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 1, 2, 3, 5, 8, 1З, 21 и т. д.

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

Есть и другой метод получения гармоничных пропорций. Из квадрата можно построить прямоугольник, отношение сторон которого можно выразить как 1:v2 (прямоугольник v2). Он строится проведением дугообразным радиусом, который равен диагонали квадрата. Этот прямоугольник, к примеру, составляет основу для форматов бумаги стандарта DIN (A, B, C, D), и неслучайно опытные дизайнеры рекомендуют всегда использовать именно такие форматы. При создании проекта, в котором имеются листы различных размеров (например, фирменного стиля для какой-либо организации) применение форматов DIN позволяет придать проекту целостность.

Любопытным ? погуглите слова: золотое сечение, божественная пропорция, модулор, Ле Корбюзье, Фидий, Джей Хэмбидж. А еще загляните в блог Алексея Черенкевича.

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

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

Cчитается, что сетка, в основе которой лежит квадрат, является идеальной для модульной структуры, а также весьма удобной в плане группировки квадратов в горизонтальные и вертикальные прямоугольники с отношением сторон 1:2, 2:3, 3:4 и т.д. Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, и есть модуль (на рисунке — насыщенные квадраты).

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

В некоторых случаях применяют только вертикальное членение. Такая верстка называется колоночной.

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

Форс-мажор

Иногда приходится намеренно игнорировать сетку. В таких случаях автор сего писания злорадно ухмыляется, потому что на дух не переносит точные науки, за исключением физики, обуславливающей следующую ситуацию. Представьте: вы верстаете материал с кучей текста и несколькими иллюстрациями; фон белый, текст черный, картинки тоже темные. Кроме одной. На ней есть светлый участок у самого края, который сливается с белыми канавками. В итоге, если разложить картинки по своим ячейкам, один модуль у вас будет выбиваться из общей композиции более широким разделением. Чисто оптический момент, который нарушает целостность и режет глаз. Лечится такой баг решительно: сдвигаем иллюстрацию «со своей орбиты» — с модуля — до тех пор, пока ширина просвета вокруг нее не приблизится к ширине канавки.

Как это делается?

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

1. Определите ширину рабочей области. Для макета сайта оптимальным размером будет 960 пиклелей. Ширина рабочей области макета в 960 пикселей делится на 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 и 480. Это делает работу с такой сеткой очень гибкой, ведь все современные мониторы работают в разрешениях начиная, как минимум, с 1024?768.

2. Создайте шрифтовую или микро-сетку. В Вебе нежелательно делать ее меньше 10 пикселей.

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

4. Начертите колоночную сетку (вертикальное членение сетки). Ширина колонки, естественно, равна ширине модуля. Между колонками — канавки.

5. Поделите сетку горизонтально (создание поясов). Объедините несколько строк в один «пояс». Между поясами — правильно, канавки.

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

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

Нелюбителям математики посвящается

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

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

Сервисы 960 Gridder и Variable Grid System фактически являются конструкторами колоночной сетки. Достаточно вписать число колонок, ширину средников или расстояния между колонками, скрипт тут же визуализирует вашу сетку. Получившийся результат можно скачать и использовать при верстке макета.

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

Верстка в фотошопе – Telegraph

Верстка в фотошопе

Скачать файл — Верстка в фотошопе

Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 3. Конечно же, при частой верстке сайтов у вас будет оттачиваться мастерство, и с опытом приходят свои наработки. У каждого свои фишки и плюшки, но возможно мои советы помогут вам, хотя некоторые из них очевидны, но все же, возможно кто-то не знал. В первую, очередь данная статья будет полезна начинающим верстальщикам. Горячие клавиши в любой программе уменьшают ваше драгоценное время. Чтобы Вам было легче, посмотрите основные полезные горячие клавиши. Если Вам этого мало, то наберите в google горячие клавиши фотошопе и запоминайте их. У многих блогов, например как у моего, есть превьюшки для статей. И они все как один на лицо по размерам. И Вам нет необходимости постоянно в фотошопе создавать набор из нужных размеров. Есть несколько способов определения расстояния между блоками и блоков. Не забывайте зажимать Shift для прямой линии линейки. Также можно выделить элемент, скопировать и при создании нового документа записать размеры. Узнать размер текущего документа можно в левом нижнем углу. Кликайте по квадрату с цветом. И копируйте цвет в нужном формате. С помощью специальных программ. Для этого необходимо навести на объект и записать нужный формат цвета. Можно использовать вышеописанные способы, но лучше активировать текст: При написании разметки сайта, когда уже фотошоп нужен лишь чтобы смотреть размеры и как должен выглядить сайт, многие блоки в фотошопе нам, в принципе, не нужны. Можно и нужно их убрать. Закройте все ненужные окна: Придумайте название и сохраняйте. Теперь при щелчке на нужную среду будет изменяться настройки отображения блоков в фотошопе. Иногда при сохранении слоя конечная картинка отличается от оригинала своей прозрачностью, поэтому всегда обращаем внимание на непрозрачность и заливку слоя. При этом сохраняются необходимые настройки слоя и растет КПД. Именно так я решил назвать этот пункт, так как необходимо не просто сохранить файл, но и оптимизировать его. Как бы длинно это не смотрелось, нажимается очень просто и легко. Предварительный просмотр картинки у меня стоит на 4 вариантах. Одна область для исходного изображения, остальные можно поменять для gif, jpeg и png форматов. Посмотреть какой весить легче и при этом качество не теряется для этого сравниваем с исходным изображением. Если в общем то png и gif для мелких и прозрачных элементов, для простых картинок можно jpeg в высоком или среднем качестве. Понажимайте и выберите, что получше. Если вас не устраивают размер, то вы тут же можете их поменять справа внизу. При изменении непропорционально нажмите на значок справа от размеров. А какие фишками вы поделитесь? Отписывайтесь в комментариях и делитесь с друзьями через социальные кнопки. Думаете над созданием собственного бизнеса? На десерт сегодня девушка читает rap. Я тоде верстальщик, стало интересно почитать, что да как делают другие Оказалось, делают все то же самое, что и я. Ахах, жесть Я в фотошопе сижу по 3 ч в день ,теперь буду сидеть видимо больше , спасибо большое! Кстати, о подрастающем поколении: Обижаете Хотя видео крутое не поспоришь. Видео круто А по теме, профессиональные верстальщики уже имеют свой набор настроек для фотошопа, так что статейка будет полезна только новичкам. Все для подрастающего поколения. Не будет тянуть кота за хвост, и начнем, пожалуй: Расстояние и размеры элементов в фотошопе. Таким же способом определяем расстояние между блоками. Узнать цвет очень просто. Рабочая среда в фотошопе. Оптимизированное сохранение изображения Именно так я решил назвать этот пункт, так как необходимо не просто сохранить файл, но и оптимизировать его. Опубликовано в Верстка сайта. Александр 7 Июль УтБ 7 Июль Джон 20 Июнь CasinoLuckyWin 4 Июнь Юрий 16 Май УтБ 17 Май Геннадий 13 Май УтБ 13 Май

Состав против ржавчины

Что нужно знать в Adobe Photoshop для верстки веб-страницы

Геморрой кровит что делать в домашних условиях

Фотошоп для верстальщика.

Как работать с макетом и откуда брать данные?

Hyper v черный экран

Ваш пароль

Флаг над рейхстагом

Рубрика: Photoshop

Как доехать до станции одинцово

Photoshop для html‑верстальщика

Сильный ушиб мизинца на руке что делать

Лекция 4. Photoshop может всё

Закончилась поверка счетчиков воды что делать

Ваш пароль

Найти катет через тангенс

Лекция 4. Photoshop может всё

Правое плечо ниже левого что делать

Фотошоп для верстальщика. Как работать с макетом и откуда брать данные?

Избирательная комиссия входит структуру органов местного

Что нужно знать в Adobe Photoshop для верстки веб-страницы

Игры в карты инструкция

«Adobe Photoshop. Базовый уровень». Занятие 12.2. Версия 2019

Вторая часть конспекта к двенадцатому занятию курса «Adobe Photoshop. Базовый уровень» в его гибридной версии, стартовавшей в 2019 году. Курс состоит из 8 видоезанятий и 7 онлайн занятий. Конспекты сделаны только для видеозанятий, поскольку на онлайн занятиях идет разбор пройденной темы и домашних заданий. Здесь можно посмотреть полное описание и программу курса.

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

Конспекты к старой версии курса, состоявшей из 12 онлайн занятий и проходившей с 2012 по 2019 год можно найти

здесь.

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

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

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

Задачи на занятие
1. Познакомиться с путями (Path) и освоить методику быстрого построения контура
2. Научиться создавать при помощи путей векторные и растровые маски
3. Понять принципы создания реалистичных фотомонтажей
4. Научиться работать с текстом и верстать простые макеты

Для самостоятельного изучения:
Андрей Журавлев. «Работа с путями (Path) в Photoshop»
Liveclasses. Adobe Photoshop: работа с путями. Инструменты и операции
Liveclasses. Adobe Photoshop: работа с путями. Практика применения
Liveclasses. Adobe Photoshop: работа с текстом

Тема 23. Создание коллажа.

23.1 Что такое коллаж

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


• При создании коллажей в Photoshop активно используются слои и маски слоя


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


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


• Реалистичный фотомонтаж — это изображение, при взгляде на которое зритель готов поверить, что оно было снято в реальности, даже не смотря на сказочный или фантастический сюжет


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


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


• Изображения из фотобанков редко подходят по всем параметрам, поэтому для создания качественных фотомонтажей производится съемка отдельных элементов в соответствии с эскизом


• В создании коллажей можно выделить следующие основные этапы работы


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


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


• Первичная обработка отобранного материала и сборка на слои


• Аккуратная стыковка отдельных элементов


• Финальная коррекция всех элементов


• Обеспечение взаимодействия отдельных элементов с целью объединения их в единое целое

Дополнительные материалы:
LOVIGIN-STYLE. КАК ОН ЭТО ДЕЛАЕТ.
Для самостоятельного изучения:
Фотограф и ретушер Erik Johansson

23.2 Отбор материала

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


• Отбор может производиться одновременно по всем параметрам, или разбит на несколько этапов, но сами параметры можно отранжировать по важности


• Чем сложнее исправить несовпадение между изображениями по какому-ту параметру, тем более важным является однородность изображений по данному параметру


• Нулевой параметр: технический брак. Промах фокусировки, шевеленка, неверная выдержка, не сработавшая вспышка и т.п.


• Первый параметр: геометрия кадра. Фокусное расстояние объектива, ракурс съемки, взаимное расположение элементов объекта


• Второй параметр: свет. Количество источников света, его направление, жесткость


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


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

23.3 Первичная обработка и сборка на слои

• Первичная обработка включает в себя raw-конвертацию, обтравку, общую ретушь.


• Точная и локальная цветокоррекция на этом этапе обычно не делается, так как еще нет общего вида, к которому нужно приводить отдельные элементы


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


• Перекрытие определяет порядок расположения объектов на слоях: чем дальше от зрителя находится объект, тем ниже должен быть слой с ним


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


• При сборке сложного объекта один из его элементов можно оставить в оригинальном размере, если нет требований максимального размера и разрешения, проще всего не масштабировать самый большой объект


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


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

23. 4 Стыковка деталей

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


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


• Если такой возможности нет, сделайте границу волнистой (не прямой), это так же уменьшит заметность стыка


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


• При этом одна из масок применяется к самому слою, а вторая к группе, в которую помещается слой

23.5 Финальная коррекция

• После аккуратной стыковки выполняется тонкая цветокоррекция и ретушь с целью привести отдельные элементы монтажа к единому виду


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


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


• Кроме общей, делается выборочная коррекция, с целью убрать с объектов локальные дефекты дефекты (старые тени, рефлексы и т. п.)

23.6 Обеспечение взаимодействия отдельных элементов

• Чтобы объекты не просто жили в одном пространстве, но смотрелись как единое целое, они должны взаимодействовать друг с другом


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


• Обычно эти тени и рефлексы приходится рисовать, но иногда их удается пересадить с исходной фотографии объекта

Тема 24. Верстка.

Для самостоятельного изучения:
Liveclasses. Adobe Photoshop: работа с текстом

24.1 Сетка макета и направляющие линии

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


• Для упрощения верстки сначала создается сетка макета — разметка страницы с указанием отступов, полей набора текста, полей размещения иллюстраций и т. п.


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


• Обычные сетки просто обозначают поля для размещения элементов макета и выравнивания их между собой


• Направляющие линии (Guides) не являются частью изображения, а служат горизонтальными и вертикальными базисами, упрощающей верстку макета


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


• Отобразить (скрыть) линейки можно при помощи команды View > Rulers (Просмотр > Линейки)


• Для установки направляющей в точную позицию можно воспользоваться командой View > New Guide (Просмотр > Новая направляющая)


• Для переноса направляющей линии достаточно навести на нее курсор при активном инструменте Move Tool (Перемещение), подхватить и перенести на новое место


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


• Если нужно удалить все существующие направляющие, проще использовать команду View > Clear Guides (Просмотр > Удалить направляющие)


• Для закрепления направляющих на месте и запрета на их редактирование используется команда View > Lock Guides (Просмотр > Закрепить направляющие)


• Включают и выключают отображение всех вспомогательных элементов одновременно при помощи команды View > Extras (Просмотр > Вспомогательные элементы)


• Чтобы отключить отображение только направляющих применяется команда View > Show > Guides (Просмотр > Показать > Направляющие)


• Если включить опцию привязки элементов друг к другу Veiw > Snap (Просмотр > Привязка), они начнут прилипать при приближении друг г другу на некоторое расстояние. Эта настройка позволяет быстрее выровнять элементы макета по сетке


• Список элементов макета, между которыми происходит привязка, задается в меню Veiw > Snap To (Просмотр > Привязать к)


• Привязка к направляющим происходит вне зависимости от того, отображаются они на экране или нет

Дополнительные материалы:
pskurs.ru «Направляющие в Фотошоп»
Для самостоятельного изучения:
RuGraphics.ru «Умные направляющие в Photoshop CC 2014»
adme.ru «25 крутых сайтов с бесплатными шрифтами»

24.2 Форматирование отдельной строки текста

• Для создния простого текстового слоя достаточно кликнуть в любом месте изображения инструментом Horizontal Type Tool (Горизонтальный текст)


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


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


• Чтобы завершить работу с текстом нужно сделать текстовый слой не активным, нажать сочетание клавиш «Cmd» + «Enter», или (только для версии CC2019) кликнуть на некотором удалении от текста


• Вернуться к работе с текстом можно дважды кликнув по пиктограмме текстового слоя в палитре Layers, или выделив текст на изображении инструментом Horizontal Type Tool (Горизонтальный текст)


• Редактирование текста возможно до тех пор, пока текстовый слой не отрастрирован


• Форматирование текста осуществляется через палитру Options (Параметры) инструмента Horizontal Type Tool (Горизонтальный текст) или через палитры Character (Символ) и Paragraph (Абзац)


• Настройки форматирования в палитре Options (Параметры) являются стандартными для программ верстки и текстовых редакторов: шрифт, начертание, размер шрифта, выключка, цвет


• Размер (кегель) шрифта измеряется в пунктах. 1 пункт = 1/72 дюйма, что примерно равно 1/3 миллиметра


• Заданный в пунктах размер обозначает высоту заглавной буквы, не имеющей свисающих вниз и выступающих вверх элементов


• Высота строчных букв для большинства шрифтов составляет 70% от высоты букв заглавных

Для самостоятельного изучения:
Liveclasses. Adobe Photoshop: работа с текстом
RuGraphics.ru «Что значит растрировать слой»

24.3 Форматирование блока текста

• Чтобы создать текстовый блок сложной формы, нужно построить контур соответствующей формы и кликнуть внутри него инструментом Type Tool (Текст)


• Если нужен прямоугольный текстовый блок, инструментом Type Tool (Текст) кликаем по картинке и не отпуская кнопку мышки растягиваем ее


• Палитра Палитра Character (Символ) содержит более полный набор настроек для форматирования отдельных символов


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


• Интерлиньяж — межстрочное расстояние. Определяется как расстояние по вертикали от базовой линии одной строки, до базовой линии другой. Автоматический интерлиньяж на 20% больше кегля шрифта


• Кернинг — поправка на расстояния между конкретными комбинациями литер для визуальной равномерности текста


• Трекинг — расстояние (разрядка) между буквами


• Смещение базовой линии — сдвиг литер по вертикали относительно общей базовой линии строки


• Палитра Paragraph (Абзац) содержит более полный набор настроек для форматирования блоков текста


• Кроме флажковой присутствует двухсторонняя выключка


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


• Горизонтальные отступы включают: отступ слева, отступ справа и отступ первой строки (красная строка)


• Вертикальные отступы представлены пред абзацным и после абзацным отступами

24. 4 Написание текста вдоль кривой линии

• Чтобы написать текст по кривой линии, нужно построить путь соответствующей формы и кликнуть инструментом Horizontal Type Tool (Горизонтальный текст) по этому контуру


• Белая стрелка позволяет переносить текст вдоль построенного контура, а так же по разные стороны от него

© Андрей Журавлев (aka zhur74), 2012 г.
Редакция третья (2019 г.) переработанная и дополненная.
Первая публикаци https://zhur74.livejournal.com/98351.html

Цветовой профиль Photoshop для верстальщика — OLDESIGN.RU

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

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

Открываем фотошоп и идем в меню Редактирование -> Настройка цветов или нажимаем на комбинацию клавиш Shift + Ctrl + K. В открывшемся окне настроек цветов устанавливаем следующие параметры:
 

• RGB: RGB монитора (Monitor RGB) — «тут профиль вашего монитора» (в кавычках должен быть ваш профиль монитора)
• CMYK: U.S. Web Coated (SWOP) v2
• Градации серого (Gray): Dot Gain 20%
• Плашка (Spot): Dot Gain 20%
• Выставляем все три галочки на пунктах: Несовпадение профилей (Profile Mismatches), Отсутствие профилей (Missing Profiles). Это нужно для того, чтобы картинкам присваивался профиль вашего дисплея.

 

Сохранение картинки для Web

Если вы хотите оптимизировав сохранить картинку для сайта:

• идем в меню Файл -> Сохранить для Web и устройств… (сочетание CNTR+SHIFT+ALT+S)
• В открывшемся окне находим пункт «Преобразовать в sRGB» снимаем с него галочку
• Это делается для того, чтобы картинке вообще не присваивался никакой профиль.
• Выбираем нужный формат — jpg, gif или png и сохраняем

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

Slice tool в Фотошопе | verovski

Любому веб дизайнеру приходилось нарезать сайт для верстки в HTML+CSS. Заняты тем же самым не только веб дизайнеры, но и верстальщики-программисты. Я давно заметил, что как только дело доходит до резки сайта, дизайнеры и программисты достают из кармана инструмент выделения Rectangular Marquee Tool, и начинают поочередно выделять каждый элемент графики. Копируют, делают Paste в новый фаил, сохраняют. Примерно в таком прогрессивном темпе происходит резка всего макета.

Я и сам нарезал сайт точно так же. Старое и надежное всегда предпочтительнее нового и непонятного. Но от старых привычек надо же когда-то избавляться. Не зря же в Фотошопе уже лет 15 существуют прогрессивные способы резки сайта. Не такие прогрессивные, как в Fireworks, конечно. Но тоже ничего. В этом уроке я возьму один из своих недавних макетов веб сайтов и нарежу его инструментом Slice Tool.

Как нарезать сайт в Фотошопе?

Правильную резку сайта стоит начать с направляющих. Направляющими являются пунктирные линии, которые помогают размечать макет в Фотошопе. Работая с ними нужно понимать, что направляющие никак не прикрепляются к краям пикселя. Если вы установите направляющую не между пикселей, а к примеру, по середине пикселя 50%+1% то при выделении вы зацепите этот лишний ненужный вам пиксель. Чтобы избежать я применю несколько нехитрых трюков.

• Убедитесь что у вас включены Views > Extras. Эта настройка отвечает за все вспомогательные метки одновременно.
• Включите линейку Views > Rulers, из линейки вы будете доставать направляющие.
• Включите Views > Snap. В общем виде это значит, что ваши направляющие будут крепиться к слоям, слои к направляющим, или друг к другу. В общем, все будет немного притягиваться как магнит. Это поможет вам быть более точным при работе с направляющими.
• Далее включите настройки Views > Show > Layer Edge, эта настройка будет показывать края слоев, при выделении.
• Views > Show > Guides — видимость самих направляющих.
• И Views > Show > Smart Guides. Они тоже не будут лишними.

Скорее всего большая этих настроек и так включена. Но проверить лишнем не будет.

Манипулирование слоями

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

На самом деле рыться в слоях панели Layers вовсе не обязательно. Вы можете точно идентифицировать местонахождение слоя инструментом Move Tool. Как это работает я уже показывал в Видео уроке по инструменту Move Tool. Просто выберите этот инструмент, и кликайте по нужным объектам нажав клавишу CTRL. Фотошоп автоматически выделит нужный слой на панели слоев. Вы можете так же нажать в настройках инструмента галочку Auto Select. Далее необходимо выбрать слои Layers. Тогда вам не придется постоянно нажимать CTRL, однако в этом случае инструмент будет работать постоянно в режиме авто нахождения. Куда бы вы не кликнули, он будет перескакивать со слоя на слой, что не всегда удобно, если вы хотите передвинуть выделенный слой.

Выбрав нужный слой его края тут же будут выделены благодаря настройке Views > Show > Layer Edge, которую мы включили несколько ранее. Так вам будет значительно проще настроить направляющие и нарезать сайт. Теперь, когда подготовления закончены, переходим к самой резке.

Размечаем макет направляющими

Включите линейку View > Rulers и вытягивайте направляющие мышкой из линейки. На самой линейке установите Пиксели. Для этого кликните по линейке правой кнопкой мыши и из выпадающего меню выберите Pixels. Далее вытягивайте направляющие одну за другой и размечайте ваш макет. Работайте инструментом Move Tool, кликайте по элементам дизайна нажав CTRL, чтобы подсветить края слоя.

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

В результате у нас должна получиться следующая картина.

Инструмент Slice Tool

После того, как все области намечены направляющими, выбираем инструмент Slice Tool из панели инструментов. Этот инструмент Фотошопа представлен двумя инструментами:

• Slice Tool — вырезает графику на куски, а точнее, только определяет места, которые уже потом будут сохранены как разные изображения.
• Select Slice Tool — из названия понятно, что этот инструмент выделяет уже «нарезанные» области с целью поменять настройки. Почему два инструмента нельзя было объединить в один?

Кстати, я не говорил, что инструмент Slice Tool появился в Фотошопе, в ходе конкуренции с злосчастным Fireworks, с целью отбить у последнего часть рынка и представить веб дизайнерам, хоть какие-то полезные для них инструменты. С тех пор возможности инструмента Slice Tool практически никак не изменялись и не дополнялись. После покупки Adobe компании Macromedia, в пакете которой находилась программа Fireworks, все полезное для веб дизайнера продвигается строго в Fireworks. Последняя версия Фотошоп CS6 не принесла в инструмент Slice Tool никаких нововведений. Поэтому я со спокойным сердцем работаю в CS5.

Выбрав инструмент Slice Tool, кликаем по кнопке Slice from Guides, что означает — нарезать на основе направляющих. Для этого мы их и создавали. И это самый простой способ создать области реза инструментом Slice Tool. Единственный его минус заключается в том, что Фотошоп не знает какие именно области являются активной разметкой, а какие области вспомогательные. Более того в нашем макете получается слишком много областей пересечения. У нас есть направляющие для Логотипа, но направляющие снизу для формы ввода режут логотип на несколько частей.

Чтобы исправить недостатки выберите инструмент Slice Select Tool нажмите SHIFT и выделите все три куска логотипа. После чего кликните правой кнопкой мышки и из меню выберите  Combine соединить.

Тоже самое проделайте и с другими областями разметки Slice.

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

Ручная резка сайта Slice Tool

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

На панели настроек при ручной разметке вам доступны следующие функции:

• Normal — обычная стандартная разметка. Курсор на рабочую область и рисуете сколько нужно.
• Fixed Aspect Ratio — создает области разметки в соотношении 1:1, 2:1 и так далее.
• Fixed Sized — создает разметку определенного размера. Вписываем пиксели, получаем область нужного размера.

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

Инструмент Slice Select Tool

Slice Select Tool — управляет вашими разметками. Этим инструментом вы можете передвигать области, выравнивать, делить на двое, сливать и присваивать различные настройки, полезные для создания HTML прототипа. Постепенно мы рассмотрим все из них.

Но для начала несколько полезных советов.

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

Инструментом Slice Select Tool выберите любую пассивную область реза, а на панели настроек нажмите кнопку Promote.

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

В некоторых ситуациях вы хотите доработать дизайн, а области резки начинают мешать. В этом случае выберите View > Show > Slices. И области разметки пропадут. Как только вы активируете инструмент Slice Tool они опять появятся.

Иерархия Slice областей

Области реза находятся по отношению к друг другу в жесткой иерархии. Точно так же как и векторные контуры Фотошопа внутри векторной маски. Конечно у вас нет дополнительной панели «Слоев» чтобы перемещать области реза, но она и не нужна. На панели инструмента Slice Select Tool у вас следующие кнопки.

• Bring to Front — перемещает на самый верх.
• Bring Forward — перемещает на 1 слой вверх.
• Send Backward — перемещает на 1 слой вниз.
• Send to Back — перемещает на дно.

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

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

Деление области реза Slice

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

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

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

С инструментом Slice Tool найти центр проще некуда. Просто кликните по пустой рабочей области, нажмите кнопку Device и разделите область на 4 равные части. После этого вытаскивайте направляющие и размечайте область. Порезанные области далее можно либо удалить правой кнопкой мышки и из меню Delete. Либо скрыть

Точно так же я воспользуюсь Slice Tool для разбивки области макета под меню. Ниже я подготовил красную область для условного контента. Теперь я хочу разбить её на 5 областей под кнопки, и вы знаете, что Фотошоп не лучшая программа для разметки и разбивки. Инструментом Slice Tool я нарисую область меню. А далее разобью её на 5 равных частей диалоговым окном Device.

Разметка на основе слоя

Ещё один интересный и быстрый способ создать разметку, без особых усилий — это создать разметку на основе конкретного слоя. Особенно хорошо этот способ подходит для не сложных прямоугольных слоев. Для этого вам нужно выделить нужный слой на панели слоев Layers. А затем открыть Layers > New Layer Based Slice

Фотошоп вмиг очертит ваш слой областью реза.

Выравнивания областей разметок

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

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

Настройки области Slice

Последним диалоговым окном в этой статье пожалуй будет окно настроек самой области разметки. Я не буду углубляться в это диалоговое окно, потому что оно затрагивает совершенно отдельную тему: моделирование в Фотошопе реального рабочего прототипа на HTML+CSS. Более того, в Фотошопе вы можете даже сохранять XTML фаилы с скриптами анимации. Что это значит? Это значит что вы нарезаете сайт, и по ходу дела сохраняете прототип верстки.

Прототип верстки — это сгенерированная квази верстка. Её цель простая, показать клиенту вид дизайна в браузере. Конечно Фотошоп весьма слаб в создании таких прототипов. С тех пор как Адобе заполучила Fireworks все заточенные под веб разработки велись в нем. И я не уверен что вы когда-либо будете пользоваться настройками прототипа в Фотошопе. Не очень уверен что этим вообще нужно пользоваться именно в Фотошопе. Но тем не менее, если вы сделали дизайн, разметили его инструментом Slice Tool, вам останется всего пара кликов чтобы сгенерировать такой прототип. Подробнее об этом я расскажу в следующих статьях.

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

Сохраняем нарезанные картинки

Чтобы сохранить нарезанные картинки переходите в File > Save for Web. И это самое основное диалоговое окно для создания будущего прототипа, о котором мы поговорим в следующих статьях. Но сейчас мы просто сохраним разом нарезанные картинки.

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

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

Теперь нажимаем на Save. В диалоговом окне сохранения в Формате выбираем Images Only. В настройках Default. В свойствах резки вы можете выбрать области для сохранения из Всех кусков, активных кусков Users Slices или только тех кусков, которые вы выделили в окне Save for Web.

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

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

Автор:

Создайте потрясающий макет портфолио в Photoshop

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

Ресурсы изображений:

Microbot, Suharrhyme

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

Шаг 1. Создайте документ Photoshop

Откройте Photoshop и создайте новый файл шириной 1100 пикселей и высотой 1500 пикселей.

Шаг 2: Заливка фона

Теперь выберите инструмент «Заливка» и залейте фон цветом # f6f6f6.

Шаг 3. Установите систему навигации

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

Шаг 4. Затемнение фона навигации

Выберите инструмент «Ведро с краской» и залейте область цветом # 191919.

Шаг 5. Создайте область кнопок навигации

Щелкните инструмент выделения и выберите прямоугольную полосу в затемненной области навигации.Затем залейте его # 050505.

Шаг 6: Добавьте разделители

Мы добавим несколько линий, которые будут разделять ваши элементы навигации. Выберите инструмент «Линия» с толщиной 1 пиксель. Также убедитесь, что наш цвет переднего плана # 616161.

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

Теперь добавим текст для наших страниц. Просто выберите инструмент «Текст» и введите желаемый текст.

Шаг 8. Создание эффекта наведения

Для эффекта наведения мы создадим белую линию с помощью инструмента «Кисть» размером 3 пикселя.Затем выберите ластик и удалите края мягкой круглой кистью. Теперь уменьшите непрозрачность до 40%.

Шаг 9: Добавьте свой бренд

Добавьте свой логотип слева от меню навигации.

Шаг 10: Создание фона

Теперь мы перейдем к нашей области избранного контента. Сначала создайте новый слой и с помощью инструмента выделения выделите область под навигацией. Залейте его цветом # a0c0c8.

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

Нам нужно немного обводки, поэтому нажмите «Слой»> «Стиль слоя»> «Обводка».

Шаг 11. Разделите область содержимого на столбцы

Создайте еще один прямоугольник и залейте его цветом # 323030. И для смежной текстовой области залейте ее # 242322.

Шаг 12. Добавьте кнопку «Подробнее»

Теперь выберите инструмент «Текст» и добавьте наш текст о выбранном изображении.Под текстом мы добавим кнопку «читать дальше». Для этого просто выберите инструмент «Прямоугольник» и создайте маленький прямоугольник цвета # 323030. Затем добавьте текст внутри нового прямоугольника.

Шаг 13: Добавьте избранные изображения

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

Шаг 14: Добавьте падающую тень

Выберите инструмент «Линия» и используйте его под блоком функций с толщиной 1 пиксель и цветом #dedede.Теперь нажмите «Слой»> «Стиль слоя»> «Тень».

Шаг 15: Создайте элемент «Новости»

Теперь создадим элемент «Новости». Итак, нажмите на инструмент «Прямоугольник» и создайте прямоугольную полосу цвета #ebebeb. Снова выберите инструмент «Прямоугольник» и нарисуйте очень маленький прямоугольник слева цветом # 000000. Выделите этот черный прямоугольник и нажмите «Слой»> «Стиль слоя»> «Наложение градиента».

Шаг 16: Добавьте текст «Новости»

Добавьте текст «новости» с помощью текстового инструмента.

Шаг 17: Создание позиции портфеля

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

Шаг 18: Добавьте изображения и текст портфолио

Теперь добавьте изображение и добавьте баннер сбоку. Выберите инструмент «Текст» и добавьте текст под изображением.

Шаг 19: Добавьте дополнительные позиции портфеля

Повторите тот же процесс, чтобы создать еще две позиции портфеля.

Шаг 20: Создайте кнопки ниже

Выберите инструмент «Прямоугольник» и создайте две кнопки с цветами # ca0e0e и # 3c3c3c. Затем добавьте текст с помощью текстового инструмента.

Шаг 21: Добавьте разделительные линии

Теперь выберите инструмент «Линия» и создайте две линии толщиной 1 пиксель и цветом #dcdcdc. После этого добавьте изображения и текст в том же стиле, что и предыдущий пост.

Шаг 22. Добавьте обновления Flickr

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

Теперь вставьте изображения в рамку.

Шаг 23. Создание нижнего колонтитула

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

Шаг 24: Добавление текста нижнего колонтитула

Выберите инструмент «Текст» и добавьте желаемый текст нижнего колонтитула.

Наш потрясающий макет готов.

Как использовать наши рекомендации по макету в Adobe Photoshop

В этом видео мы покажем вам, как использовать наши рекомендации по макету в Photoshop и разместить свои рисунки так, чтобы у вас был идеальный напечатанный образец. PsPrint предлагает более 150 рекомендаций по макету, которые упростят вам создание печатного изображения. В этом видео мы будем использовать горизонтальный макет поздравительной открытки.Выберите размер поздравительной открытки, который вам подходит, и загрузите лицевую и оборотную стороны своей поздравительной открытки. В Photoshop откройте рекомендации по макету. Выберите «Поле кадрирования» и убедитесь, что для параметра «Разрешение» установлено значение не менее 300 точек на дюйм, а для цветового режима установлено значение «Цвет CMYK». При просмотре направляющей в Photoshop вы увидите выпуск за обрез, обозначенный красной областью, черную пунктирную линию для линии разреза, синюю линию для безопасности и информационное окно для проектирования с границами. Пунктирная линия посередине — линия счета, где будет сложена ваша поздравительная открытка.Потяните за направляющие, чтобы имитировать линию отреза и страховочные линии со всех четырех сторон, а также направляющую для линии надреза. Рекомендации для области выпуска за обрез не требуются, но убедитесь, что задний фон вашего дизайна достигает конца области выпуска за обрез, чтобы ваша конечная деталь не содержала нежелательных белых областей после обрезки в процессе производства. Кроме того, не забудьте установить требования к границам, если вы хотите включить границу в свой дизайн. Обратите внимание, что ориентация верхней панели этой инструкции по макету перевернута.Конечно, вы можете создать свой дизайн правой стороной вверх для просмотра, но, пожалуйста, убедитесь, что эта панель повернута на 180 градусов перед отправкой, чтобы при печати и сложении карточки она была лицевой стороной вверх. Теперь вы можете отключить слой с рекомендациями по макету и приступить к созданию своего дизайна. Не стесняйтесь сохранить этот слой для удобства использования. Когда ваш дизайн будет завершен и верхняя панель будет повернута вперед, вы можете удалить направляющий слой, чтобы он случайно не напечатался на вашем изделии.Когда вы будете готовы разработать обратную сторону или то, что будет внутри вашей поздравительной открытки, откройте руководство по макету для задней стороны так же, как вы это делали для передней. Вы можете имитировать те же правила, что и раньше, но обратите внимание, что ориентация может быть отправлена ​​правой стороной вверх для этой стороны. Это пример правильно оформленного файла поздравительной открытки. А вот как будет выглядеть готовая деталь, распечатанная и сложенная. Если у вас возникнут дополнительные вопросы, позвоните в нашу службу поддержки клиентов по номеру 800.511.2009

Как сбросить макет панели рабочего пространства в Photoshop CS5

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

Сбросить макет панели по умолчанию в Photoshop CS5

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

Шаг 1. Начните с открытия Adobe Photoshop.Photoshop откроется с последним рабочим пространством, которое вы использовали, поэтому, если вы никогда не переключаете рабочие пространства, это то самое, которое вы хотите сбросить до параметров по умолчанию.

Шаг 2: Щелкните опцию Window вверху окна.

Шаг 3: Щелкните Workspace , затем щелкните Reset Design , Reset Painting или Reset Photography , в зависимости от того, какое рабочее пространство активно в данный момент.

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

Мэтью Берли пишет технические руководства с 2008 года. Его сочинения были опубликованы на десятках различных веб-сайтов и были прочитаны более 50 миллионов раз.

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

Его основные писательские темы включают iPhone, Microsoft Office, Google Apps, Android и Photoshop, но он также писал и на многие другие технические темы.

Связанные

Отказ от ответственности: Большинство страниц в Интернете содержат партнерские ссылки, в том числе некоторые на этом сайте.

Как создать потрясающий макет портфолио в Photoshop

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

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

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

Вещи, которые нам нужны:

Конечный продукт

Скачать PSD здесь

Начнем!

Откройте холст и установите размер 980 пикселей в ширину и 1692 пикселей в высоту.

Заполните страницу текстурой дерева, продублируйте ее (CTRL + J), чтобы покрыть всю страницу. Убедитесь, что линии дерева идут плавно. Затем возьмите инструмент Marquee Tool (M), создайте новый макет (CTRL + SHIFT + J) и нарисуйте прямоугольник в верхнем левом углу страницы, залейте его цветом # 403E3E.

Выберите Pen Tool (P) и CTRL + R, чтобы отобразить линейку, установите эти направляющие так, чтобы вы знали ее среднюю часть. Нарисуйте стрелку на кончике слоя с прямоугольником и щелкните правой кнопкой мыши> Сделать выделение. Теперь нажмите CTRL + I, это перевернет выбранную область, и нажмите DEL.

Вот вырезанная версия.

В Blending Options> Inner Shadow установите передний план на # 751a10 и -90 для угла, размера и расстояния на 3px.

В настройках цвета градиента скопируйте цвета выше и нажмите ОК.

В настройках наложения градиента установите стиль отражения и угол 0.

Обводка, измените цвет переднего плана на 7a1b11 и размер на 4 пикселя.

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

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

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

В параметрах наложения Drop Shadow установите передний план на #fff, угол на 90 и расстояние, размер на 1 пиксель.

Для цвета переднего плана Inner Shadow # 741b11, расстояния -90 и размера 1px.

Цвет переднего плана Outer Glow — # 801f14, а остальные — по умолчанию

.

Передний план Inner Glow — # 00000, а остальные

оставьте.

Вот наш логотип в виде полного круга

На логотипе шрифта мы используем Ballpark, цвет текста A #ffffff и 71pt, тень установлена ​​по умолчанию.

Затем мы создадим новую линию, возьмем инструмент Single Row Marquee Tool (M) и щелкнем чуть ниже круглого логотипа. Залейте его цветом переднего плана # 7b1d12, продублируйте слой и залейте его цветом #ffffff, непрозрачность 50%. Снова продублируйте этот слой и перетащите его ниже.

Вот это у нас есть, дальше навигация

Добавили навигацию, шрифт Georgia 22pt, цвет #ffffff.

Тень для навигации, размер переднего плана # 000000 и расстояние до 1px.

Дублируйте слой с логотипом и перейдите в Filter> Blur> Guassian Blur и установите его на 5.7px

Для публикации с контентом возьмите инструмент «Прямоугольник со скругленными углами» (U) и установите радиус 5 пикселей, передний план — # ffffff.

В «Параметры наложения»> «Тень» цвет переднего плана — #adadad, расстояние и размер — 1 пиксель.

Обводка, цвет # 9b9b9b и размер 1 пиксель.

Дублируйте слой (CTRL + J) два раза и дважды нажмите CTRL + стрелку вниз, чтобы он опустился на 2 пикселя для каждого слоя.

Далее следует взять любое изображение, которое достаточно велико, в этом случае я использую свой старый учебник. Щелкните правой кнопкой мыши слой> Растрировать изображение. Теперь удерживайте CTRL + щелкните слой сообщения с контентом, а затем нажмите DEL. Следует удалить лишнее на изображении.

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

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

В нижнем колонтитуле создайте новый слой (CTRL + SHIFT + N) и возьмите инструмент Marquee Tool (M), залейте его цветом # 000000 Opacty 44%.

В левой нижней части страницы возьмите инструмент Rounded Rectangle Tool (U) и залейте его цветом # 000000, непрозрачность 20%.

Мы добавили текст, шрифт Georgia 15pt, цвет #ffffff.

Мы также добавили тень к тексту, установив передний план на расстояние # 000000 и размер 1 пиксель.

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

Для создания виджета Twitter в виде стрелки. Выберите инструмент «Перо» (P) и нарисуйте стрелку вроде, а затем щелкните правой кнопкой мыши> выделите и скопируйте прозрачность на фоновом слое.

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

InDesign против Photoshop — Какой из них соответствует вашим потребностям?

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

Разработка макетов проекта

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

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

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

Редактирование изображений

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

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

Photoshop лучше редактирует такие вещи, как цвета.

Сохранение целостности логотипа

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

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

У Photoshop и InDesign разные цели, когда дело касается логотипов.

Использование текста в проекте

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

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

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

Как создать шаблон брошюры в Photoshop

, Васим Аббас, 10 декабря 2016 г.

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

Если у вас его еще нет, вы можете скачать Photoshop здесь с сайта Adobe.

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

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

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

Создание шаблона брошюры

Первое, что вам нужно сделать, это открыть новый документ в Photoshop. Вы должны установить ширину на 11 дюймов и высоту на 8,5 дюймов.

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

Просто нажмите Ctrl + R , чтобы сделать линейки видимыми, и нажмите V , чтобы активировать инструмент «Перемещение». Перетащите линейки к четырем сторонам документа.

Теперь перейдите к Image »Canvas и добавьте 1 ″ к ширине и высоте.Это устанавливает ширину на 12 дюймов и высоту на 9,5 дюймов.

Вы увидите, что ко всем четырем сторонам документа добавлено 0,5 ″, чтобы направляющие равномерно внутри него.

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

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

Затем вам нужно выбрать инструмент «Прямоугольник» на панели инструментов в левой части экрана Photoshop.Нарисуйте свой первый вертикальный прямоугольник пропорционально 1/3 вашего документа.

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

Теперь вы должны выбрать инструмент «Перемещение» на панели инструментов и установить флажок «Показать элементы управления преобразованием» внутри инструмента. опции.

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

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

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

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

Теперь, когда ваши столбцы готовы, вы должны добавить цвет фона в документ. Чтобы добавить цвет, нажмите на палитру цветов переднего плана. В CMYK вы можете установить желтый цвет на 15% и розовый черный на 10%.

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

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

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

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

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

Затем следует дизайн шаблона брошюры.

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

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

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

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

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

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

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

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

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

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

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

Используете WordPress и хотите получить Envira Gallery бесплатно?

Envira Gallery помогает фотографам создавать красивые фото и видео галереи всего за несколько кликов, чтобы они могли демонстрировать и продавать свои работы.

Создание фотоальбома / фотоальбома для журнального столика в Adobe Photoshop

Photoshop предоставляет полный набор инструментов для редактирования цифровых изображений и создания макетов.Вы можете изменять размер, улучшать, корректировать цвета и размещать свои фотографии в наших шаблонах AsukaBook прямо в Photoshop. Подготовка Photoshop 1. Запустить Photoshop 2. Открыть настройки цвета (Mac: Cmd + Shift + K; ПК: Mac или Ctrl + Shift + K) 3. Убедитесь, что рабочее пространство RGB соответствует цветовому пространству ваших изображений, которые вы будете использовать для своего дизайна. (Adobe RGB или sRGB) 4. «Сохранить встроенные профили» для цветов RGB, CMYK и серого Загрузить пустые шаблоны AsukaBook предоставляет пустые шаблоны Photoshop, которые обеспечивают полную свободу дизайна. Каждый набор шаблонов и шаблон в этом наборе настраиваются специально с учетом соответствующего размера, DPI, цветового профиля, наименования и руководств для отдельного типа продукта, размера, отделки и т. Д. Не забудьте загрузить правильные шаблоны для желаемого продукта. и не изменяйте спецификации шаблона во время проектирования.Если в любое время вы передумаете относительно какой-либо из изначально выбранных деталей продукта, загрузите новые соответствующие шаблоны и перенесите на них свой дизайн. Шаблоны дизайна в Photoshop Откройте шаблоны в Photoshop и добавьте к ним нужные изображения и улучшения. На направляющих указывается, где полотно будет обрезано при производстве, а также где расположены корешок и желоба.Обратите внимание, что в процессе обрезки может произойти небольшое смещение, поэтому обязательно приближайте край холста, чтобы гарантировать полное растекание. Просмотрите макет со 100% размером, чтобы убедиться в качестве изображения и проверить типографские ошибки. Мягкая проверка вашего дизайна и изображений перед окончательной доработкой макетов и сохранением файлов. Подробнее об управлении цветом … Сохраните файлы дизайна Когда ваши макеты будут завершены, вы захотите создать в своей клиентской папке две отдельные папки для разработанных файлов: одну для основных файлов, PSD, файлов и другую для файлов шаблонов JPEG.Сохраняйте файлы в форматах PSD и JPEG в соответствующих папках. Настройки файла JPEG 1. Нажмите «Сохранить как . ..» в меню «Файл» 2. Перейдите в папку JPEG соответствующего клиента 3. Оставьте имя файла как есть! ВАЖНО! 4. Выберите формат JPEG из раскрывающегося списка форматов 5. Установите флажок рядом с «Встроить цветовой профиль (AdobeRGB или sRGB) 6. Щелкните Сохранить 7. Введите качество 11 8. Выберите оптимизированный базовый уровень формат 9. Нажмите ОК Загрузите файлы JPEG и разместите заказ 1. Войдите в свою учетную запись 2. Нажмите кнопку «ЗАГРУЗИТЬ ФАЙЛЫ JPEG» 3. Следуйте инструкциям по загрузке файлов 4. После загрузки вы можете разместить заказ или сохранить файлы в своей учетной записи, чтобы сделать заказ позже. No related posts. alexxlab Автор записи Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт