Turinys
Prieš keletą mėnesių „Adobe“ įvyko didelis progresas su savo reaguojančiu interneto dizaino įrankiu „Edge Reflow CC“. Tai buvo sukurtas papildinys „Generator“, kuris susieja „Photoshop“ (štai, kaip atsisiųsti „Photoshop“) su „Edge Reflow“ ir leidžia greitai eksportuoti savo žiniatinklio maketą „Photoshop“ tiesiai į „Edge Reflow“, nereikia koduoti.
Anksčiau, jei dizaineris norėjo sukurti interneto maketą, jis turėjo sukurti maketą, suskirstyti jį į atskirus komponentus ir perkelti juos į interneto dizaino programą. Tam prireiktų daug laiko.
„Generator“ papildinys supaprastina šį procesą.
Kaip tai padaryti
Pirmas dalykas, kurį turite padaryti, yra atsisiųsti „Photoshop CC“, tada atsisiųsti ir įdiegti „Edge Reflow CC“. Taip siekiama įsitikinti, kad „Generator“ papildinys veikia tinkamai.
Jei taip nėra, atsisiųskite „Generator“ papildinį ir įdiekite jį tiesiogiai. Tai turėtų išspręsti visas ryšio problemas.
Tada eikite į Redaguoti: Nuostatos: Papildiniai. Skyriuje Generatorius spustelėkite žymės langelį Įgalinti generatorių ir Gerai, kad išsaugotumėte nustatymą.
Kitas dalykas, kurį reikia žinoti, naudojant „Generator“ yra tai, kad jis yra specifinis failui, o tai reiškia, kad jis turi būti įjungtas kiekvienam failui.
Taip yra todėl, kad galbūt nenorite, kad ši funkcija būtų įjungta kiekviename projekte.
Norėdami įjungti „Generator“ konkrečiam failui, spustelėkite Failas: Generuoti: Vaizdo turtas.
Įgalinus „Image Assets“, failų kataloge bus sukurtas aplankas „BracketsIO-resources“, kaip parodyta čia:
Kai atidarysime aplanką „BracketsIO-resources“, pamatysite visus šio projekto vaizdo išteklius, kurie buvo automatiškai sugeneruoti šiam projektui.
Įdomi dalis yra tai, kaip buvo sukurti šie failai. Norėdami gauti šį atsakymą, eikite į skydą Sluoksniai.
Atkreipkite dėmesį, kad tinklelio aplankas atidarytas. Pirmiau pažymėtoje srityje pamatysite, kad keli sluoksniai buvo pavadinti .webp plėtiniu. Tai yra „Generator“ funkcijos dalis.
Įgalinus vaizdo išteklius, ištekliai sukuriami. Negana to, jei pakeisite kurį nors iš sluoksnių, tas pakeitimas bus nedelsiant atnaujintas išteklių aplanke.
Kitas etapas, kai būsite patenkinti savo maketo projektu, yra sukurti „Edge Reflow“ projektą. Norėdami tai padaryti, spustelėkite File: Generate: Edge Reflow Project.
Sukuriamas aplankas, kuriame yra visi „Edge Relow“ ištekliai, kuriuos galėsite atidaryti naudodami „Edge Reflow“.
Tada paleiskite „Edge Reflow“. Atkreipkite dėmesį į piktogramą „Photoshop CC Connect“, esančią viršutiniame dešiniajame ekrano kampe. Spustelėkite jį.
Tai atvers dialogo langą. Spustelėkite mygtuką „Photoshop Sync“ apatiniame kairiajame kampe, kad sinchronizuotumėte „Edge Reflow“ su „Photoshop“.
Naudodamiesi „Photoshop CC Connect“ skydeliu, galite importuoti maketą į „Edge Reflow“ su visa savo projekto CSS.
Kaip minėta anksčiau, jei atliksite pradinio „Photoshop“ failo pakeitimus, šie pakeitimai bus atnaujinti išteklių aplanke ir juos bus galima peržiūrėti „Edge Reflow“.
„Edge Reflow“ patarimai
Svarbu suvokti, kad visas „Edge Reflow“ failo tekstas yra redaguojamas HTML. Kai importuosite projektą į „Reflow“, prireikus galėsite sukurti reaguojantį išdėstymą su pertraukimo taškais.
Baigę išdėstymą, galite išskleisti HTML ir CSS ir perkelti visą projektą į HTML programą, pvz., „Dreamweaver“, kad užbaigtumėte projektavimo procesą. Projektavimo proceso metu taip pat galėtumėte pasidalinti projektu su kitais profesionalais.
Iš esmės „Edge Reflow“ yra prototipų kūrimo įrankis, kuriame galite greitai ir lengvai eksperimentuoti su skirtingais dizaino išdėstymais.
Jei kuriate svetainę, kurioje yra keli puslapiai, galite importuoti kiekvieną to dizaino puslapį į „Reflow“ naudodami skydą „Photoshop CC Connect“. Pirmiausia atidarykite „Photoshop“ puslapį, tada spustelėkite „Sukurti naują puslapį“, esantį „Edge Reflow“, ir ta projekto dalis bus importuota.
Taip pat galite pasinaudoti šiuo dizaino ryšiu, net jei dirbate tik su vaizdais. Kiekvieną vaizdą pavadintumėte atitinkamu vaizdo plėtiniu (pvz., .webp, .PNG, .GIF). Šiuos plėtinius galite pridėti prie sluoksnių, grupių ar išmaniųjų objektų. Kai jūsų projektas bus baigtas „Photoshop“, galite importuoti visą failą į „Edge Reflow“.
Be „Photoshop“, dizaineriai taip pat gali naudoti „Fireworks“ ir „Illustrator CC“. „Edge Reflow“ taip pat integruota su „Edge Inspect“ ir „Edge Web“ šriftais.
Išvada
Tiltas tarp „Photoshop“ ir „Reflow“ suteikia dizaineriams puikių naujų įrankių ir išsprendžia daugybę dizaino iššūkių. Tai pašalina poreikį atskirti vaizdus ir eksportuoti gabalus į HTML dizaino programą. Žinoma, jis nėra tobulas, tačiau efektyviai ir greitai atlieka tą darbą, kuriam jis skirtas.
Norint paspartinti „Reflow“ naudingumą, verta atsisiųsti kai kuriuos projekto failus ir juos naudoti, kad pamatytumėte, kaip veikia procesas. Jums reikės PSD šablono failo ir užpildyto „Reflow“ failo.
Žodžiai: Natanas Segalas
