Садржај
- 01. Почните са мрежом
- 02. Дефинисати различите области
- 03. Додајте мало навигације
- 04. Заокружите своје правоугаонике
- 05. Додајте слике
- 06. Представите стилове слојева
- 07. Изолујте своје слојеве
- 08. Направите средства за слике
- 09. Копирајте ЦСС атрибуте
Сада постоји мноштво алата и метода за израду прототипова који ће вам помоћи да брзо и лако направите макете веб страница. Можда не знате, али Пхотосхоп ЦЦ је одличан алат за брзо прототипирање. Сваком ревизијом софтвер је добивао више функционалности за дизајнере који желе брзо да направе жичане оквире или прототипове за дељење са клијентом или да направе дизајн спреман за програмера.
Најкорисније функције брзог израде прототипа у Пхотосхоп ЦЦ-у укључују могућност изоловања слојева, подешавање углова помоћу активног алата Роундед Рецтангле и копирање ЦСС атрибута из појединачних слојева. А подешавање Цреативе Цлоуд-а такође нуди корисне елементе за сарадњу (овде се претплатите на Адобе Цреативе Цлоуд).
У овом чланку ћемо проћи кроз упутства о томе како да направимо брзи прототип у Пхотосхопу, користећи опсег доступних алата за креирање макете страница за програмере и клијенту.
01. Почните са мрежом
Подесите документ са димензијама екрана за који дизајнирате (паметни телефон, таблет и тако даље). Даље, креирајте мрежу која ће чинити основну структуру - за то је корисно бесплатно проширење ГуидеГуиде. Отворите додатак нагоре, унесите ширину маргине, број колона и ширину олука. Притисните дугме ГГ и добићете мрежу.
02. Дефинисати различите области
У овом тренутку је корисно блокирати кључна подручја изгледа странице. Направите фасциклу за заглавље, подножје, садржај и све остало што вам треба. Добра је идеја дефинисати било која главна подручја дизајна веб локације - почевши од светло сиве кутије која ће их оцртати. Овде сам користио алатку Правоугаоник за цртање подручја заглавља веб странице (1200 к 240 пиксела) и додао наслов.
03. Додајте мало навигације
Сада додајте елементе за навигацију. Да бисте копирали свој тип, одаберите слој и држите Опт/Алт тастер и повуците. Холдинг Смена ограничава поравнање. Прецизно поравнајте слојеве текста тако што ћете одабрати сав текст за навигацију и притиснути дугме Дистрибуирај вертикалне центре на траци са алаткама. Ово вертикално поравнава и равномерно распоређује ваше слојеве, што га чини идеалним за ставке у менију као што је приказано.
04. Заокружите своје правоугаонике
Овде у образац за регистрацију додајемо изглед почетне странице помоћу алата Заобљени правоугаоник. Пхотосхоп ЦЦ има активну функцију заобљених правоугаоника која вам омогућава да подесите полупречник угла свог облика. То значи да се касније можете вратити и променити углове ако то захтева ваш дизајн. Ово може звучати као мања карактеристика, али је врло згодно.
05. Додајте слике
Вреди претворити слике у паметне објекте, јер их то олакшава ажурирање или замену. Правоугаонике чувара места можете користити као векторске маске за држање слика. Или унесите слику као нови слој, дуплирајте маску правоугаоника и повежите је са тим слојем или направите избор из свог правоугаоника и користите Пасте Специал> Пасте Инто.
06. Представите стилове слојева
Стилови слојева су пристојан начин додавања ефеката. Притисните да бисте применили тренутно коришћени стил слоја на други слој у вашем стеку Опт/Алт и превуците икону ФКС на нови слој. Да бисте креирали слој изнад курсора изнад, који се може укључити или искључити, једноставно дуплирајте свој правоугаоник у позадини и групишите овај слој и слој текста у групу слојева.
07. Изолујте своје слојеве
Ово је још једна корисна функција у Пхотосхоп ЦЦ-у ако желите да уредите само неке од својих слојева. Изаберите слојеве које желите да уредите, а затим идите на Селецт> Исолате Лаиерс. Ово вам омогућава да се усредсредите на специфична подручја на којима треба радити, без забуне око осталих слојева који претрпавају ствари.
08. Направите средства за слике
Адобе Генератор је Пхотосхоп ЦЦ функција која вам омогућава да у тренутку креирате сликовне елементе. Идите на Филе> Генерате> Имаге Ассетс. Сада у таблу Слојеви додајте суфикс датотеке као што је .пнг или .јпег да бисте аутоматски извели тај слој у одређену фасциклу. Овде смо то урадили са датотеком икона.
09. Копирајте ЦСС атрибуте
Одлична карактеристика Пхотосхоп ЦЦ-а при креирању ХТМЛ прототипа је способност копирања ЦСС-а слоја. Да уради ово Цтрл + десни клик на потребном слоју и притисните Цопи ЦСС Стиле да бисте додали код у међуспремник. Отворите нови документ у Дреамвеавер, Мусе или Адобе КСД и налепите ЦСС код.
Овај чланак се првобитно појавио у Цомпутер Артс, водећи светски часопис за графичке дизајнере. Претплатите се овде.
