Решетка для фотошопа: Использование сеток и направляющих в Photoshop

alexxlab
Разное |

Содержание

Къде да намерим мрежа в Photoshop. Модулна решетка в Photoshop

Шелдън Пинкман

Колко бързо и лесно създаване на мрежа с помощта на Adobe Photoshop?

Да предположим, че трябва да нарисувам мрежа в Photoshop, всеки квадрат има същия размер, определено количество Височина и ширина на пикселите и мрежестите линии имат определена ширина в пикселите. Като този:

В момента го правя, рисувам един квадрат, копиране + вмъкване + движещо се + сливане няколко пъти, за да създадете един ред, копиране / поставяне няколко пъти, за да създадете повече струни един върху друг.

Той работи, но изглежда много тромав, сигурен съм, че трябва да има повече ефективен метод да го направя?

Какви са някои ефективни методи за създаване на квадратна мрежа със същия размер?

Отговори

Alex Blackwood.

Опитайте да използвате шаблони. За вашия площад:

Начертайте началния квадрат и подчертайте избора на по-малък квадрат, който включва само горната и лявата страна. След това изберете «Редактиране\u003e Определете модела … и запазете шаблона, наречен.

малкият малък човек

как да го направим така, че няма полупансион, така че те да годат перфектно?

Alex Blackwood.

В горния пример използвах информационната палитра за измерване на размера на мрежата. В този случай беше 86px. Ако искате да създадете платна мозайка без «полубушки», използвайте стойност, която е равномерно умножена по размерите на платното.

Дейв Манбон

Е, имам слой, в който рисувах избрания квадрат и разпределях областта за подбор, но редактирам\u003e define pattern за мен е изключване на менюто с увреждания. Пъзели.

Хелън

Ако се опитвате да създадете решетка само за вашата полза, когато се развивате, има разширение, наречено Ръководство, което ще го направи ефективно.

Ако имате нужда от мрежата, за да бъдете част от дизайна, бих препоръчал да създадете линия, използвайки инструмент за избор, и след това да го дублирате толкова пъти, колкото ви трябва, и след това използвайте слоя \u003e\u003e разпределете параметрите, за да ги направите перфектно гладки.

Дейвид Паркър

намерих бърз път Решете моя проблем (имам PS CS4): Използвах да «покажа решетката», коригира размера и т.н. в настройките, получени точно както исках, и след това направих снимка на изображението, сложи го в моя файл Като нов слой и го подредете до размера и мащаба. За някои потребители няма да е достатъчно, но беше много бързо и работеше за нуждите ми.

Лирич.

Под раздела «Преглед» на новото ръководство

това ще отвори нов предварително зададен прозорец — можете да запазите, качите и създавате оформление на водачите, за да го използвате отново и отново, проверете или извадете маркировките от колони или струни в зависимост от вашите нужди. Препоръчвам ви да инсталирате квадратчето » Преглед» \u003d Разстоянието между генерираните ръководства GUCHTER \u003d разстоянието между маржа \u003d водачите \u003d задава желаните полета за вашите дизайни, можете да въведете стойност за горната, наляво, отдолу и надясно

можете също да изберете централните колони и ясни съществуващи ръководства.

Това за Photoshop CC 2015.5

Дейвид

    Избирам photoshop → Настройки → Ръководства, мрежа и фрагменти.

    Определете мрежата по желание

    Избирам преглед → Покажи → Мрежа; след това добавки.

    Разгледайте

    преглед → Свързване към мрежата; след това щракване.

    Включете прозореца Пътеки, Ако все още не е видима. Създайте нов начин, наречен Хоризонтално.

    Използвайте инструмента перо (P). Определя хоризонталния сегмент в горната част на окото. Един кликнете първо отляво, след това надясно.

    Използвайте инструмента избор на пътя

    Създайте друг нов път вертикален.

    Използвайте инструмента перо (P). Определете вертикалния сегмент на мрежата от лявата страна. Едно кликване първо отгоре, след това по-долу.

    Използвайте инструмента избор на пътя (A, Black arrow). Кликнете върху пътя, като задържите бутона «ALT», за да направите копия на обекта.

    Създайте нов слой за мрежата (по избор). В противен случай мрежата ще бъде изтеглена на всеки активен слой.

    Прозорец палети → Изберете хоризонтален Тогава изберете път на инсулт (Използване на цвета на преден план) към подменюто параметър (кликнете върху малкия триъгълник с три реда в горния десен ъгъл на прозореца на палитрата), изберете четка или молив.

    Повторете предишната стъпка към кръга вертикален начин.

Евън Каррек

Това е огромна работа, за да го направите така.

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

активиране на мрежата (дисплей) В падащото меню изберете Изглед -\u003e Шоу -\u003e Мрежа (изглед-\u003e Показване -\u003e Решетка). Или ключ за клавиатурата Ctrl + E.. По същия начин можете незабавно да изключите мрежата.

По подразбиране решетката е изградена от линии, разстоянието между което 2 cm (стъпка стъпка) и в същото време това разстояние е разделено на 4 части по точки. Тези настройки, разбира се, могат да бъдат променени. В менюто изберете

Редактиране -\u003e Настройки -\u003e Ръководства, решетки и фрагменти (редактиране -\u003e Предпочитания -\u003e Ръководства, мрежа и резени). Или ключ за клавиатурата Ctrl + K и Ctrl + 8.

В третия блок Решетка (решетка) Променете стойностите на полетата до необходимото. И уеб дизайнерите все още трябва да се напомнят, че е най-добре да се използват пиксели като единици за измерване.

Да се активиране на автоматичното обвързване на обекта към мрежовите линии Отметка Изглед -\u003e BIND -\u003e Мрежови линии (изглед -\u003e Snap to -\u003e grid).

Има инструмент, с който да редактирате графиките ще бъде много по-лесно. Това е решетка. Той помага при създаването на изображения и сгъваеми колажи.

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

Решетката ви помага по-точно и симетрично подредете елементи в състава

По същество това са ръководни линии. Гладка маса. Той е насложен на върха на изображението, но не го припокрива. По-лесно е да се изчислят пропорциите с него, да видите симетрията, правилно поставете отделни елементи.

Като аналогия, ние даваме на училищния лаптоп в клетката. Тя е построена графики и боядисани геометрични форми. На такъв лист е възможно да се начертае направо без владетел, да се постави ъгъл от 45 или 90 градуса, без да се използва транспортът. Определя се на него, коя дължина на правоъгълника и колко клетки съставляват своята област. В Photoshop таблицата е същата функции.

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

Не бъркайте ИТ и пиксела. Последното е да се раздели картината в точката. Той е полезен за подробно редактиране. Тя може да бъде активирана и конфигурирана.

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

Как да го включите?

  1. Отворете графичен файл. Или създайте нов.
  2. В лентата с менюта кликнете върху бутона «Преглед» («Изглед»). Обикновено се намира между «3D» и «прозорец».
  3. Мишка към «показване» («шоу»).
  4. В падащото меню кликнете върху «Grid» («Grid»). Тя ще се появи на слоя.
  5. Можете също да натиснете клавишите Ctrl + ‘(в руския формиране Ctrl + E).

Как да настроите?

Можете да направите друг размер на клетката (например, така че те визуално да определят сегмент от 1 сантиметър дълъг), да изберете типа или цвета на линиите.

  1. Отворете менюто за редактиране на горния панел.
  2. Задръжте мишката към мястото на инсталиране. Той е в долната част на списъка.
  3. Кликнете върху «Ръководства, мрежа и фрагменти».
  4. В прозореца, който се отваря, задайте желания размер на клетката. Това може да се направи в полето «линия през всяко …». На разположение различни единици Измервания: инчове, милиметри, елементи и т.н.
  5. В секцията «стил» посочете как трябва да се покаже мрежата: твърда ивица, пунктирана или точки. Това не е толкова важно, тъй като маркучът ще бъде видим само при редактиране на модела.
  6. В параграфа «Цвят» изберете изливането. Настройката може да се използва, когато масата се слива с фона.

Как да премахнете?

Можете да се отървете от клетките в същото меню, през което са добавени. Ето как да премахнете мрежата в Photoshop:

  1. Отидете на преглед — покажете.
  2. Отстранете квадратчето от съответния елемент.
  3. Или използвайте комбинацията ctrl + e.

Пиксел решетка

Пикселната решетка е забележима само в близост. За да го видите, трябва да увеличите картината и да промените скалата. Но когато работите с графики, тя може да попречи. Ето как да го вмъкнете или премахнете:

  1. Отворете менюто Изглед — Покажи.
  2. Кликнете върху «Pixel Grid».

Владетели

Друг метод за измерване в Photoshop — владетел. Те са извън чертежа. С този инструмент можете да оцените дължината и ширината на обектите и изображението като цяло. Можете да активирате линията в менюто Изглед. За да изберете техните параметри, отидете на Редактиране — Настройки — Единици на измерване и владетел.

Таблицата е полезна при рисуване на схеми. Или за всяка друга работа, в която се изисква точност. Но този инструмент ще бъде полезен и извън професионалната сфера. В крайна сметка, по време на рисуване на много «преструване на окото». Ако включите маркирането, ще бъде възможно да го навигирате. И накрая се оказва проверено, работещо и красиво чертеж.

Днес ще говорим за какво линия, водачи и мрежа в Photoshop. Всички тези инструменти помагат ни да подравняваме обектите спрямо един друг върху платно.

За да започнете да създавате ръководства в Photoshop., необходимо е включете владетеля. Отиваме в елемента от менюто «Преглед -\u003e владетели» или натиснете клавиатурата «Ctrl + R».

Отгоре и отляво, ние се появяваме владетел с разделения. Конфигурирана е маркировка в правилата. За да направите това, просто кликнете с десния бутон на мишката върху владетеля.

Сега нека да погледнем как да създадем ръководства. Те са два вида: вертикални и хоризонтални. За да създадете ръководство просто, когато инструментът «Move» е активиран, издърпайте левия бутон на мишката надолу или надясно. Водачите могат да бъдат създадени без ограничение.

Също така можете да създавате чрез «Изглед -\u003e Ново ръководство» през менюто.

Появява се нов прозорец, в който достатъчно определяме ориентацията на линията и позицията по отношение на горната или долната граница на изображението. След като кликнете върху «OK», на снимката се появява ново ръководство.

Също така, ръководството може да бъде променено ориентация с хоризонтално до вертикално и обратно. За да направите това, просто кликнете върху него с ALT PIN на клавиатурата.

Сега нека погледнем как да премахнем водачите. Можете да ги премахнете или за известно време или напълно. За да деактивирате временно дисплея или обратно, натиснете клавишната комбинация «Ctrl +». За да ги премахнете напълно отидете в елемента от менюто «Изглед -\u003e Премахване на водачите».

Помислете за още две точки, от които се нуждаем. Първо — «Изглед -\u003e Затегнете водачите» или клавишите на клавиатурата «ALT + CTRL +;». Този елемент ви позволява да забраните движещите се линии. Второто е «обвързващо». За да го активирате, трябва да отидете в менюто «View -\u003e Bind». Тази позиция е отговорна за залепване на изображението на водачите или ръководствата към изображението. Например, вие водите слой в ръководството и веднага щом той се приближава възможно най-близо, ще се появят ръбът на изображението. По същия начин, когато насочвате ръководството, той ще се придържа към ръба на картината възможно най-близо до възможно най-близо.

Сега нека да отидем малко по настройки. Можете да отидете при тях, ако изберете елемента от менюто «Редактиране -\u003e Настройки -\u003e Водачи, мрежа и фрагменти» или щракнете върху два пъти левия бутон на мишката по самото ръководство. Отваря се прозорец, в който можем да настроим цвета и стила на нашите линии.

Ние продължаваме и на опашката имаме бързи ръководства, са временни линии, които служат за подравняване на обектите. Те помагат да се постави обект спрямо съществуващите обекти или цялото платно. Можете да ги активирате чрез елемента от менюто «Изглед -\u003e Показване -\u003e Бързо ръководства.»

Ако започнем да затваряме някакъв слой и да го позиционираме спрямо нещо, тогава ще имаме специални линии, които ще ни помогнат да поставят слоеве един с друг.

След това нека погледнем инструмента «Grid». Можете да го активирате в менюто «View -\u003e show -\u003e mesh» или комбинацията «Ctrl +». Можете също така да го конфигурирате в раздела за редактиране -\u003e Настройки -\u003e водачи, мрежа и фрагменти. Можете да конфигурирате пропастта чрез които те ще вървят основните линии, както и как да споделят тези интервали.

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

Ако имате някакви въпроси, можете да гледате видео урок по тази тема.

Видео урок:

Помислете за помощни инструменти, които се използват за създаване и редактиране на изображения в програмата. Адобе Фотошоп. CS5. Това са владетел, водачи и решетки.

Владетели в Photoshop.

Правилата могат да се видят отляво и в горната част на границите на изображението. Включва и изключва правилата, като използвате менюто Преглед — линия.

Устройствата за измерване на уреда могат да бъдат променяни в настройките. За промяна, влезте Редактор — Настройки — единици за измерване и владетел, И изберете това, от което се нуждаете в горната точка.

Референтната точка по подразбиране е горният ъгъл. Можете да промените референтната точка, ако кликнете върху мястото на пресичане на линиите левия бутон на мишката и плъзнете до чертежа. На това място, където координатите планират. След това пуснете бутона на мишката.

За да върнете посоката на мястото, правите двойно кликване на мястото на пресичане.

Ръководства в Photoshop.

Ръководствата са линиите, към които могат да бъдат вързани някои обекти и разпределения. За да създадете ръководства, натиснете левия бутон на мишката върху линията и без освобождаване, издърпайте натисканата снимка. Появява се ръководство, което ще бъде успоредно на този състав. С помощта на Linek можете да позиционирате точно ръководствата на фигурата, при предварително определено разстояние от ръба.

Например, искате да разпределите кръг или овален обект. За да направите това, направете четири ръководства: два хоризонтални и две вертикални, за да ги ограничите желания обект. След това изберете инструмента Овална област И диагонално от първото пресичане на ръководствата към второто пресичане, направете разпределението. Изборът ще се придържа точно към водачите.

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

За да преместите съществуващото ръководство, натиснете и задръжте ключа Ctrl. И преместете ръководството за ново място. Можете също да използвате инструмента. Ход.

Когато инсталирате ръководства в Photoshop, за да ги поставите по-точно, използвайте увеличение в мащаба.

Подлежането на обекти и селекция към водачите може да бъде деактивирано или да позволи използването на менюто Преглед — свързване. Можете също да изберете различни обвързващи елементи, като изберете Преглед — опашка до. Тази точка може да бъде вързана за водачите, линиите на мрежата, слоевете, границите на документа.

За да премахнете ръководства, елате в менюто Преглед — Премахнете ръководствата. Можете също да извадите ръководствата, като плъзнете отвъд изображението.

В допълнение, може да се създаде ново ръководство в Photoshop чрез менюто Изглед — Ново ръководство. При създаването на диалогов прозорец се появява диалогов прозорец, в който изберете ориентацията на ръководството и позицията. Този метод е добър, когато знаете точно къде трябва да бъде водачът.

Можете също да промените ориентацията на ръководството, с вертикален до хоризонтален или обратно. За да направите това, натиснете и задръжте ключа Alt, След това кликнете върху ръководството на мястото, където се предполага, че въртенето му от 90 градуса.

Мрежа в Photoshop.

Решетката е друг полезен инструмент в Photoshop, за да създаде колаж, монтаж и за други случаи, когато е необходимо точното местоположение на обектите.

За да се появи решетката, изберете в менюто Изглед — Покажи — Решетка. Размерът на мрежата се регулира в настройките. adobe програми Photoshop CS5. Да отидете в настройките. Изберете в менюто Редактиране — инсталации — водачи, решетка и фрагменти. Можете да посочите в настройките. Колко често решетките ще бъдат поставени с елементи Всеки път и вътрешен отдел, които регулират честотата на основните и спомагателните линии на мрежата.

Сега, ако дръпнете ръководството от владетеля, той автоматично ще се придържа към решетките. Ако създадете селекция, той също ще се придържа към линиите и възлите на мрежата. Обвързването може да бъде деактивирано с помощта на менюто Преглед — линии за мрежи.

За да извадите решетката, влезте Изглед — Покажи, и премахнете отметка от точката Мрежа.

Модульная сетка в Photoshop

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

Чтобы в окне программы появились линейки, нужно выполнить команды: Просмотр — Линейки (Ctrl + R). В скобках указаны сочетания клавиш, дублирующих эту команду. Линейки могут быть проградуированы в различных единицах: пикс., см, мм, дюйм… Чтобы настроить единицы, открываем окно настроек: Редактирование — Установки — Единицы измерения и линейки

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

При создании макета web-страницы лучше всего размеры измерять в пикселях.

Теперь о модульной сетке в Photoshop. Чтобы ее показать, выполним команды: Просмотр — Показать  — Сетку (Ctrl + ‘).

Шаг сетки можно настраивать: Редактирование — Установки — Направляющие, Сетка и Фрагменты

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

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

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

Чтобы вернуть начало координат в исходную точку, сделайте двойной щелчок в этом же квадратике.

Теперь вы можете использовать модульную сетку в Photoshop  в своей работе над макетом сайта.

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

Bubble Sky

Пузырчатое небо ждет вас в новой Bubble Sky. Да, это красиво, но все же не так уж практично. Все эти пузырики мешают свету падать на землю, что затрудняет жизнь людей днем. Вам нужно будет постараться избавиться от всех пузырей. Как? Просто стреляйте шариком так, чтобы соприкоснулось три или более шариков. Лишь после этого они смогут лопнуть. Очистим небо, вперед!

Как да премахнете мрежата в Photoshop CS5. Създаване на ефект на наслагване на окото

За да направите мрежата ( Мрежа. ) Видим, необходимо е да се включи. Първо! Преглед\u003e Екстри. , тогава Преглед\u003e Покажи\u003e Решетка .

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

Самата мрежа е солидни тъмни линии. Пунктираните линии са само спомагателни елементи ( Подразделения ).

Настройка на мрежата (GRID)

Може би ще имате нужда да регулирате решетката за себе си. Много е просто да го направя. За да направите това, отидете в менюто Редактиране\u003e Предпочитания\u003e Ръководства, Grid & Slices . ..

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

Опашка (щракване) към мрежата (решетка)

Функция Впечатление (Привързани към мрежата) е много полезно за потребителя. Тя позволява на потребителите да се подравнят много просто да подравнят слоевете, цифрите, текста и др. по отношение на мрежата. В дейността на тази функция елементите автоматично се подравняват по отношение на най-близките елементи на мрежата ( Мрежа. ). За да се даде възможност тази функция, първо трябва да изберете Преглед\u003e Snap. , и тогава Преглед\u003e Snap to\u003e grid .

UPD: Също така включва и деактивирайте режима на свързване, докато плъзнете елемента на изображението, можете да натиснете и пуснете ключа Ctrl. .

При създаването на оформление на сайта е важно да се поставят точно неговите елементи един спрямо друг. За да направите това, е удобно да се използва спомагателен: използването на модулна решетка, линии и водачи. В тази статия разгледайте използването на линии и модулна решетка в Photoshop.

За да се появи в прозореца на програмата, трябва да изпълните команди: Изглед — Руин (Ctrl + R). В скоби са комбинациите от клавиши, които дублират тази команда. Правилата могат да бъдат завършени в различни единици: PIX., Cm, mm, inch … за настройка на единици, отворете прозореца Настройки: Редактиране — Настройки — Единици на измерване и линия

Но е много по-удобно да го направите по друг начин. Просто трябва да щракнете с десния бутон върху (PCM) на линията и да изберете желаните единици от контекстното меню.

При създаването на оформление на уеб страница, размерът на размера се измерва най-добре в пикселите.

Сега за модулната решетка в Photoshop. За да го покажете, изпълнете команди: Изглед — Покажи — Мрежа (Ctrl + ‘).

Стъпка на решетката може да бъде конфигурирана: Редактиране — Настройки — ръководства, мрежа и фрагменти

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

Друг малък, но много удобна функция Photoshop програми. Ако работите с решетка и рисувате правоъгълни форми, тогава курсорът изглежда «залепва» към решетките. Това дава възможност да се правят блокове с точни размери. Въпреки това, това свързване може да бъде деактивирано:

И още една финес. По подразбиране произходът на координатата е в горния ляв ъгъл на листа. Но можем да го преместим до нито една от нас. За да направите това, поставете показалеца на мишката към квадрата, в който са свързани правилата и го плъзнете в желаната точка.

Да върне произхода на координатите в точка на източникаНаправете двойно кликване на същия квадрат.

Сега можете да използвате модулна решетка В Photoshop в работата си на оформлението на сайта.

И как да накарате сайта да носи доход, можете да разберете чрез присъединяване.

Bubble Sky.

Балонното небе ви очаква в новото небе на балон. Да, това е красиво, но все още не е толкова практично. Всички тези мехурчета пречат на светлината падат на земята, което кара хората да живеят трудни за следобед. Ще трябва да се опитате да се отървете от всички мехурчета. Как? Просто застреляйте топката, така че трима или повече топки влизат в контакт. Само след това те ще могат да се пръснат. Почистете небето, продължете напред!

Photoshop има редица инструменти, които служат за точно позициониране на елементите на изображението в документа. Например, за да поставите всеки елемент точно в средата, използван и.

Но как да бъдеш кога, да кажем, трябва да направите вдлъбнатина от горния ръб на 50 пиксела? Или какво да правите, когато публикувате 10 елемента на документа и всеки от тях трябва да бъде позициониран един спрямо друг на точно определените разстояния? За да разрешите такива проблеми, свържете се с инструментите за позициониране: владетел, решетка и ръководства.

Правилата са две везни: една по-горе, а другата с лявата част на нея. На линията се прилагат разделенията на избраната единица за измерване. Да, просто говорейки, това е като училищна линия, която всички ние прилагаме за листа хартия.

Да се включете дисплея на Linecas в Photoshop, Изпълнете командата:

Изглед — Руин или горещ ключ Ctrl + R..

Единица за измерване по подразбиране — пиксели. Но може да се промени. Възможен следните методи как да го направим:

Метод 1.

Кликнете с десния бутон върху скалата на линията. Контекстното меню ще се появи с всички измервателни единици, достъпни в Photoshop: пиксели, инчове, сантиметри, милиметри, точки, върхове и интерес.

Метод 2.

За да промените измервателните единици по подразбиране, трябва да отидете на следните настройки на Photoshop: Редактиране — Настройки — Единици на измерване и линия. В прозореца, който се отваря, на върха има елемент Единиции в него Владетели.

Изберете желания елемент от падащия списък и запазете. Сега Photoshop ще използва точно тази мярка по подразбиране.

Линията има началото на справка — 0. По подразбиране това е горният ляв ъгъл на документа. Но тя може да бъде променена чрез определяне на началото на скалата на всяко друго място. За да направите това, направете кликване в точката на пресичане на две линии, след това, без да освободите бутона на мишката, издърпайте отстрани. Ще видите crosshair. Поставете центъра си на мястото, където началото на референцията има владетел.

Забележка

Да върнете линията в първоначална позиция, Направете двойно кликване в пресичането на две линии.

Ръководства в Photoshop.

Сега, когато се появи правилата, можете да създавате водачи.

Ръководства — Това са сини вертикални и хоризонтални линии, помагащи да се създаде маркиране в документа Photoshop.

Водачите принадлежат към спомагателните елементи, така че те няма да се видят, когато запазвате изображението. Но те остават в PSD формат.

Ръководствата притежават ефекта на залепване, т.е. когато преместите всеки елемент на изображението по-близо до ръководството, ще се почувствате като този елемент внезапно лепило към линията. Той е много полезен при позициониране. В този случай вие сте сигурни, че е поставен пикселният елемент в пиксела с ръководството.

Забележка

Ефектът на адхезия в Photoshop се нарича Обвързващ. Включва се и се изключва в менюто Преглед — свързване. Уверете се, че кърлежът стоеше.

Оттук следва и всички тактики на употреба: Първо трябва да инсталирате точно ръководството на негово място. За да направите това, използвайте скалата на линията, ако трябва да измерите желаното разстояние. След това, когато всичко е на място, плъзнете елемента на изображението в ръководството и ще се придържате към тази линия. Всичко това е позиционирано!

Как да създадете ръководства в Photoshop

Първо трябва да се уверите, че дисплеят на водачите е включен. За да направите това, уверете се, че в менюто Стоеше кърлежи. И трябва да се активират правилата.

Сега трябва да ги създадете. Има два начина за различен начин на живот:

Метод 1 произволни ръководства

Този метод е подходящ, когато трябва бързо да създадете линия и да я инсталирате на произволно място.

За да направите това, направете кликване на мишката върху мащаба на владетеля:

  • за хоризонталната линия — на горния ред;
  • за вертикалната линия — не лявата линия.

След това, без да се освобождавате бутона на мишката, дръпнете ръката към документа. Тогава заедно с движението ви ще се измъкне, докато все още тъмно, линия ръководство. След това го инсталирайте на правилното място и ще стане син.

Както виждате, той пресича мащаба на линията, което означава, че няма да е трудно да се изчисли разстоянието и да поставите ръководството на желаното място.

Метод 2 с индикация, при която трябва да се появи водачът

Чрез менюто Изглед — Ново ръководство Отваря се диалогов прозорец. В което трябва да посочите в коя равнина е създадена (хоризонтална или вертикална), както и полето, към което искате да въведете стойността на желаната позиция. Например, имате нужда от хоризонтално ръководство, което се появява в 100 пиксела от горния край на изображението.

Как да промените позицията на ръководството

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

Между другото, водачите могат да бъдат консолидирани, т.е. да се предпазят от случайно смяна. За да направите това Проверете менюто Преглед — Сигурни ръководства.

Как да премахнете / премахнете ръководства

Метод 1 се движи по скалата на линията

Този метод повтаря процеса на създаване на ръководство. Само така, че да изчезне, трябва да го плъзнете обратно в областта на скалата на линията.

Този метод е идеален за случаи, когато не всички от набор водачи трябва да бъдат премахнати, но само някои.

Метод 2 Команда за меню

Чрез менюто на програмата: Преглед — Изтрий ръководства. В този случай всички създадени линии ще изчезнат.

Метод 3 Изключване на дисплея

Ако трябва временно да извадите ръководствата, така че да не се намесват, след това премахнете кърлежите в екипа Преглед — спомагателни елементи Или използвайте гореща комбинация Ctrl + H.

Всички линии ще изчезнат, но ако трябва да ги покажете отново, след това върнете отметката назад, а след това всички водачи ще се появят отново на нашите места и можете да продължите да работите с тях.

Маркиране на маркировка в Photoshop

Не забравяйте как изглежда тетрадката в клетка. Същата решетка може да бъде поставена върху документа в Photoshop. За да направите това, изпълнете командата:

Изглед — Покажи — Мрежа

Настройката на мрежата се извършва в инсталациите на Photoshop: Редактиране — Настройки — ръководства, мрежа и фрагменти.

Можете да посочите кои ширини ще бъдат основните (големи) клетки и от това количество допълнителни вътрешни дивизии ще се състоят. Например, имам основни клетки от 2 сантиметра и са разделени допълнително на 4 по-малки. Така всяка малка клетка е 0,5 сантиметра.

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

Забелязал е грешката в текста — изберете го и натиснете Ctrl + Enter. Благодаря ти!

Има инструмент, с който да редактирате графиките ще бъде много по-лесно. Това е решетка. Той помага при създаването на изображения и сгъваеми колажи. Тя може да бъде оценена с размера и разстоянието, оценете как обектите ще бъдат разположени един спрямо друг, направете маркуч. Навигирайте къде да поставите една или друга снимка. Това е полезен инструмент, ако можете да ги използвате. Научете се как да активирате мрежата в Photoshop, как да конфигурирате атрибутите си и как да го премахнете.

Решетката ви помага по-точно и симетрично подредете елементи в състава

По същество това са ръководни линии. Гладка маса. Той е насложен на върха на изображението, но не го припокрива. По-лесно е да се изчислят пропорциите с него, да видите симетрията, правилно поставете отделни елементи.

Като аналогия, ние даваме на училищния лаптоп в клетката. Тя е построена графики и боядисани геометрични форми. На такъв лист е възможно да се начертае направо без владетел, да се постави ъгъл от 45 или 90 градуса, без да се използва транспортът. Определя се на него, коя дължина на правоъгълника и колко клетки съставляват своята област. В Photoshop таблицата е същата функции.

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

Не бъркайте ИТ и пиксела. Последното е да се раздели картината в точката. Той е полезен за подробно редактиране. Тя може да бъде активирана и конфигурирана.

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

Как да го включите?

  1. Отворете всеки графичен файл или създайте нов.
  2. В лентата с менюта кликнете върху бутона «Преглед» («Изглед»). Обикновено се намира между «3D» и «прозорец».
  3. Мишка към «показване» («шоу»).
  4. В падащото меню кликнете върху «Grid» («Grid»). Тя ще се появи на слоя.
  5. Можете също да натиснете клавишите Ctrl + ‘(в руския формиране Ctrl + E).

Как да настроите?

Можете да направите друг размер на клетката (например, така че те визуално да определят сегмент от 1 сантиметър дълъг), да изберете типа или цвета на линиите.

  1. Отворете менюто за редактиране на горния панел.
  2. Задръжте мишката към мястото на инсталиране. Той е в долната част на списъка.
  3. Кликнете върху «Ръководства, мрежа и фрагменти».
  4. В прозореца, който се отваря, задайте желания размер на клетката. Това може да се направи в полето «линия през всяко …». На разположение различни единици Измервания: инчове, милиметри, елементи и т.н.
  5. В секцията «стил» посочете как трябва да се покаже мрежата: твърда ивица, пунктирана или точки. Това не е толкова важно, тъй като маркучът ще бъде видим само при редактиране на модела.
  6. В параграфа «Цвят» изберете изливането. Настройката може да се използва, когато масата се слива с фона.

Как да премахнете?

Можете да се отървете от клетките в същото меню, през което са добавени. Ето как да премахнете мрежата в Photoshop:

  1. Отидете на преглед — покажете.
  2. Отстранете квадратчето от съответния елемент.
  3. Или използвайте комбинацията ctrl + e.

Пиксел решетка

Пикселната решетка е забележима само в близост. За да го видите, трябва да увеличите картината и да промените скалата. Но когато работите с графики, тя може да попречи. Ето как да го вмъкнете или премахнете:

  1. Отворете менюто Изглед — Покажи.
  2. Кликнете върху «Pixel Grid».

Владетели

Друг метод за измерване в Photoshop — владетел. Те са извън чертежа. С този инструмент можете да оцените дължината и ширината на обектите и изображението като цяло. Можете да активирате линията в менюто Изглед. За да изберете техните параметри, отидете на Редактиране — Настройки — Единици на измерване и владетел.

Таблицата е полезна при рисуване на схеми. Или за всяка друга работа, в която се изисква точност. Но този инструмент ще бъде полезен и извън професионалната сфера. В крайна сметка, по време на рисуване на много «преструване на окото». Ако включите маркирането, ще бъде възможно да го навигирате. И накрая се оказва проверено, работещо и красиво чертеж.

Помислете за спомагателни инструменти, които се използват за създаване и редактиране на изображения в Adobe Photoshop CS5. Това са владетел, водачи и решетки.

Владетели в Photoshop.

Правилата могат да се видят отляво и в горната част на границите на изображението. Включва и изключва правилата, като използвате менюто Преглед — линия.

Устройствата за измерване на уреда могат да бъдат променяни в настройките. За промяна, влезте Редактор — Настройки — единици за измерване и владетел, И изберете това, от което се нуждаете в горната точка.

Референтната точка по подразбиране е горният ъгъл. Можете да промените референтната точка, ако кликнете върху мястото на пресичане на линиите левия бутон на мишката и плъзнете до чертежа. На това място, където координатите планират. След това пуснете бутона на мишката.

За да върнете посоката на мястото, правите двойно кликване на мястото на пресичане.

Ръководства в Photoshop.

Ръководствата са линиите, към които могат да бъдат вързани някои обекти и разпределения. За да създадете ръководства, натиснете левия бутон на мишката върху линията и без освобождаване, издърпайте натисканата снимка. Появява се ръководство, което ще бъде успоредно на този състав. С помощта на Linek можете да позиционирате точно ръководствата на фигурата, при предварително определено разстояние от ръба.

Например, искате да разпределите кръг или овален обект. За да направите това, направете четири ръководства: два хоризонтални и две вертикални, за да ги ограничите желания обект. След това изберете инструмента Овална област И диагонално от първото пресичане на ръководствата към второто пресичане, направете разпределението. Изборът ще се придържа точно към водачите.

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

За да преместите съществуващото ръководство, натиснете и задръжте ключа Ctrl. И преместете ръководството за ново място. Можете също да използвате инструмента. Ход.

Когато инсталирате ръководства в Photoshop, за да ги поставите по-точно, използвайте увеличение в мащаба.

Подлежането на обекти и селекция към водачите може да бъде деактивирано или да позволи използването на менюто Преглед — свързване. Можете също да изберете различни обвързващи елементи, като изберете Преглед — опашка до. Тази точка може да бъде вързана за водачите, линиите на мрежата, слоевете, границите на документа.

За да премахнете ръководства, елате в менюто Преглед — Премахнете ръководствата. Можете също да извадите ръководствата, като плъзнете отвъд изображението.

В допълнение, може да се създаде ново ръководство в Photoshop чрез менюто Изглед — Ново ръководство. При създаването на диалогов прозорец се появява диалогов прозорец, в който изберете ориентацията на ръководството и позицията. Този метод е добър, когато знаете точно къде трябва да бъде водачът.

Можете също да промените ориентацията на ръководството, с вертикален до хоризонтален или обратно. За да направите това, натиснете и задръжте ключа Alt, След това кликнете върху ръководството на мястото, където се предполага, че въртенето му от 90 градуса.

Мрежа в Photoshop.

Грид — друг полезен инструмент В Photoshop за създаване на колаж, инсталация и за други случаи, когато е необходимо точното местоположение на обектите.

За да се появи решетката, изберете в менюто Изглед — Покажи — Решетка. Размерът на мрежата се регулира в настройките. adobe програми Photoshop CS5. Да отидете в настройките. Изберете в менюто Редактиране — инсталации — водачи, решетка и фрагменти. Можете да посочите в настройките. Колко често решетките ще бъдат поставени с елементи Линия чрез всяко и вътрешно разделение, които регулират честотата на основните и спомагателните линии на мрежата.

Сега, ако дръпнете ръководството от владетеля, той автоматично ще се придържа към решетките. Ако създадете селекция, той също ще се придържа към линиите и възлите на мрежата. Обвързването може да бъде деактивирано с помощта на менюто Преглед — линии за мрежи.

За да извадите решетката, влезте Изглед — Покажи, и премахнете отметка от точката Мрежа.

Как создать изометрическую и перспективную сетки в фотошопе | EnottiaART

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

Изометрическая сетка

Изометрия- это перспектива, в которой не учитывается точка схода.

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

пример использования изометрической сетки

пример использования изометрической сетки

источник: https://www. artstation.com/artwork/xJ6k4R

источник: https://www.artstation.com/artwork/xJ6k4R

Берем инструмент кисть нужной толщины.

Проводим на листе горизонтальную линию. Для этого просто нужно провести её, одновременно зажав клавишу Shift

первая линия

первая линия

Выделяем холст и далее копировать-вставить-сдвинуть немного вверху. Т.е. Сtrl C+Ctrl V сдвинуть Ctrl V сдвинуть Ctrl V сдвинуть. Таким образом у вас появится множество слоёв, на которых есть одна ваша линия. А на холсте множество беспорядочно расположенных линий.

разместили полосы

разместили полосы

Далее выделяем все слои с линиями. С включенным инструментом «перемещение» и выбираем сверху пункт» Распределение центров по вертикали». Таким образом все линии станут равноудалены друг от друга.

равноудаленные полосы

равноудаленные полосы

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

сливаем слои

сливаем слои

Выделяем получившийся слой, копируем, вставляем, выделяем при помощи сочетания клавиш Ctrl T, а затем переворачиваем с зажатым shift. Таким образом получаем клетку.

клетка

клетка

Объединяем слои, Ctrl T и поворот с зажатым shift на 90 градусов.

поворот на 90

поворот на 90

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

плющим

плющим

готовая сетка

готовая сетка

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

ситуация с неравным углом

ситуация с неравным углом

Перспективная сетка

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

Выбираем инструмент многоугольник.

Далее заходим в параметр шестеренка, ставим галочку на против пункта «звезда» и плотность 99%. Справа выставляем количество строк-100.

После всех этих махинаций вы сможете создавать фигуру, которая выглядит так:

А потом делаете нечто вот такое

и даже такое

К этому делу еще нужно приноровиться, так что способ одновременно и читерский и сложный, но с ним вы сможете построить перспективную сетку в 1-2-3 точки схода. Юху!

Пример использования:

если присмотреться, то можно разглядеть ту самую сетку

если присмотреться, то можно разглядеть ту самую сетку

источник: https://www. artstation.com/artwork/58Qd2O

источник: https://www.artstation.com/artwork/58Qd2O

Создаем дизайн веб-страницы с помощью 960 Grid

В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System. Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:

Начнем с создания нового документа в Photoshop, шириной 1680 px и высотой 1100 px. Фон заливаем светло-серым цветом (# F9F9F9).

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

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

Для начала скачайте 960 grid system. После этого распакуйте 960 Grid System Натана

Смита в папку с шаблонами. Открываем 12 столбцовый макет 960 grid в Adobe Photoshop:

Теперь нам нужно создать базовую сетку. Базовая сетка поможет с промежутками между элементами и высотой линий. Создадим новый документ 24 на 24 пикселя, удалим фон, нарисуем линию, толщиной 1 px в нижней части документа.

Мы определим этот документ как шаблон: Edit > Define Pattern и присвоим ему запоминающееся название:

Далее возвращаетесь к нашему документу и создаете новый слой. Заполняете этот слой шаблоном, Edit> Fill. Так мы создадим базовую сетку:

И наконец, мы выделим нашу рабочую область, используя направляющие. Создаем новую направляющую View > New Guide, выбираем вертикальный тип и создаем направляющие в точках 360px, 840px и 1320px.

Мы выбрали именно эти точки, потому как при ширине рабочей области в 960px, между точками 360px и 1320px — центральная 840px.

Если вы работаете напрямую из файла 960 Template, направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides:

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

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

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

Мы разделим страницу на пять секций:

  1. Header;
  2. Callout;
  3. Content – Left;
  4. Content – Right;
  5. Footer.

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

С помощью Rectangular Marquee Tool выбираем область шириной во весь документ и высотой в 120px — вам могут помочь направляющие или же тяните за край прямоугольного выделения до тех пор, пока не заполните пять горизонтальных маркеров, затем заливайте выделенную область серым цветом (#2C2C2C).

Эта область будет использоваться под лого и панель меню:

Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px. Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic.

Первое слово — залито светло-голубым (#ADC7D9), второе выделено жирным и залито белым (#FFFFFF). Далее применяем внутреннюю тень к элементам лого.

Я уменьшил внутреннюю непрозрачность до 25%, поставил значения Distance равное 2px , Choke равное 0% и Size — 5px:

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

Цвет активной ссылки, которая, в нашем случае, Home, имеет белый цвет (#FFFFFF), а остальные заполняем серым (#BBBBBB). Совмещаем эти элементы и помещаем их в центре верхней части заголовка:

Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает — выкладывает информацию о странице.

Повторим действия на примере тех, что выполнили, создавая заголовок. С помощью инструмента Rectangular Marquee, выбирая высоту, равную 240px и заполняя голубым цветом (#ADC7D9), как и лого, делаем прямоугольник.

Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay. Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay, уменьшаем opacity до 30%:

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

Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.

Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern:

Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill:

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

Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.

Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete. Эти действия уберут всю сетку, которая не находится в области блока callout:

Следующее, что мы должны сделать — убедиться в том, что решетчатый участок распространяется только на область рабочей зоны шириной в 960px. Используйте View > Show > Guides, затем добавьте маску слоя к решетчатому слою:

Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G), выберите градиент от черного к прозрачному.

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

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

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

Область callout необходимо наполнить контентом, который будет выполнен шрифтом Arial 45pt (#2C2C2C) и выделить необходимые слова жирным.

Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:

Берите в руки Rectangular Marquee Tool и растягивайте прямоугольник между крайними правыми и средними направляющими, ставьте высоту в 8 линий, оставляя 1 линию вверху и 1 линию внизу, и заливайте темно-серым цветом (#2C2C2C).

Это фон к слайдшоу:

Добавьте тень к фону, дважды кликнув на панели Layer style и выбрав drop shadow, изменив цвет на # (2C2C2C) и выбрав Distance равный 1px и size, равный 10px:

Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px, выбрав инверсию, как ранее, далее delete:

Для начала добавим легкий градиент в этой секции. Сначала используйте Rectangular Marquee Tool, чтобы выбрать область для размещения контента, затем — Gradient Tool (G).

Выберите градиент от цвета (# f0f0f0) к прозрачности и перетащите его вниз. Не заходите слишком далеко. Фон у границы нижней части страницы должен вернуться к цвету (# F9F9F9):

Добавьте параграф описания шрифтом Arial 18pt #9C9C9C и со стилем ссылки Underlined #A3BBCC:

Для начала добавьте заголовок шрифтом Arial 25pt Bold #262626, затем добавьте элементы списка шрифтом Arial, цветом # 9C9C9C и величиной в 18 пунктов.

Пункт маркированного списка можно иллюстрировать с помощью Elliptical Marquee Tool или же использовать комбинацию клавиш Alt +7.

Выкрасите все пункты списка в светло-голубой цвет (# A4BCCD) и выровняйте по сетке:

Повторяйте этот шаг для добавления данных:

Наш последний раздел — подвал. Он будет содержать форму для авторизации, контактные данные и несколько ссылок. Начните с выбора нижней секции инструментом Rectangular Marquee Tool и залейте её темно-серым цветом (# 262626):

Добавим форму. Создайте заголовок шрифтом Arial 20pt Bold (#FFFFFF) и поместите в левую часть подвала. Затем с помощью инструмента Rectangular Marquee Tool нарисуйте два прямоугольника, которые будут полями для ввода данных.

Добавьте описания этим полям шрифтом Arial 16pt #9C9C9C:

Добавьте кнопку подтверждения ввода подобным же образом, но используя инструмент Rounded Rectangle Tool(U), затем добавьте Inner shadow к созданным элементам, установите значения параметра opacity в 30%, а size и spread в «0» и distance в 10px.

Добавьте ссылку «восстановить пароль» шрифтом Arial 13pt Underline #A4BDCD:

И наконец. Давайте закончим наш дизайн, добавив информацию о наших контактах. Заголовок исполните шрифтом Arial 20pt Bold (#FFFFFF) и подчеркните его, и ниже добавьте сами контакты шрифтом Arial 16pt #FFFFFF:

Используя сетку и направляющие, проверьте, что все выровнено и сбалансировано. Если нет — подстройте:

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

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

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

РедакцияПеревод статьи «Design a Clean Web Layout with the 960 Grid»

Дизайн на цветна решетка във Photoshop

В този урок за Photoshop ефекти ще научим как да създадем оцветен дизайн на решетката ! Ще използваме водачите и владетелите на Photoshop, за да настроим първоначалното разстояние, а след това няколко рядко използвани инструменти за избор, за да преобразуваме водачите в действителна мрежа. Ще научим как лесно да избираме произволни квадратчета в мрежата и да ги оцветяваме с коригиращи слоеве и режими на смесване и накрая как да оцветяваме и коригираме външния вид на самата мрежа!

Ще използвам Photoshop CS5 през целия урок, но всяка нова версия ще работи.

Ето последния ефект, към който ще работим:

Окончателният дизайн на цветната решетка

Как да създадете дизайн на цветна решетка

Стъпка 1: Създайте нов документ за Photoshop

Нека започнем със създаването на нов документ за мрежата. Отидете до менюто File в лентата с менюта в горната част на екрана и изберете New :

Отворете Файл> Ново.

Това отваря диалоговия прозорец Нов документ на Photoshop. Ще създам документ с квадратна форма, като въвеждам 1000 пиксела както за ширината, така и за височината . Разбира се, можете да въведете каквито и да е размери, от които се нуждаете, но ефектът има тенденция да работи най-добре, ако се придържате към квадратна форма. За този урок ще оставя стойността на резолюцията, зададена на 72 пиксела / инч, което е добре, ако създавате този ефект за мрежата. Ако планирате да отпечатате крайния резултат, ще искате да създадете по-голям документ и да зададете разделителната способност на 240 пиксела / инча или по-висока. Щракнете върху OK, когато сте готови да излезете от диалоговия прозорец. Новият документ ще се появи на вашия екран:

Диалоговият прозорец Нов документ.

Стъпка 2: Показване на линийки

Отидете до менюто View в горната част на екрана и изберете Rulers или натиснете Ctrl + R (Win) / Command + R (Mac), за да включите бързо управляващите с клавишната комбинация:

Отворете Преглед> Линийки.

Стъпка 3: Променете типа измерване на линийката на процент

Това показва владетелите на Photoshop в горната и лявата част на документа. В зависимост от типа на измерване вашите владетели са зададени в предпочитанията на Photoshop, те вероятно показват или пиксели, или инчове. Преместете курсора на мишката върху владетелите, отгоре или вляво, след това щракнете с десния бутон (Win) / Control-щракнете (Mac) вътре в линейките и изберете Процент от списъка. Ще видите как управляващите се променят в процентни увеличения:

Щракнете с десния бутон на мишката (Win) / Control-щракнете (Mac) вътре в линията и изберете Процент от списъка.

Стъпка 4: Издърпайте хоризонтални и вертикални водачи на 10 процента

Причината да обърнем владетелите беше, че лесно да добавим водачи с еднакво разположение към нашия документ, които след това ще станат нашите мрежови линии. Нека първо да добавим вертикални водачи. Щракнете вътре в линията вляво на документа и с натиснат бутон на мишката издърпайте първото ръководство. Използвайте горния владетел, за да поставите водача на знака от 10% (освободете бутона на мишката, за да поставите водача):

Щракнете вътре в левия владетел и издърпайте вертикален водач до знака от 10%.

Направете същото, за да добавите водач на всеки 10% прираст (20%, 30%, 40% и т.н.), чак до знака от 90%. Вашият документ сега трябва да изглежда разделен на 10 еднакво разположени вертикални колони:

Ръководствата разделят документа на 10 вертикални колони.

След това използвайте същите стъпки, за да добавите хоризонтални водачи. Щракнете вътре в горната линейка и с натиснат бутон на мишката издърпайте хоризонтален водач. Използвайте левия владетел, за да поставите водача на знака от 10%. Продължете да влачите хоризонтални водачи на стъпки от 10% (20%, 30%, 40%, точно както преди) до края на 90%. Когато приключите, трябва да имате същия брой хоризонтални и вертикални водачи, които разделят документа нагоре в мрежа от квадратчета:

Ръководствата разделят документа на мрежа от квадратчета.

Когато водачите са на място, натиснете Ctrl + R (Win) / Command + R (Mac) на клавиатурата си, за да скриете владетелите, тъй като ние вече не се нуждаем от тях.

Стъпка 5: Добавете нов празен слой и го наречете «Grid»

Задръжте клавиша Alt (Win) / Option (Mac) и кликнете върху иконата New Layer в долната част на панела Layers:

Задръжте натиснат Alt (Win) / Option (Mac) и щракнете върху иконата New Layer.

Обикновено Photoshop просто ще продължи напред и ще добави нов празен слой, но като задържим Alt (Win) / Option (Mac), когато щракнете върху иконата New Layer, ние му казваме първо да отвори диалоговия прозорец New Layer, който ни дава шанс да назовеш новия слой преди да бъде добавен. Наименувайте слоя «Grid», след което щракнете върху OK:

Име на новия слой «Grid».

Новият празен слой се появява на панела Слоеве над фоновия слой:

Photoshop добавя новия слой и го нарича „Grid“.

Стъпка 6: Създайте селекция от водачите

Разделихме документа си в мрежа с помощта на водачите на Photoshop, но ръководствата са само за визуална справка. Те няма да ни бъдат от реална полза, освен ако по някакъв начин не ги преобразуваме в действителна мрежа, базирана на пиксели, и можем да направим това лесно, като използваме няколко рядко използвани инструмента за подбор на Photoshop — Инструменти за маркиране с един ред и един колона.

Кликнете върху инструмента „Правоъгълна маркировка“ в горната част на панела „Инструменти“ и задръжте бутона на мишката надолу за секунда или две, докато се появи малко меню за излитане, показващо останалите инструменти, вложени отзад, след което изберете Инструмента за един ред редове от Списъкът:

Кликнете и задръжте върху иконата на Rectangular Marquee Tool, след което изберете Инструмента за маркиране с един ред.

Както подсказва името му, Инструментът за маркиране на един ред ще изберете един хоризонтален ред пиксели в документа. За да използваме инструмента, просто трябва да кликнем навсякъде в документа и Photoshop автоматично ще избере пиксела, върху който сме кликнали, както и всеки друг пиксел от този ред отляво надясно. Ще използваме инструмента за преобразуване на хоризонталните линии на решетката в серия от очертания за избор. Първо, преместете курсора директно върху горната хоризонтална линия на решетката (тази, която сте поставили в знака от 10%) и щракнете. По ръководството ще видите контур за избор на дебелина с 1 пиксел:

Щракнете навсякъде на първото хоризонтално ръководство, за да добавите контур за избор около него.

Задръжте клавиша Shift и щракнете върху следващия хоризонтален водач под него. Това ще добави втория контур за избор към документа. Продължете да държите клавиша Shift и да кликнете върху всички хоризонтални водачи, докато се появи контур за избор по всяко от тях. Трябва да видите общо 9 реда за избор. Не забравяйте да задържите клавиша Shift, като натиснете всяко ново ръководство, в противен случай просто ще замените предишния контур за избор с новия:

Задръжте Shift и кликнете върху всеки хоризонтален водач, за да добавите контур за избор около всеки.

Сега трябва да направим същото с вертикалните водачи, което означава, че трябва да преминем към инструмента за маркиране с една колона. Кликнете върху Инструмента за маркиране на един ред в панела „Инструменти“ (ще се покаже там, където се е появила иконата на правоъгълния инструмент за маркиране по-рано) и задръжте бутона на мишката, докато не се появи менюто за прелитане, след което изберете Инструмента за маркиране с една колона от списъка:

Щракнете и задръжте върху иконата на инструмента за един ред на маркиране, след което изберете инструмента за маркиране на един колона.

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

Решетка от хоризонтални и вертикални селекции.

Стъпка 7: Запълнете селекцията с черно

Отидете до менюто Редактиране в горната част на екрана и изберете Запълване :

Отидете на Редактиране> Запълване.

Когато се появи диалоговият прозорец Запълване, задайте опцията Използване в горната част на Черно, след което щракнете върху ОК, за да излезете от диалоговия прозорец:

Променете опцията Use на черно, след което щракнете върху OK.

Това запълва селекциите с черно, въпреки че може да е трудно да се види с водачите и очертанията на селекцията по пътя, така че отидете до менюто Select в горната част на екрана и изберете Deselect, което ще премахне очертанията на селекцията:

Отидете на Избор> Премахване на избора.

След това, за да изключите водачите, отидете до менюто View, изберете Show и след това изберете Guides . Отначало ще видите отметка отляво на думата Guides, която ни казва, че водачите са видими в момента. Щракването върху водачи ще премахне отметката и ще изключи водачите:

Отворете Преглед> Покажи> Ръководства.

С премахването на очертанията и водачите за избор можем да видим нашата черна решетка на слоя Grid:

Сега се появяват черните линии на решетката.

Стъпка 8: Отворете снимката, която искате да използвате с ефекта

Отворете снимката, която ще използвате с ефекта на мрежата. Ето моят образ:

Отворете снимката.

Ако използвате Photoshop CS3 или по-ранна версия, снимката автоматично ще се отвори в собствен прозорец с плаващ документ. Ако използвате Photoshop CS4 или CS5, в зависимост от това как имате нещата, настроени в предпочитанията на Photoshop, снимката може да се отвори в документ с раздели. В такъв случай, за да улесните следващата стъпка, отворете менюто Window в горната част на екрана, изберете Подреждане и след това изберете Float All в Windows (само CS4 и CS5):

Отидете на прозорец> Подредете> Float All в Windows (само Photoshop CS4 и CS5).

Стъпка 9: Плъзнете снимката в документа на мрежата

Щракнете навсякъде в прозореца на документа на мрежата, за да го активирате, след което щракнете върху фоновия слой в панела Слоеве, за да го изберете. По този начин, когато плъзнем снимката в документа, както ще направим в един момент, снимката ще се появи в собствения му слой между слоевете Background и Grid:

При избран прозорец на документа на мрежата щракнете върху фоновия слой в панела Слоеве.

Сега щракнете навсякъде в прозореца на документа на снимката, за да го активирате и изберете инструмента за преместване от панела с инструменти:

Хванете инструмента за преместване от горната част на панела с инструменти.

Задръжте клавиша Shift, след това щракнете с инструмента за преместване в прозореца на документа на снимката и плъзнете снимката в прозореца на документа на мрежата:

С избрания инструмент Move Tool задръжте Shift и плъзнете снимката в документа на мрежата.

Освободете бутона на мишката, след това освободете клавиша Shift и снимката ще се появи центрирана в прозореца на документа на мрежата. В този момент можете да затворите документа на снимката, тъй като вече нямаме нужда от него:

Задържането на клавиша Shift е това, което центрира снимката вътре в документа, когато го плъзнете.

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

Photoshop постави снимката върху нов слой непосредствено над активния слой, поради което първо избрахме фоновия слой.

Стъпка 10: Преоразмерете снимката, ако е необходимо с безплатна трансформация

Ако трябва да преоразмерите снимката си в документа на мрежата, отворете менюто Редактиране в горната част на екрана и изберете Безплатна трансформация :

Отидете на Редактиране> Безплатна трансформация.

Това поставя полето за ограничаване на свободната трансформация и се справя около изображението. Ако не можете да видите дръжките, тъй като краищата на снимката ви се простират извън видимата област в прозореца на документа, отидете до менюто View и изберете Fit on Screen :

Отидете на Изглед> Подходящ на екрана.

Photoshop незабавно ще намали изображението достатъчно далеч, така че всичко, включително дръжките за безплатна трансформация, да се побира в прозореца на документа. За да промените размера на снимката, задръжте клавиша Shift, след което щракнете върху някоя от четирите ъглови дръжки и ги плъзнете. Задръжката на клавиша Shift надолу, докато плъзнете, ще запази оригиналното съотношение на изображението, така че не случайно да изкривите външния вид на него. Ако искате да промените размера на снимката от центъра й, а не от ъгъл, задръжте Shift + Alt (Win) / Shift + Option (Mac), докато влачите някоя от дръжките на ъглите. Ако трябва да преместите изображението вътре в документа, просто щракнете навсякъде в полето за ограничаване на свободната трансформация и го плъзнете на място. Когато приключите, натиснете Enter (Win) / Return (Mac), за да приемете промяната и да излезете от командата Free Transform:

Плъзнете някоя от ъгловите дръжки, за да промените размера на изображението с Free Transform.

Ако сте увеличили изображението преди малко с помощта на командата Fit on Screen и искате да увеличите мащаба си сега, когато приключите с оразмеряването на изображението, върнете се обратно в менюто View и изберете Actual Pixels (вижте нашето Zoom and Panning във Photoshop урок за повече информация за увеличаване и намаляване на документи):

Отидете на Изглед> Актуални пиксели.

Стъпка 11: Изберете Grid Layer

В този момент се извършва цялата първоначална упорита работа. Създадохме нашата мрежа, изтеглихме нашата снимка в документа на мрежата и променихме размера и преместихме снимката на място. Готови сме да се забавляваме с оцветяване на мрежата! Първо, трябва да изберете Grid слой, така че щракнете върху него в панела Слоеве, за да го изберете:

Кликнете върху слоя Grid, за да го активирате.

Стъпка 12: Изберете инструмента Magic Wand

За да оцветим решетката, се нуждаем от начин да подберем отделните квадратчета и можем да направим това с помощта на инструмента на Magic Wand на Photoshop. Изберете го от панела с инструменти. Ако използвате Photoshop CS2 или по-стара версия, можете просто да кликнете върху иконата на Magic Wand. За Photoshop CS3 и по-нови версии щракнете върху инструмента за бързо избиране, след това задръжте бутона на мишката, докато се появи излишно меню и изберете от менюто Magic Wand:

В Photoshop CS3 и по-нови версии Магическата пръчица се крие зад инструмента за бърз избор.

Стъпка 13: Изберете квадратчетата на външния ръб

За да изберете квадрат в мрежата, уверете се, че сте избрали Grid слой в панела Слоеве, след това просто щракнете вътре в квадрата с Magic Wand. Около външните ръбове на квадрата ще се появи контур за избор. За да добавите допълнителни квадратчета към избора, задръжте клавиша Shift и щракнете вътре в квадратчетата, които искате. Всеки нов квадрат, върху който щракнете вътре, ще бъде избран и добавен към предварително избраните квадратчета. Нека започнем с избора на всички квадратчета около външния ръб на решетката. Първо щракнете вътре в квадрата в горния ляв ъгъл на решетката. Около нея ще се появи контур за избор:

Щракнете вътре в горния ляв квадрат в мрежата с инструмента Magic Wand, за да го изберете.

Задръжте клавиша Shift и продължете да щракнете във всеки от квадратите около външните краища на мрежата, за да ги добавите всички към избора:

Всички квадратчета на външния ръб вече имат очертания за избор около тях.

Ще добавя още няколко квадрата към моя избор, като отново задържам клавиша Shift и щракнете вътре в тях, за да ги добавя към избраните преди това квадратчета. За по-лесно да видите кои квадратчета съм избрал, оцветих ги в жълто (това не е част от ефекта, просто е да улесним виждането на квадратчетата, които съм избрал на екрана):

Първоначално избраните ми квадратчета.

Стъпка 14: Добавете нов слой под слоя на решетката

Ще запълним тези първоначални квадратчета с бяло, което ще създаде рамка за ефекта. Задръжте клавиша Ctrl (Win) / Command (Mac) и кликнете върху иконата New Layer в долната част на панела Layers:

Задръжте Ctrl (Win) / Command (Mac) и кликнете върху иконата New Layer.

Обикновено Photoshop добавя нови слоеве директно над текущо избрания слой, но като задържите клавиша Ctrl (Win) / Command (Mac), когато щракнете върху иконата New Layer, слоят се добавя под текущо избрания слой. На панела «Слоеве» можем да видим, че сега имаме нов празен слой между снимката на слой 1 и слой Grid:

Новият слой се появява отдолу, а не отгоре.

Стъпка 15: Попълнете избраните квадрати с бяло

Отидете до менюто Edit в горната част на екрана и отново изберете командата Fill . Този път, когато се появи диалоговият прозорец Запълване, променете опцията Използване на Бяла . Кликнете върху OK, когато сте готови:

Задайте опцията Use на бяло.

Photoshop попълва избраните квадрати с бяло. Премахнете отметката от квадратчетата, като отидете до менюто Select и изберете Deselect, или просто натиснете Ctrl + D (Win) / Command + D (Mac), за да премахнете избора си с клавишната комбинация:

Около изображението се появява рамка от бели квадратчета.

Стъпка 16: Изберете Grid Layer

Нека изберете няколко различни квадрати, които да оцветите. Първо, трябва да имаме активен слой Grid в панела Слоеве, така че щракнете върху него, за да го изберете. Не забравяйте, че винаги се нуждаете от избрания слой Grid, преди да можете да изберете квадрати:

Кликнете върху слоя Grid, за да го изберете.

Стъпка 17: Изберете различни квадратчета

Когато сега е активен слой Grid, щракнете вътре в началния квадрат, за да го изберете, след това задръжте клавиша Shift и щракнете вътре в други квадратчета, за да ги добавите към избрания преди това квадрат (и). Ако промените решението си и искате да премахнете квадрат от селекцията, задръжте клавиша Alt (Win) / Option (Mac) и щракнете вътре в квадрата, за да го премахнете. Тук за пореден път изтъкнах квадратчетата, които съм избрал в жълто, само за да ги улесни в екрана:

Задръжте Shift и щракнете вътре в няколко различни квадрата, за да ги изберете.

Стъпка 18: Изберете фотослоя

Кликнете върху слоя на снимката (слой 1) в панела Слоеве, за да го изберете:

Изберете фотослоя в панела Слоеве.

Стъпка 19: Оцветяване на квадратите с слой за регулиране на нюанс / насищане

Кликнете върху иконата New Adjustment Layer в долната част на панела Layers:

Кликнете върху иконата New Adjustment Layer.

Изберете Hue / Saturation от списъка с коригиращи слоеве, който се показва:

Изберете Hue / Saturation от списъка.

Ако използвате Photoshop CS4 или CS5, контролите и опциите за коригиращия слой Hue / Saturation ще се появят в панела за корекции . В CS3 и по-стари версии ще се отвори отделен диалогов прозорец Hue / Saturation. Първо, изберете опцията за оцветяване, като щракнете вътре в квадратчето й. След това изберете цвета, с който искате да оцветите избраните квадратчета, като плъзнете плъзгача Hue . За тези квадрати ще оставя плъзгача Hue, зададен докрай вляво (неговата позиция по подразбиране), която избира червено . Разбира се, можете да изберете който и цвят да ви хареса. За да увеличите наситеността на цвета, плъзнете плъзгача Saturation надясно. Ще задам стойността си на насищане на 55 . Внимавайте за вашия документ, докато влачите плъзгачите, за да прегледате резултатите. За Photoshop CS3 и по-ранни потребители щракнете върху OK, когато сте готови, за да излезете от диалоговия прозорец:

Щракнете върху опцията Colorize, след което изберете цвят с плъзгачите Hue и Saturation.

Стъпка 20: Променете режима на смесване за коригиращия слой към цвят

Ако погледнем в панела «Слоеве», виждаме коригиращия слой, разположен непосредствено над фотослоя. Уверете се, че е избран (подчертан в синьо), след това отидете до опцията Blend Mode в горната част на панела Слоеве и променете режима на смесване от Normal (режим по подразбиране) на Color . Това гарантира, че променяме само цветовете в изображението, а не стойностите на яркостта:

Променете режима на смесване на коригиращия слой Hue / Saturation на Color.

Ето моя документ след оцветяване на някои от квадратчетата в червено:

Към ефекта са добавени няколко червени квадрата.

Стъпка 21: Изберете и оцветете повече квадратчета

Повторете стъпки 16-20, за да изберете и оцветите повече квадратчета. Първо изберете Grid слой в панела Слоеве, след което щракнете вътре в квадрат, за да го изберете с Magic Wand. Задръжте Shift и щракнете вътре в повече квадратчета, за да ги добавите към селекцията. Кликнете върху фотослоя в панела Слоеве, за да го изберете, след това щракнете върху иконата New Adjustment Layer и изберете Hue / Saturation . Изберете опцията Colorize, след което изберете цвят с плъзгача Hue и нивото на насищане с плъзгача Saturation . Щракнете върху OK, за да излезете от диалоговия прозорец (CS3 и по-ранни). И накрая, променете режима на смесване на новия коригиращ слой на Color .

Можете също да използвате слой за регулиране на нюанса / насищане, за да десатурирате напълно някои от квадратчетата, оставяйки ги черно-бели. За да направите това, изберете някои квадратчета, след това добавете Hue / Saturation коригиращ слой както обикновено, но вместо да избирате цвят с плъзгача Hue, просто плъзнете плъзгача Saturation докрай наляво, което ще премахне целия цвят (също няма нужда да избирате опцията Colorize):

Премахнете целия цвят от някои квадратчета, като плъзнете плъзгача Saturation до лявата страна.

Ето моят ефект засега след оцветяване на повече квадратчета с допълнителни слоеве за регулиране на оттенък / насищане. В случай, че искате да използвате същите цветове, които направих аз, за ​​синьото зададох Hue на 200, Saturation на 30. За Green, Hue беше зададено на 120, Saturation 25. За Purple, Hue беше 289, Saturation 35. И както просто споменато, за черно-белите квадрати, наситеността беше зададена на -100, като плъзнете плъзгача докрай наляво:

Досега цветният ефект на решетката.

Стъпка 22: Опитайте различен цветен режим за някои от слоевете за регулиране

Единственият проблем, който имам досега с моя резултат, е, че той наистина не изглежда толкова ярко и цветно, колкото се надявах. Един от начините за промяна е промяна на режима на смесване на някои от слоевете за регулиране. Ако погледнем панела Слоеве, можем да видим всички коригиращи слоеве, които съм използвал за оцветяване на квадратите. Има общо пет, включително този, който използвах за черно-белия ефект:

За ефекта бяха използвани пет коригиращи слоя.

За да добавите по-голям интерес към изображението, опитайте да промените режима на смесване за някои от слоевете за настройка на нещо различно от Color. За целта просто щракнете върху коригиращия слой в панела Слоеве, за да го изберете, след което променете режима на смесване в горната част на панела Слоеве. Например, мисля, че червеният цвят на изображението ми изглежда малко тъп, така че ще кликнете върху най-горния слой за регулиране на оттенък / насищане в панела Слоеве, за да го изберете (тъй като това е този, който използвах за добавяне на червено), след това Ще променя режима му на смесване от Цвят на Екран :

Избиране на червения слой за регулиране на оттенъка / наситеността, след това промяна на режима на смесване на екран.

Режимът на смесване на екрана прави нещата по-ярки, но също така има тенденция да намалява наситеността на цветовете, така че за да компенсирам, с избрания слой за регулиране на нюанс / насищане, ще се върна към панела за регулиране и ще увелича стойността на насищане за червено до 70 (за Photoshop CS3 и по-ранни потребители щракнете върху миниатюрата на коригиращия слой в панела Слоеве, за да отворите отново диалоговия прозорец Hue / Saturation, за да направите каквито и да било промени, след което щракнете върху OK, за да затворите диалоговия прозорец):

Промяната на режим на смесване може да изисква корекции на нивото на насищане на цвета.

Ето моето изображение след промяна на режима на смесване на червено на екран и увеличаване на неговата наситеност на цветовете. Забележете, че червените квадратчета сега изглеждат по-ярки:

Екранът е популярен режим на смесване, който обикновено се използва за бързо озаряване на изображенията.

Ще направя същото и с пурпурния слой за регулиране на нюанса / насищането, като първо щракна върху него, за да го изберете в панела Слоеве, след това променя режима му на смесване на екран и увеличавайки наситеността на цветовете до 55 в панела за регулиране (или диалоговия прозорец в CS3 и по-рано). Други режими на смесване, които могат да ви дадат добри резултати включват Multiply (за по-тъмен цвят), както и Overlay, който ще ви даде по-висок контрастен ефект, но може да промени и външния вид на самия цвят. Ето моят ефект сега с червените и лилавите квадратчета, зададени в режим на смесване на екрана:

Различните режими на смесване ще ви дадат различни ефекти. Екран, умножение и наслагване са добри, за да опитате.

Стъпка 23: Променете цвета на линиите на решетката на бял

Като последна стъпка за ефекта, позволява да променяте външния вид на самите линии на мрежата, първо като промените цвета си от черно към бяло. Кликнете върху слоя Grid в панела Слоеве, за да го изберете, след което щракнете върху иконата Lock Transparent Pixels точно под опцията за режим на смесване (това е първата от четирите икони от един ред):

Кликнете върху иконата Lock Transparent Pixels.

Стъпка 24: Запълнете линиите на мрежата с бяло

С опцията Lock Transparent Pixels, избрана на Grid слой, всичко, което правим на слоя, ще се отрази само на самите пиксели. Това няма да окаже влияние върху прозрачните зони. По този начин, ако запълним слоя с, да речем, бял цвят (както ни предстои), само линиите на мрежата ще бъдат запълнени с бяло. Прозрачните области на слоя ще останат прозрачни.

Отидете до менюто Редактиране и отново изберете Запълване . Когато се появи диалоговият прозорец „Запълване“, опцията „ Използване “ вече трябва да бъде зададена на „ Бяло“, тъй като това е, което го настроихме за последен път, така че просто щракнете върху „ОК“, за да се излезе от диалоговия прозорец. Photoshop ще запълни линиите на мрежата с бяло:

Photoshop запълва слоя с бяло, но са засегнати само линиите на мрежата.

Стъпка 25: Добавете стил на щрихов слой

Ако искате да увеличите дебелината на линиите на мрежата, кликнете върху иконата на слоевете слоеве в долната част на панела Слоеве:

Кликнете върху иконата Layer Styles.

Изберете Очертаване от списъка със стилове на слоя, който се показва:

Изберете Ход от списъка.

Отваря се диалоговият прозорец на Photoshop’s Layer Style, зададен на опциите Stroke в средната колона. Кликнете върху цветовия образ до думата Color, която отваря Color Picker . Изберете бялото от „Избор на цвят“, след което щракнете върху „ОК“, за да го затворите. С бяло сега като цвят на щриха, оставете позицията, зададена на външната страна, и коригирайте ширината на хода, като плъзнете плъзгача Размер, като същевременно наблюдавате документа, за да прецените резултата. Ще определям размера на удара си на 2 пиксела (пиксела):

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

Щракнете върху OK, за да затворите диалоговия прозорец „Слой стил“ и ние сме готови! Ето и последния ми ефект от цветната решетка:

Крайният резултат.

Шаблон сетки Photoshop: Проектирование сквозь линию

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

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

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

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

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

Руководство

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

Модульная сетка

Инструмент для быстрого создания модульной сетки в Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design и других.Вы просто переходите по ссылке и загружаете его как файл PNG, узор Photoshop или маску прозрачности. Просто, удобно и полезно любому веб-разработчику или дизайнеру.

1200 пикселей сетка

Все современные экраны имеют ширину не менее 1200 пикселей, поэтому сетка 1200 пикселей необходима каждому разработчику. Вы можете скачать его как файл Photoshop, Illustrator или CSS и получить гибкую и удобную сетку из 15 столбцов. Вы сможете использовать сразу после загрузки в мгновение ока.

PSD, адаптивная сетка Bootstrap — для мобильных устройств, планшетов и веб-сайтов — бесплатно

Этот набор адаптивных сеток основан на классном сочетании ширины столбца / желоба для Twitter.Вы можете использовать его для всех типов экранов: мобильных, планшетов и ПК.

Используемые размеры :

  • Интернет: 1280 пикселей ширина — 70 пикселей столбцы — 30 пикселей промежуток
  • Таблетка: 1024 пикселей ширина — 60 пикселей столбцы — 20 пикселей промежуток
  • Mobile: 320 пикселей ширина — 10 пикселей столбцы — 10 пикселей промежуток

iPad Каркасная сетка Retina

Если вы искали сетку для iPad — вот она. Один действительно великий человек также не нашел сетку Retina, поэтому он создал ее и теперь делится ею со всеми совершенно бесплатно.Вы можете скачать его как шаблон PSD. Его размеры: 2048x1536px.

1200px сетка шаблон

Вот сетка Photoshop 1200 пикселей бесплатно, сделанная Петром Вилком для своего проекта. Сетка состоит из 12 столбцов, промежуток 10 пикселей, 80 пикселей на столбец. Наслаждаться!

Bootstrap 4 Grid PSD

Многие веб-сайты Bootstrap начинают свою жизнь с макетов в Photoshop. При разработке для Bootstrap полезно иметь целевые размеры столбцов, доступные в той или иной форме, чтобы объекты и текст можно было легко выровнять по сетке.Для Bootstrap 3 существует множество хороших шаблонов, но для грядущего Bootstrap 4 их пока немного. Вот почему я создал этот PSD-файл Bootstrap 4 Grid в качестве основы для быстрого создания макета темы или веб-сайта. Вот краткий обзор включенных мною функций. Более подробное изложение можно найти ниже.

Часто задаваемые вопросы о шаблоне сетки Phoshop

Как создать шаблон сетки в Photoshop?

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

Почему мне нужно использовать шаблон сетки Photoshop? Шаблон сетки

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

Что такого особенного в шаблоне сетки Photoshop?

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

Что, если я решу не использовать шаблон сетки Photoshop?

Сетка позволяет добавлять новую информацию, которая не нарушает общую концепцию дизайна.

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

Не пропустите самых популярных

  1. Лучший хостинг для сайта WordPress. Нажмите на нашу ссылку, чтобы получить лучшую цену на рынке со скидкой 30%. Если Bluehost вас не впечатлил, попробуйте другие альтернативы.
    2. Услуга установки веб-сайта
  2. — чтобы ваш шаблон был настроен и запущен всего за 6 часов без лишних хлопот. Ни минуты не теряются, и работа продолжается.
    3. Членство
  3. ONE — для загрузки неограниченного количества тем WordPress, плагинов, ppt и других продуктов в рамках одной лицензии. Чем больше, тем лучше.
  4. Готовый к использованию веб-сайт — это идеальное решение, которое включает в себя полную установку и настройку шаблонов, интеграцию контента, реализацию обязательных плагинов, функции безопасности и расширенную оптимизацию на странице. Команда разработчиков сделает всю работу за вас.
  5. обязательных плагинов WordPress — чтобы получить самые необходимые плагины для вашего сайта в одном комплекте.Все плагины будут установлены, активированы и проверены на правильность работы.
  6. Finest Stock Images для веб-сайтов — для создания потрясающих визуальных эффектов. Вы получите доступ к Depositphotos.com, чтобы выбрать 15 изображений с неограниченным выбором тем и размеров.
    7. Услуга создания сертификата
  7. SSL — чтобы получить абсолютное доверие посетителей вашего сайта. Comodo Certificate — самый надежный протокол https, который обеспечивает безопасность данных пользователей от кибератак.
  8. Услуга оптимизации скорости веб-сайта — чтобы повысить UX вашего сайта и получить лучший результат в Google PageSpeed.
Изометрическая сетка

— простое руководство по ее созданию (2021 г.)

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

Будете ли вы создавать изометрическую иллюстрацию или вектор. Сетки в основном используются для придания безупречной отделки 3D-объектам дизайна.

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

Что такое изометрическая сетка?

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

Как создать изометрическую сетку?

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

Как нарисовать изометрическую сетку на бумаге

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

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

Сетка бумажная чертеж

Как создавать на бумаге карандашом и бумагой

Посмотрите это видео для быстрого старта.

Бесплатный иллюстратор изометрической сетки

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

Как создать изометрическую сетку в Photoshop и Illustrator

Это видео, приведенное ниже, объяснит весь процесс без особых хлопот, чтобы разработать его самостоятельно в Adobe Photoshop и Illustrator менее чем за 2 минуты.

Сетевой генератор

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

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

Изометрическая миллиметровка

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

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

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

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

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

Изометрический город Валида Бено

Timekit, иллюстрация Дмитрия Харченко

Аналитика данных Дмитрия Харченко

Часто задаваемые вопросы

Как создать изометрическую сетку в Photoshop?

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

Есть ли в Photoshop инструмент сетки?

Да, в Photoshop есть сетка-линейка или инструмент сетки, но это простая квадратная сетка, а не изометрия. Вот сочетание клавиш для отображения сетки в Photoshop. Нажмите [ Ctrl + ‘] или коснитесь Просмотр ⮞ Показать ⮞ Сетка .

Как сделать изометрическую сетку вручную?

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

Несколько заключительных слов

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

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

Раджиндер Сингх

https://thehotskills.com

Fountainhead of Thehotskills — Вдохновение в веб-дизайне и безмерное искусство — Ведущее агентство веб-дизайна, базирующееся в Чандигархе, предлагающее передовые UX / UI консультации и дизайн, индивидуальную сборку и оптимизированный для SEO веб-дизайн и разработку, а также услуги интерактивного цифрового дизайна продуктов. Посмотреть больше сообщений

Как создать сетку в Photoshop — Strange Hoot

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

Пять основных шагов создания сетки в Photoshop

  1. Создайте новый документ
  2. Создайте новый макет для сетки
  3. Создайте фигуры
  4. Свяжите свои изображения и фигуры, которые вы создали
  5. Сохраните проект

Как создать сетку в Photoshop за 5 простых шагов

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

Шаг 1. Начните с создания нового документа.

Необходимо запустить Photoshop и создать новый документ в качестве отправной точки. На этом этапе вам нужно будет настроить пиксели. Если вы создаете дисплей с разрешением 1024 x 768 пикселей, мы предлагаем вам установить ответ вашего документа на 960 x 768 пикселей.

Шаг 2. Создайте новый макет сетки на своем компьютере.

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

Шаг 3. Создание фигур

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

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

Шаг 4: Создайте ссылку

Начните с выбора слоя, на который вы хотите поместить изображение, а затем нажмите «Файл» и «Поместить» на клавиатуре.

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

Шаг 5. Сделайте резервную копию ваших данных.

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

При нажатии Cmd / Ctrl + S открывается окно сохранения. Теперь вы можете дать вашей сетке имя и прикрепить ее к определенному формату файла — изображения наиболее часто используются в форматах .PSD и .TIF.

Создание светящихся линий на сетке в Photoshop, аналогичных эффектам в Tron

Шаг 1. Начните с создания нового документа.

Как и в предыдущих шагах, вы начинаете с открытия Photoshop и создания документа с нужными параметрами.

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

Шаг 2. Конфигурация

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

Перейдите к «Редактировать», а затем выберите «Обводка.Ширина штриха должна быть равна единице, а «Местоположение» должно быть установлено внутри штриха.

Шаг 3. Создайте резервную копию .

Чтобы иметь возможность вернуться к шаблону позже, сохраните его, выбрав «Редактировать», а затем нажав «Определить шаблон». Назовите дорогу и нажмите кнопку «Сохранить».

Шаг 4. Используйте свой индивидуальный шаблон

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

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

Шаг 5. Воспользуйтесь инструментом Transform Tool, который предоставляется бесплатно.

После этого вы захотите использовать бесплатный инструмент преобразования, доступ к которому можно получить, набрав Ctrl / Cmd + T на клавиатуре.

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

Шаг 6: Добавьте немного сияния

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

Добавление направляющих в документ Photoshop

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

Шаг 1. Установка линейки.

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

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

Шаг 2: Указывает направления

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

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

Шаг 3. Сделайте снимок

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

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

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

Шаг 4 — Удалите и скройте направляющую.

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

Заключение

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

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

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

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

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

1. Определите свою сетку

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

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

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

2. Создание шаблона

Создайте еще один новый документ с шириной 1 пиксель и высотой 16 пикселей.

Возьмите инструмент «Карандаш» и установите размер кисти 1 пиксель. Измените цвет переднего плана на яркий (я выбрал зеленый) и сделайте отметку в самом низу документа 1x16px. Должно получиться примерно так:

Теперь перейдите в Edit> Define Pattern. Дайте ему любое имя и нажмите ОК.

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

3. Добавление базовой линии

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

Перейдите в Edit> Fill и выберите свой недавно созданный узор.

В итоге у вас должно получиться что-то вроде этого:

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

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

И если вы когда-нибудь захотите изменить цвет, просто CTRL / CMD + щелкните базовый слой, чтобы выбрать все линии сразу. Затем вы можете изменить цвет фона и использовать CTRL / CMD + Backspace, чтобы заполнить выделение.

Экшен Photoshop с сеткой

от sevenstyles

ПОСМОТРЕТЬ ВЫШЕ ВИДЕО ДЛЯ ДЕМОНСТРАЦИИ ДЕЙСТВИЯ И ПОДРОБНОГО ВИДЕО-РУКОВОДСТВА

Вам также может понравиться:

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

Сетка Photoshop Экшен

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

Экшен протестирован и работает на Photoshop CS3, CS4, CS5, CS6, CC, CC 2015.5, CC 2017, CC 2018, CC 2019+

Для получения наилучших результатов используйте фотографии размером 1500–4000 пикселей (300 пикселей на дюйм)

Важно знать

  • Убедитесь, что вы используете английскую версию Photoshop для запуска Action’а.Все действия Sevenstyles будут работать только в английской версии Photoshop.
  • Убедитесь, что вы используете версию Photoshop, поддерживаемую Action.
  • Посмотрите видеоурок, чтобы убедиться, что ваш файл Photoshop настроен правильно. Ссылка на учебник также включена в файл «Readme.txt» при загрузке. Вы можете просмотреть все мои руководства по действиям здесь.
  • Используйте фотографии с высоким разрешением с помощью Action для достижения наилучших результатов и во избежание ошибок.Оптимальное разрешение фотографии составляет от 2000 до 4500 пикселей.
  • С Adobe Creative Cloud вы можете установить несколько версий Photoshop. Если вам нравится этот экшен, но он не поддерживается вашей версией Photoshop, вы всегда можете установить дополнительную версию Photoshop, чтобы запустить этот экшен. После того, как экшен протестирован и работает в версии Photoshop, он будет работать вечно.
  • Используйте изображения Jpeg для запуска действия. Другие типы файлов, такие как TIFF, BMP, PNG, PSD, могут вызывать проблемы с действиями, поскольку Photoshop отключает различные функции для разных типов файлов.
  • Если действие Sevenstyles Action включает в себя файл кисти (.abr), узора (.pat) или фигур (.csh) в загрузке, то его необходимо загрузить в Photoshop перед воспроизведением действия.
  • Избегайте использования Action на логотипах или изображениях в стиле клип-арт, поскольку отсутствие деталей и цветового контраста могут привести к ошибкам.

Возникли проблемы с действием?

  • Дважды проверьте правильность настройки файла, как показано в начале видеоурока.
  • Проверьте разрешение вашей фотографии. Если это фотография с низким разрешением (<1000 пикселей), возьмите самую короткую длину фотографии и увеличьте ее примерно до 2500 пикселей или более. Это поможет избежать ошибок и даст гораздо лучшие результаты.
  • Посмотрите мои темы поддержки здесь. Я перечисляю все распространенные ошибки с решениями.
  • Если вы все еще застряли, пришлите мне по электронной почте снимок экрана всего интерфейса Photoshop, на котором отображается ошибка.Пожалуйста, дайте мне знать, какую версию Photoshop вы используете, чтобы я мог помочь вам быстрее. Вы можете найти мой адрес электронной почты на странице поддержки.

Создание собственных эффектов

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

  1. Запустите первое действие над вашей фотографией.
  2. Если вы довольны результатом, сохраните свой дизайн как изображение Jpeg.
  3. Закройте файл Photoshop и снова откройте только что сохраненное изображение.
  4. Теперь запустите еще одно действие над вашей фотографией! Затем второй эффект будет складываться поверх первого.

Есть так много неоткрытых эффектов, которые можно создать!

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

сеток в Photoshop — фантастические карты

Сегодня краткий обзор одной из скрытых жемчужин Photoshop — особенно для построения карт и структур: сетки.

Photoshop имеет встроенную сетку. Вы можете отобразить ее, нажав cmd / ctrl + ‘Скорее всего, сетка по умолчанию будет не совсем той, что вам нужно, поэтому вот несколько шагов, чтобы заставить сетку работать на вас.

1. Настроить шкалу

Я обычно работаю над проектами в масштабе 1 дюйм. Настройте сетку, выбрав «Настройки» -> «Сетки, направляющие и фрагменты». Установите для линии сетки каждые xxx пиксели каждые 100 пикселей для изображения с разрешением 100 точек на дюйм или каждые 300 пикселей для изображения с разрешением 300 точек на дюйм (или просто измените единицы измерения в раскрывающемся списке и установите для линии сетки каждый дюйм).

Я также установил в сетке 10 делений. Это полезно, если вам нужен более точный контроль над квадратами сетки. Теперь у вас должно быть что-то вроде 1. на изображении.

2. Используйте свою сетку!

Да, это действительно так просто. Я создаю новый слой и заливаю его черным (или TSR-синим, или любым другим начальным цветом, который вы хотите использовать для своих стен). Затем вырежьте комнаты с помощью инструмента выбора и удалите, чтобы удалить содержимое выделения. Здесь я провожу стены по основной линии сетки.Выглядит неплохо, но проблема в том, что все стены должны быть не менее 5 дюймов в толщину. Это не идеально.

3. Умные стены

В этой версии вы можете увидеть, почему я использую 10 делений в сетке. Я начинаю каждую стену на 1/10 квадрата сетки внутри основной линии. Таким образом, когда я хочу разместить внутренние стены, они будут иметь ширину всего 2/10 сетки. Это дает достаточно места для размещения значков дверей. И если я собираюсь использовать карту в vtt позже, я могу запустить Fog of War по основным линиям сетки, и игроки по-прежнему всегда будут видеть стены.

Поведение привязки к сетке отличное, но вы можете переключать его, используя shift + cmd / ctrl +; Это позволит вам рисовать от руки, но при этом сетка останется видимой. Удобен для рисования естественных пещер.

Дополнительные руководства в архиве «Советы и рекомендации»

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

Grid Custom Shapes для Photoshop и Elements с макетами / таблицами для CC CS6 CS5 и т. Д.

графических экстра.com> нестандартные формы

Сетка нестандартных форм для Photoshop CC 2017 2015 CS6 CS5 CS4 CS3 и т. Д. И элементов Photoshop. Наборы нестандартных форм сетки включают в себя табличные конструкции, формы макетов, формы сетки с несколькими путями и многое другое. Пользовательские формы сетки предназначены для использования на ПК и MAC. Сетки поставляются в стандартных формах формата CSH вместе с документацией, галереей и сериалом. Их можно использовать как слой векторной формы, а также как контур, а также как заливки. Настраиваемые формы сетки можно комбинировать различными способами для создания еще более уникальных табличных дизайнов.Пользовательские формы сетки можно использовать с другими контурами. Вы можете использовать их с эффектами и плагинами. Приобретая замечательные сетки, вы получаете работы в векторном формате CSH вместе с галереей, сериалом и заметками.

Сетка фигур на закупку

Наборы по $ 7,79 (также GBP и т. Д.) По каждый, формат CSH, скачать

КУПИТЬ 340 Фигуры сетки (V13) Пользовательские формы сетки для Photoshop и Elements

КУПИТЬ 60 Табличная графика (V127) Таблица / сетка нестандартных форм для Photoshop / Elements

КУПИТЬ 110 Сетки (V62) Сетки нестандартных форм для Photoshop и Elements

КУПИТЬ 100 фигур сетки (VS3) Пользовательские формы сетки для Photoshop и Elements

Сопутствующие товары

1.набор шрифтов сетки

Сетка нестандартной формы

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

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *