Innhold
I en tidligere artikkel - som du kan lese her - forklarte jeg det grunnleggende om å sette opp Photoshop CC og Edge Reflow CC for å importere Photoshop-oppsett til Edge Reflow. La oss nå gå videre og lage et levende, pustende nettsted.
For å få fart på Edge Reflow, last ned denne PSD-malfilen og Reflow-filen. Disse vil hjelpe deg å se hvordan Photoshop og Edge Reflow fungerer sammen.
Når du bygger et responsivt design, er det viktig å lage et nettsted som vises riktig på skrivebordet, nettbrettet og mobilen. To store skyldige som kan forårsake problemer er bilder og tekst. Bilder trenger ikke bare å vises riktig; de trenger å laste raskt. For å sikre at det skjer, anbefales det at du bruker forskjellige bildestørrelser for de forskjellige enhetene. Et annet bekymringspunkt er skrifttyper som må være tydelige på alle enheter.
En måte å håndtere dette problemet på er å starte oppsettet ditt ved å bygge mobilgrensesnittet først. Derfra er det mye lettere å skalere opp. Som utgangspunkt er en 400 piksler bred logo for en mobil enhet et godt sted å begynne.
Når du bygger et design for Edge Reflow, er klar organisering viktig, ellers kan det føre til layoutproblemer. Som et eksempel blir alle lag av en gitt type plassert i mapper og navngitt med .GIF- og .webp-utvidelser. Oppsettet må også bygges ved hjelp av retningslinjer for å sikre presis plassering av bildeelementer og tekst.
Her er et delvis skjermbilde av lagorganisasjonen.
Dette er oppsettet jeg opprettet i Photoshop med mange retningslinjer for å sikre riktig plassering av bilde- og tekstelementene. Navigasjonsbakgrunnen og bunnteksten ble opprettet ved hjelp av graderinger på et individuelt lag med samsvarende type for hvert lag.
Når du er fornøyd med oppsettet ditt, må du eksportere det til Edge Reflow. Det første trinnet er å gå til File: Generate: Image Assets. Dette skaper bildemidlene for Edge Reflow-prosjektet. Gå deretter til Fil: Generer: Edge Reflow Project. Nå er du klar til å åpne filen i Edge Reflow.
Her er oppsettet i Edge Reflow. Som du ser, stemte det ikke med det jeg opprettet i Photoshop.
Etter å ha tenkt på det, skjønte jeg raskt en grunn til det. En del av bildet strakte seg utover oppsettet ovenfor, og det ble ikke beskåret riktig. I Photoshop eksporterte Generator-pluginet hele bildet, ikke bare den beskårne delen som jeg hadde forventet. Sluttresultatet skapte layoutproblemer, som jeg trengte å fikse i Photoshop.
Når jeg løste bildeproblemet i Photoshop og sørget for at alle filene ble navngitt riktig, opprettet jeg et nytt Reflow-prosjekt, som du ser nedenfor. Det er fortsatt ikke perfekt, men mye nærmere den opprinnelige layouten min.
Som du kan se, er det relativt enkelt å begynne å omplassere bilde- og tekstelementene. Når designen på skrivebordet er fullført, kan du begynne å endre utseendet på nettbrett og mobile enheter.
7 topp tips
Når du bygger en Photoshop-fil for Edge Reflow, er det noen ting du trenger å vite:
- Alle bildekomponentene må være i størrelse slik at de passer til oppsettet. Hvis beskjæring er nødvendig, bør det skje før du plasserer bildene i designet. Dette er spesielt viktig når du arbeider med lag.
- Hvis et område er skjult eller utenfor rammen slik bildet var i layoutet mitt ovenfor, kan det ødelegge eller forvride designet ditt.
- Alle bildeelementer må ha en .webp-, .GIF- eller .PNG-utvidelse. Hvis ikke, vil ikke elementene bli inkludert i eiendomsmappen.
- All tekst i Reflow-filen er redigerbar HTML.
- For å øke hastigheten på arbeidsflyten din i Edge Reflow, er det en god ide å lære hurtigtaster. Du kan finne informasjon om disse ved å klikke på Hjelp: Edge Reflow Shortcuts.
- Mens du kan flytte designelementene visuelt, er det bedre å bruke numerisk oppføring for presis plassering av alle elementene. Dette vil bidra til å redusere skjermproblemer når du forhåndsviser i en nettleser.
- Du kan også bruke Edge Reflow selv om du bare jobber med bilder. Du vil navngi hvert bilde med riktig bildeutvidelse (for eksempel .webp, .PNG, .GIF). Du kan legge til disse utvidelsene i lag, grupper eller smarte objekter. Når prosjektet ditt er fullført i Photoshop, kan du importere hele filen til Edge Reflow.
Nye fremskritt innen Edge Reflow
En av de nye fremskrittene innen Edge Reflow er Shiny Web Features. Foreløpig støttes ikke disse av alle nettlesere, så det anbefales at du bruker dem med forsiktighet. For å aktivere dem, klikk på View: Shiny Web Features.
Med CSS-filtre kan du legge til tekst- og bildeeffekter i designet ditt. Noen av valgene dine er: Uklarhet, kontrast, gråtoner, fargetone, rotering og mer.
Med CSS Regions kan du gjøre alt innhold "flytbart" på tvers av designet ditt. For å gjøre det, høyreklikk på en rute for å gjøre den til en region. For øyeblikket er CSS Regions tilgjengelig i Safari 6.1+ og iOS7 Safari. Den vil snart være tilgjengelig i andre nettlesere.
Konklusjon
Som du kan se, er det relativt greit å lage et oppsett i Photoshop og deretter eksportere det oppsettet til Edge Reflow for videre redigering. Når prosjektet ditt er ferdig, kan du kopiere HTML og CSS til Dreamweaver eller en annen HTML-editor for ytterligere forbedring.
Ikke gå glipp av Photoshop Live!
Hvis du bruker Photoshop i arbeidet ditt, vil du ikke gå glipp av vårt eget Photoshop Live-arrangement i Brighton 18.-19. Juli. Fredag 18. blir kuratert av Computer Arts og Creative Bloq for kreative fagpersoner, med noen av de største navnene innen design som holder foredrag. Lørdag 19. juli blir kuratert av Practical Photoshop for digital kunst med fotografering. Du finner mer informasjon her.
Ord: Nathan Segal
