Advertisement
  1. Design & Illustration
  2. Interface Design
Design

Креирајте стилизирано навигациско мени и исечете го за Веб

by
Length:MediumLanguages:
This post is part of a series called Web and Interface Design With Vector.
Quick Tip: How to Create a Simple Register Form Design
Learn a Professional Workflow for Illustrating a Comic-Style Header Image

Macedonian (Македонски јазик) translation by Dejan Stojanoski (you can also view the original English article)

Во овај туторијал вие ќе научитекако да креирате стилизирано навигациско мени. Вие ќе научите како да ја користите Appearance панелата за да го стилизирате навигациското мени и како да ја користите алатката Slice Tool за да ги исечите и експортирате сликите, така што ќе можете да ги користите во вашата веб страна. Ајде да почнеме!

Чекор 1

Притиснете Ctrl + N / Command + N за да креирате нов документ. Внесете димензии 1025 на 53px и потоа кликнете на Advanced копчето. Селектирајте RGB, Screen (72ppi)  и проверете дали "Align New Object to Pixel Grid" box-от е одчекиран (ако не е ончекирајте го) и кликнете ОК. Уклучете го Grid-от (View > Show Grid)и Snap to Grid (View > Snap to Grid).

За сега ви треба Grid на секои 5px. Одете на Edit > Preferences > Guides & Grid, внесете 5 во Gridline every box-от и 1 во Subdivision box. Вие исто така можете да ја отворите Info панелата за да имате подобар преглед врз големината и позицијата на формите. Не заборавајте да ја смените мерната единица во пиксели од Edit > Preferences > Unit > General. Сите овие опции значително ќе ја зголемат вашата брзина на работа.


Чекор 2

Кликнете на Rounded Rectangle Tool и креирајте правоаголен четириаголник со димензии 1025 на 50px и радиус 3px. Enter a 3px radius, click OK and go to Object > Expand Appearance.


Чекор 3

За следните чекори ви е потребен Grid на секој 1px. Одете на Edit > Preferences > Guides & Grid и внесете 1 во Gridline every box. Фокусирајте се на левата страна од формата што ја креиравте во претходниот чекор. Земете Pen Tool (P), нацртајте 50px висока вертикална патека и поставете ја како што е прикажано на следната слика. Додадете 1pt црн Stroke на патеката за да можете полесно да ја забележите.


Чекор 4

Селектирајте ја одново вертикалната патека што ја креиравте во претходниот чекор и влечете ја 128px на десно. Тоа можете да го направите со едноставно влечење на патеката, или со отворање на опцијата Object > Transform > Move. Едноставно, внесете 128 во Horizontal box и притиснете Enter.


Чекор 5

Селектирајте ја одново патеката и одете на Effect > Distort & Transform > Transform. Внесете ги податоците што се прикажани на следната слика, кликнете ОК и одете на Object > Expand Appearance.


Чекор 6

Селектирајте ја групата од вертикални патеки креирани во претходниот чекор заедно со заоблениот правоаголник (rounded rectangle) креиран во претходниот чекор, отворете ја Pathfinder панелата и кликнете на Divide button. Отворете ја Layers панелата, селектирајте ја добиената група и одгрупирајте ја (Shift + Ctrl/Command +G, или Object > Ungroup). Фокусирајте се на Layers панелата и ставете имиња за формите од 1 до 8 (почнете од формата што е најлево).


Чекор 7

Одчекирајте го Snap to Grid (View > Snap to Grid), потоа одете на Edit > Preferences > General и осигурете се дека Keyboard Incrementе поставен на 1px. Селектирајте ја формата "1" и направете две копии напред Control + C > Control + F > Control + F). Селектирајте ја најгорната копија и поместете ја 1px кон лево на стрелките од тастатурата. Одново селектирајте ги двете копии и кликнете на Minus Front копчето од Pathfinder панелата. Ставете ја добиената форма напред (Shift + Control + ]), пополнете ја со црна боја и сменете го Blending Mode во Overlay.


Чекор 8

Селектирајте ја формата "1" и направете две копии напред (Control + C > Control + F > Control + F). Фокусирајте се на Layers панелата, селектирајте ја најдолната копија и поместете ја 1px на десно користејќи ја тастатурата. Селектирајте ги одново днете копии и кликнете на копчето Minus Front од Pathfinder панелата. Ставете ја добиената форма напред (Shift + Control + ]), пополнете ја со бела боја и сменете го нејзиниот Blending Mode во Overlay.


Чекор 9

Селектирајте ги одново двете форми што ги креиравте во последните два чекори и групирајте ги (Control + G). Направете копија на групата (Control + C > Control + F), селектирајте ја и кликнете на Unite копчето од Pathfinder панелата. Пополнете ја добиената форма со линеарен градиент, кој што е прикажан во втората слика.


Чекор 10

Отворете ја Transparency панелата. Селектирајте ја формата и групата креирани во претходниот чекор, отворете го летачкото мени (fly-out menu) од Transparency панелата и кликнете на Make Opacity Mask. На крај вашата "маскирана" група би требало да изгледа како на втората слика.


Чекор 11

Селектирајте ја одново маскираната група, што ја креиравте во претходниот чекор и одете на Object > Transform > Move. Внесете 128 во Horizontal box и кликнете на копчето Copy. Очигледно, вака ќе додадете копија од вашата група 128px на десно. Селектирајте ја оваа копија и повторете ја командата Move, или ако сакате побрзо кликајте на (Control + D) се дури не добиете 7 маскирани објекти. Keep repeating this technique until you have seven masked groups.


Чекор 12

Уклучете го Snap to Grid (View > Snap to Grid). Со Rectangle Tool (M), креирајте четири правоаголници со по 3px, обојте ги со црна и бела боја и поставете ги како што е прикажано на сликата. Also, fill them with black and white as shown below. Селектирајте ги и едноставно влечете ги до Swatches панелата за да ги претворите во Pattern (шаблон). Штом го добиете Pattern-от, можете да ги избришите четирите правоаголници.


Чекор 13

Исклучете ги Grid (View > Show Grid) и Snap to Grid (View > Snap to Grid). вратете се кај формата "1". Селектирајте ја и во Appearance панелата додадете втор Fill користејќи го копчето Add New Fill. Селектирајте го, ставете боја R=28 G=117 B=188 и сменете го Blending mode-от во Color Burn.


Чекор 14

Селектирајте ја формата "1" и во Appearance панелата додадете трет Fill. Селектирајте ја формата, намалете Opacity на 15%, сменете Blending Mode во Soft Light и додадете го Pattern-от што го направивте во дванаесеттиот чекор.


Чекор 15

Селектирајте ја одново формата "1" и во Appearance панелата осигурете се дека ниту еден Fill, или Stroke не е селектиран и одете на Effect > Stylize > Drop Shadow. Внесете ги податоците што се прикажани во најгорниот прозорец, кликнете ОК и повторно во Effect > Stylize > Drop Shadow. Внесете ги податоците прикажани во средниот прозорец, кликнете ОК и уште еднаш на Effect > Stylize > Drop Shadow. Внесете ги податоците од најдолниот прозорец и кликнете ОК.


Чекор 16

Сега ви треба копија од својствата (properties) што ги користевте во формата "1". Еве како можете тоа лесно да го направите. Одете во Layers panel, погледнете на десната страна и ќе видите дека за секоја форма има мал сив круг. Тој круг се нарекува target icon. Држете Alt, кликнете на Target иконата од формата "1" и влечете кон Target иконатаод формата "2". Користете ја оваа техника за да ги додадете истите карактеристики и на останатите шест форми.


Чекор 17

Селектирајте ја формата "2" и во Appearance панелата додадете четврт Fill. Селектирајте го, додадете бела боја, намалете на Opacity на 50% и сменете го Blending Mode во Soft Light. Ова ќе биде hover mode (лебдечки мод) за вашето мени.


Чекор 18

Со Type Tool (T)додадете текст, како што е прикажано на следната слика. Користете Calibri фонт со големина од 15pt, со Bold стил и боја R=0 G=86 B=140. Осигурете се дека целиот текст е селектиран и одете на Effect > Stylize > Drop Shadow. Внесете ги податоците што се прикажани подолу и кликнете ОК.


Чекор 19

Сега ајде да го исечеме менито. Погледнете во маскираната група лево и селектирајте го Slice Tool (Shift + K). Прво нацртајте 6 на 53px исечок (slice) во формата "1", како што е покажано на следната слика. Продолжете со Slice Tool (Shift + K) и нацртајте втор 6 на 53px исечок (slice) во формата "2" како што е прикажано подолу.


Чекор 20

Сега кога го имате првиот исечок одете на Files > Save for Web & Devices (Alt + Control + Shift + S). Селектирајте го Slice Select Tool (K) и два пати кликнете на исечокот што е лево, 6 на 53px. Внесете nav во Name box-от и потоа кликнете ОК.

Погледнете кај вториот исечок. Два пати кликнете на него, внесете "nav.hoover" во Name box-оти кликнете ОК. Селектирајте PNG-24 од Preset менито и кликнете Save. Одберете локација каде што сакате да ги зачувате сликите и кликнете Save. Отворете ја локацијата и ќе видите нов фолдер со многу нови слики. Влечете ги "nav.png" и "nav.hoover.png"надвор од фолдерот и потоа избришете го фолдерот. outside the folder then delete the folder.


Чекор 21

Вратете се кај вашиот Ai фајл, селектирајте го Slice Tool (Shift + K)и нацртајте 2 X 53px исечок (slice) во должина на маскираната група од лево. Во Layers панелата направете ги невидливи сите форми, освен маскираната група од лево.


Чекор 22

Одете повторно во Files > Save for Web & Devices (Alt + Control + Shift + S). Со Slice Select Tool (K) кликнете два пати на новиот исечок што го креиравте во претходниот чекор. Именувајте го како "divider"и кликнете ОК. Осигурете се дека PNG-24е сеуште селектирано во Presetменито и кликнете Save. Повторно одберете ја локацијата каде што ги зачувувате сликите и кликнете ОК. Одете до таа локација, отворете нов фолдер, влечете ја "divider.png" сликата надвор од фолдерот, потоа избришете го фолдерот. outside the folder then delete your folder. На крај вие треба да имате три слики: "nav", "nav.hoover" и "divider.png".


Чекор 23

На крај вие можете лесно да ја измените бојата што ја користевте во вашето навигациско мени. Едноставно сменетеја бојата што ја користевте за текст и втор Fill со некоја боја што е прикажана на следните слики.


Заклучок

Сега вашата работа е готова, еве како треба менито да изгледа.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.