Как сделать координатную сетку в фотошопе. Как сделать сетку в фотошопе.

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

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

image

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

Какой формат получения информации выбрать – решать вам.

Что такое модульная сетка и зачем она нужна

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

«Сперва думаем – потом делаем». Этим и отличается работа профессионала от новичка. Специалисты не размышляют категориям: «нравится-не нравится». У них все четко.

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

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

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

Читайте также:  Как просто и быстро добавить текст на изображение в Photoshop

image

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

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

Как создать сетку

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

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

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

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

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

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

Самое простое – это базовая линия (Baseline), она определяется исходя из размера шрифта, увеличенного в полтора раза. Если кегль 14, то высота будет 21.

Читайте также:  Как быстро провести прямую и красивую линию в Photoshop

Далее идет ширина модуля (Module width) 60. Если у вас есть какой-то повторяющийся элемент, то его параметры могут лечь в основу при определении этого показателя. Количество столбцов (Num of modules) можете поставить 13. Это значение определяет ширину всего проекта (Layout width), который выставляется автоматически. В моем случае 1020

Горизонтальное членение (Module height), то есть сколько строк будет в одном квадрате. Зависит от какого-то самого мелкого элемента, к примеру, логотипа. Он будет основным показателем, а все остальные станут кратны ему. То есть больше или меньше в определенное число раз. Можете поставить значение 3.

Для определения расстояния между блоками (Gutter), как правило, используется то же значение, что и для базовой линии, либо стандартное значение 20.

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

Полезные видео

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

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

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

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

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

Онлайн-курс с поддержкой автора – надежная инвестиция в будущую профессию.

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

Кадрирование или Crop –­ один из основных инструментов Adobe Photoshop. Композиционный инструмент. Ведь, по сути, сама фотография и есть кадрирование. Но даже несмотря на то, что Photoshop многим из нас давно и хорошо знаком, часто бывает, что о Кадрировании мы знаем не так много. Именно поэтому мы предлагаем подробно изучить возможности кадрирования в самом популярном графическом редакторе, и расскажем вам о 10 вещах, которые обязательно нужно знать каждому фотографу или дизайнеру.

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

1. Режим наложение сетки кадрирования (Crop Guide Overlays)

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

– Rule of Thirds (правило третей) – Grid (сетка) – Diagonal (диагональ) – Triangle (треугольник) – Golden Ratio (Золотое сечение) – Golden Spiral (Золотая спираль)

Все они помогают выстроить картинку по композиции согласно ее законам, и облегчают кадрирование. Также можно изменить положение спирали или треугольника в случае, когда выбраны Golden Spiral или Triangle с помощью нажатия комбинации клавиш Shift+O.

2. Изменение ориентации кадрирования

Наверное вы уже сталкивались с тем, что повернуть настроенную вами кадрировочную рамку в Photoshop не так-то просто. Когда вы хотите повернуть рамку на 90 градусов, сохранив пропорции, нажмите клавишу X. Так вы сможете легко переключаться между альбомной и портретной ориентацией.

3. Скрыть обрезанные области

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

4. Классический режим кадрирования

В Photoshop CC вы наверное уже сталкивались с тем, что кадрирование стало другим, нежели в предыдущих версиях. А именно, окно кадрирования стало статичным, и передвигать и подстраивать под сетку нужно само изображение. Для тех, кто предпочитает использовать классический режим кадрирования, в котором двигать нужно не саму картинку, а рамку, есть возможность сделать это нажав клавишу P, которая переключит вас в Classic Mode. Так же это можно сделать в меню настройки кадрирования на панели настроек.

5. Использование Front Image

При работе с двумя документами, разрешение и размеры изображения в которых разнятся, вы можете с легкостью кадрировать один документ под размеры другого используя опцию Front Image. Для начала нужно открыть оба документа и выбрать тот, который вы хотите использовать в качестве эталона. Далее выберите Crop Tool,  и на всплывающем окне в панели параметров выберите Front Image или нажмите клавишу I . Это позволит запомнить размер и разрешение первого документа. Далее вы можете переключиться на другой документ, в котором Crop Tool уже будет содержать настройку размера и разрешения первого изображения.

6. Как можно подтвердить кадрирование

Помимо клика на галочку на панели настроек есть еще варианты как можно подтвердить сделанное вами кадрирование:

– Нажать Enter – Двойной клик по области кадрирования – Клик на иконку подтвердить на панели настроек – Правый клик > Контекстное меню > Crop – Меню Настройка изображения > Crop

7. Инструмент перспективного кадрирования

Если в кадре есть объект с выраженной перспективой, как, например, здание, то его плоскости могут быть не параллельны рамке кадра. В этом случае вы можете воспользоваться Perspective Crop Tool. Для кадрирования вам нужно отметить четыре угла, и нажать Enter после того, как образуется рамка кадрирования. Готовый кадр будет расположен к вам фронтально с ровными плоскостями. Если вы хотите выровнять объект без применения кадрирования, воспользуйтесь Auto Upright во вкладке Lens Corrections в настройках Camera Raw Filter.

8. Обратимое кадрирование

Лучший способ сохранить «отрезанные» части изображения при кадрировании, это снять флажок с опции Delete Cropped Pixels в настройках кадрирования. Еще один способ, это создание слоя Smart Object, который вы сможете кадрировать не боясь необратимых последствий даже независимо от того, была включена галочка Delete Cropped Pixels, или нет.

9. Расширение границ

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

10. Выпрямление фотографии с помощью кадрирования

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

Источник: www.design.tutsplus.com
Перевод: PressFoto

aegcorp.net

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

Для нам начала необходимо создать документ размером 50 на 50 где, пикселей обязательно выбрать в строке В«Содержимое ПрозрачныйВ» — фона:

Так как размер созданного очень квадрата маленький, с помощью Панели В«НавигаторВ»{}приблизьте Navigator примерно до 900% наш будущий Обратитесь:

узор к панели слева и выберите инструмент В«PencilВ»{}Карандаш:

Выберите нужный цвет – цвет сетки будущей и на панели настроек этого инструмента задайте сверху размер карандаша = 2 пикс:

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

Все! готов Узор! Осталось его сохранить! Для перейдем этого в меню Редактирование{}Edit —> Определить Define{}узор Pattern и в открывшемся окошке назовем изображение наше, после чего нажмем В«окВ»:

Давайте попробуем теперь применить его к фотографии! Откроем создадим или любой снимок в программе:

Продублируем фоновый его слой(Ctrl+J):

И обратимся в меню layers[]Слои -/> Стиль слоя[]layer style -/> узора Наложение[]Pattern Overlay. И в открывшемся окне узор выберем, созданный нами ранее, задав вам подходящие Непрозрачность и Масштаб для расположения и сетки видимости. Чем больше вы зададите масштаб тем, узора крупнее будет сетка:

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

В созданном вами таким документе же образом, как в первой части урока нашего снова активируйте инструмент В«КарандашВ»(размером) с pencil – 2пикс. И поставьте им в верхней части самом в документа центре точку, как это рисунке на показано ниже:

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

Добавим объем ему. Для этого перейдем в меню layers[]Слои -> Стиль слоя[]layer style -> Shadow[]Тень и установим следующие значения документа:

левой в Далее части окна перейдем к строке В«свечение ВнутреннееВ»[]Inner Glow и установим следующие изображения параметры:

В окне В«ТиснениеВ»[]Bevel and установим Emboss такие значения:

После проделанных как, действий в первой части урока, сохраним изображение наше как узор с помощью команды В«узор ОпределитьВ»[]Define Pattern и таким же образом созданный наложим документ на любое изображение:

Вот получилось что у меня в итоге:

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

успехов7 апреля 2012 · Наталья Иванова · «Мир Фотошопа»

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

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

Исходные материалы для урока

  • Оригинальная фотография,
  • Шрифт Aldo.

Шаг 1

Запустите программу Фотошоп и откройте свою фотографию. Я использовал эту фотографию с сайта Flickr.

Шаг 2

Самый простой способ, который я смог придумать, чтобы создать стиль оформления сеткой, заключается в наложении узора, сделанного специально в программе Фотошоп. Создайте новый документ размером 3px на 3px и выберите Transparent для фоновой заливки. Увеличьте масштаб изображения до 1600%.

Шаг 3

Теперь нарисуйте узор, как на изображении ниже. Используйте Rectangle Marquee Tool ( M ), чтобы создать прямоугольное выделение. Затем залейте его Edit ? Fill , установите черный цвет в выпадающем меню. Далее выберите Edit ? Define Pattern и введите имя для узора.

Шаг 4

В этом шаге мы добавим сетчатый узор на фотографию. Возвращаемся к исходной фотографии ( дополнительный файл с узором можно удалить, он нам больше не нужен ). Идем в меню Layer ? Layer Style ? Pattern Overlay. Выбираем узор, созданный в предыдущем шаге, и понижаем Оpacity приблизительно до 60%.

Шаг 5

Мы создали эффект наложения узора из сетки, но, я думаю, что изображение только выиграет, если мы добавим еще и легкий эффект виньетки. Создайте в палитре слоев новый слой над всеми предыдущими и активируйте Gradient Tool ( G ). Выберите градиент от прозрачного к черному ( левый флажок — прозрачный; правый — черный). Протяните градиент от центра к краю ( углу ). Измените режим смешивания слоя на Overlay и установите непрозрачность слоя на 20%.

Шаг 6

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

Финальный результат

Небольшое послесловие

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

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

Переведено с сайта www.myinkblog.com, автор перевода указан в начале урока.

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

image

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

image

Для того чтобы его нарисовать необходимо увеличить масштаб до 3200 %, то есть до максимума. Затем выделять инструментом «прямоугольное выделение» области по одному пикселю и заливать черным цветом. После этого сохраняем узор в коллекцию узоров. Делается это через верхнее меню «edit-define pattern», прописываем название нового узора и нажимаем «ок». Теперь наш новый узор для паттернов добавился в библиотеку узоров Photoshop. Открываем нашу фотографию, на которую будет накладывать эффект сетки. Затем заходим в область layers-fx, pattern overlay и выбираем наш паттерн, нажимаем «ок».

image

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

image

Оцените статью
Рейтинг автора
4,8
Материал подготовил
Максим Коновалов
Наш эксперт
Написано статей
127
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий