+ fler guider ×
Bli medlem
Inloggad som ...
Inloggningstid: ??

CategoryWebdesign

Ny spelväljare/guideväljare lanserad

Vi har pratat om det tidigare och haft planerna på det länge, men så plötsligt fick jag lite tid över och kunde bygga och färdigställa vår nya guideväljare (en slags karta med alla FF-spelens logos, som man kunde klicka på för att komma till det spelets guide/sajt).

I många år låg denna guideväljare som en del på nyhetssajten, på /games.aspx. Inte så logiskt eller enkelt att komma ihåg. Mer logiskt var ju så klart att ha den som en helt egen sida, och i “root” på vår nya fina femåriga guide-server, på guide.ffuniverse.nu/. Men där hade vi lagt upp vår blogg. Efter många om och men så fick vi den flyttad, och då öppnade sig möjligheterna för att skapa vår nya guideväljare.

Ny design

Den har en enkel design. En lätt svag gråblå färg i bakgrunden som tonas ut i nästan vitt med en gradient. Självklart helt gjort med CSS.

background-color: #f1f3f5; /* Måla hela sajten i denna färg */
background-image: linear-gradient(
    to bottom, /* Skapa en gradient från toppen till botten */
    #c9ced7 0px, /* Första färgen är denna, rita den fram till nästa färg (totalt 1 pixel, för att ge en liten "kant"-effekt) */
    #adb5c2 1px, /* Nästa färg kommer redan efter 1 pixel, detta är starten på gradient */
    #f1f3f5 131px /* Gör en gradient mellan förra färgen och denna på en längd av 130 pixlar */
);

Detta är kopierat från guidernas egna WordPress-theme så att man ska känna igen sig. Alla logos känner ni kanske också igen stilen på, det är också samma stil som på guiderna. En tunn vit ram runt bilden, med skugga bakom. Flera logos vi inte hade från förut var tvungna att skapas, men det var en relativt enkel jobb eftersom vi har Photoshop-mallar för det mesta av våra nya sajter.

Grid

Alla logos läggs upp i rader, tre per rad på en dator med stor skärm, och en per rad på mobil. Detta mobilstöd är också helt nytt, en liten bonus. För responsiv design använder vi ett tunnt och enkelt CSS-ramverk som heter Simple Grid, det påminner om Bootstrap men är enbart för att skapa “rutnät” på mobil och PC. Stora fördelen är att det är en fil som bara är 1 kB stor, istället för nära 100 kB på Bootstrap.

<div class="row">
  <div class="col-6 col-12-sm">
    Full rad på mobil, halv rad på PC.
  </div>
</div>

Flexbox

Eftersom alla logos ser väldigt olika ut – jämför till exempel FF2 och FF12! – så måste vi se till att alla “rutor” de placeras i blir lika höga. Detta är något som tidigare var väldigt svårt med CSS, men fick till och med ibland gå tillbaka till att använda tabeller för det, något som är semantiskt inkorrekt. Men för några år sedan kom CSS Flexbox, och nu kan man använda det fullt ut.

Man har först en box som omslutar alla småboxar, denna huvudbox ges flex-stöd.

display: flex;

Och så när jag lägger detta på en <ol> lista så förstår webbläsaren att denna är i flex-läge och ska anpassa alla innehållande boxar efter varandra. Men vad händer när huvudboxen blir för stor för att alla boxar i den ska få plats? Då säger man bara att de ska puttas ner på nästa rad med denna:

flex-wrap: wrap;

Sen ska man lägga display: flex; också på varje innehållsbox. Då kommer alla boxar (alla <li> element) bli lika breda och höga oavsett storlek på skärmen eller innehållet. Superlätt! Inte en enda linje JavaScript behövs (som förut).

En sista fin detalj är att om man vill centrera alla logos horisontalt, men vertikalt placera dem på botten, så är det också sjukt lätt nu jämfört med förut. Dessa två linjer ordar det hela.

li {
  align-items: flex-end; /* Vertikalt */
  justify-content: center; /* Horisontalt */
}

Nu är allt placerat som det ska.

Grupper

För att förenkla för besökaren så delar vi in – precis som förut – alla spelen i tre olika grupper. Den numrerade originalserien av Final Fantasy (FF7, FF8, men inte FFX-2 t.ex.), alla andra FF-spel, och så resten av Square Enix-spelen (som ej hör till FF-serien, som till exempel Chrono Trigger).

Footer

Längst ner på sidan ligger några snabblänkar till FFUs olika större sajter, samt avslutande länkar med nyttig info, så som cookies. Alla dessa länkar använder sig nu av de nya “dev.” och “om.”-servrarna.

Historik

Som referens har du här en bild på den gamla designen (skulle gissa på 10 år gammal, och inte stöd för mobil). Den kan inte längre nås eftersom jag redan ändrat på alla länkar i TopNav, i footers, och andra ställen på FFU.

Första version av plugin laddar in TopNav

Jag skrev tidigare om att vi bygger på ett litet WordPress-plugin som ska förenkla några delar på FFUs WP-sidor (alla spelguiderna ligger där). Vi har ju flera themes och olika sajter (denna blogg är en av den), och det är mycket kod vi önskar köra på alla dessa. Fram till nu har vi gjort copy+paste på all denna kod, men det är slut nu när vi har ett smidigt plugin alla sajter får använda istället. Detta plugin är nu redo att testas ut live, i sitt första utförande.

Genom att ladda upp och aktivera detta plugin så får en sajt automagiskt FFUs “TopNav” insatt på toppen av sidan (förutsatt att man lagt in en WP-hook för FFU topnav). Och detta är den moderna versionen av TopNav som utvecklades med vårt FFU-Theme 1.5 för nåt år sen. Med massa förbättringar under ytan! Bättre HTML5-kod, CSS3 och JavaScript som hämtar JSON med data från Windows-servern (för att kunna se om du är inloggad på communityn eller ej). Rätt komplicerade saker och väldigt mycket att tänka på för att få allt detta till. Bara det att hämta JSON från Windows-servern krävde massor av jobb på grund av CORS – Cross-site origin (man får egentligen inte hämta filer från andra servrar, så lite nya regler behövdes programmeras).

Detta är nu tagit steget längre, TopNav som nu hämtas in ser likadan ut som förut- men går du ner på surfplatta eller mobil så får du nu en helt ny design och upplevelse! Vi har en drastiskt förbättrad TopNav för små skärmar. FFUs logo visas och en knapp för att glida in en meny med alla våra guider och spelsajter. Du kan enkelt scrolla runt i denna meny, eller stänga den. Sista nyheterna ser man också hela tiden. Ju mindre skärmyta man har, ju mer plockar vi bort från TopNav, utan att ta bort viktig funktionalitet. Dessutom droppade jag helt jQuery och skrev om all JavaScript (200 linjer) till vanlig äkta “vanilla” JavaScript.

Såhär ser TopNav nu ut, med finare blå bakgrundsfärg (förut tråkigt vit). Logo och stor tydlig knapp för att visa alla våra andra sajter. Skulle du ha ännu mindre skärm så kapar vi bort “niverse”-delen av logons text.

Såhär ser det ut på läsplattor. Har man större skärm får man den gamla vanliga TopNaven.

När man klickar på “+ fler guider” så animerar vi snyggt in menyn från höger sida. Självklart med CSS transitions. Scrolla ner för att se hela listan. Eller stäng den med X uppe till höger.

Längst ner i menyn ligger en mer tydlig “Fler spel”-länk (vi har inte alla våra guider i TopNav). Och underst ligger våra andra sajter. Lätt att komma sig överallt, även på mobil!

Hoppas detta gillas och förbättrar upplevelsen för våra besökare! Detta är bara ett litet smakprov, ett öppet beta-test. Fler förbättringar på TopNav, och vårt plugin, är på väg! Det är trots allt FFUs 20:e år på nätet i år!

PS. Det är bara de sidor vi har på WordPress som får denna nya TopNav. Så communityn, nyhetssajterna, med flera, får den inte.

TopNav 4, oktober-edition

För cirka en månad sedan ändrade jag sist på TopNav. Och några nya idéer har dykt upp. Men också har flera saker fått smälta in lite mer och jag har kunnat fatta beslut som inte kändes rätt precis då jag satt med designen.

2015-10-04

Den nya logon jag testade har tagits bort, återgick till den förra, men gjorde den större. Den kändes mindre stökig, och lite gladare, mindre stel. På nåt sätt.

Dessutom så har Fat Chocobo fått komma in i värmen. Jag hade tänkt att han ska ligga bakom alla nyheter och uppdateringar (man ska kunna “kryssa ner” de man läst för att få upp nästa, upp till 3-5 stycken) och visas först då allt nytt har lästs. Men varför inte ta fram honom och alltid visa honom där uppe? Tycker han passar fint in. Rutan i sig är också lite större, inverterad gradient, och tydligare uppdelad text.

Community-rutan har fått en liten detalj ändrad. Eller två faktiskt. Knappen har gått från svag 3D-effekt till mer modern platt gradient, men i samma skarpa blå färg som förut. Rubriken gick från “Community” till “FF Community” och centrerades i fetstil ovanför knappen.

Sajtlänkarna (“Mer på FFU” och “Nyheter”) har fått permanent bakgrundsfärg för att de ska synas bättre, man missar dem så lätt annars.

“Fler Spelguider”-menyn har designats om till att likna mer på “Mer på FFU”-menyn. Ingen pratbubble-pil i toppen, bara en ren rundad ruta, med lista på sajter. I toppen en rubrik som beskriver menyn, med ett skarpt blått streck under. För att dela upp sajter i sektioner så används ett smalare ljusgrått streck än tidigare.

Här är också ett exempel på de fyra olika faser Community-menyn ska kunna vara i. Menyn kan vara minimerad eller expanderad. I designexemplet ovan är den minimerad, och användaren är inte inloggad. I följande exempel, från vänster till höger, har menyn klickats på (expanderats) så att man kan logga in. Sen är menyn minimerad men man är inloggad, och på sista exemplet är man inloggad och menyn är expanderad och visar några extra länkar. Knappar och länkar i dessa exempel är inte helt färdiga än.

2015-10-04_stages

Jag gillar kontrasterna med de mörka bakgrunderna med ljus text, och de nya skarpa färgerna av blått och orange för att kalla på uppmärksamhet (länkar, knappar), blandat med väldigt ljusa bakgrunder med svart text på.

TopNav, uppdatering 10 september

Ytterligare en runda med TopNav. Just nu småskruvar jag mest på detaljer sedan sist.

Gick in i Community-menyerna och jobbade mer med dem. Gjorde knapparna för att logga in skarpare blå, så att de syns ännu bättre (och piggar upp sajten med mer färger). Och så gjorde jag så att all text blir grå och länkar orange med ett ljusare streck under. Jag testar nu två varianter av fält att skriva i, ett vitt med inre skugga och ett som bara är ljusgrått utan effekter. Tror jag gillar det sistnämnda bäst. Också nytt är den lite mörkare bakgrundsfärgen på slutet som ramar in sekundär info, här länk till att bli medlem om man inte är det.

comlist

Det är också ändrat så att skuggan blir mer enhetlig. Istället för en tonande skugga så är där nu en fem pixlar tjock skugga. En genomskinlig ram helt enkelt. Det används på andra elementer i TopNav i samma “styrka” så det matchar in lite bättre. Även om det just här ser lite grötigt ut, men ska jobba på det.

Testar också en variant av logon som skriver ut hela sajtens namn, och Final Fantasy för att betona det. Jag gillar tanken bakom detta, att fokusera hårdare på Final Fantasy. Men det ser lite rörigt ut med de romerska siffrorna nedanför som nästan smälter ihop med logon. Detta upplevde jag inte på den förra som var mindre och använde färger på ett annat sätt.

Även newstickern är lite ändrad. Den har fått en svag toning jag testar, får se om den får överleva. Och så har det lagts till en “Se fler xxx” i botten så att man kan komma vidare och få en bättre översikt om man önskar av uppdateringar, nyheter, eller vad det nu skrivs ut här uppe. Tanken är att klickar man på krysset ovanför så faller rutan ner och en ny glider in ovanifrån med näst sista händelsen. Detta fortsätter upp till 3-5 olika saker och efter det försvinner rutan helt, men något bör läggas under … kanske Fat Chocobo?

Så sist en skiss med nya “Mer på FFU”-menyn utvecklad. Den påminner en del om “Fler spelguider”-menyn, medvetet. Men utan pilen och en smalare horisontell linje. Denna ska lägga sig direkt över länken “Mer på FFU” när man klickar/svävar och bara kort och gott lista alla hörn och kanter på FFU.

sitelistUtöver det, inga fler ändringar än en liten skugga ned från TopNav på header-bilder på alla sajter. Och till vänster testar jag eventuellt ny bakgrund bakom headers (även om det inte tillhör TopNav-projektet) med grå bakgrund. Tänker mig att kanske använda samma stil i kommande omdesign av footern på FFU (som ska bli lite enklare än den är nu).

TopNav4 – tidig september-version

Såhär såg “TopNav4” ut för lite över en vecka sen:
topnav-skiss-(2015-08-25)Nu har jag gått en runda till på den. En av de största skillnaderna är kanske att den nu fått bli ännu lite högre. Det överst partiet (det med blå bakgrund) har växt från 90 pixlars höjd till 120 pixlar. Det kändes bara för trångt där uppe, och jag behövde mer utrymme oavsett.

Detta är så den ser ut just nu:

topnav-skiss-(2015-09-04)Fokus är att få menyn med alla FF-spel så ren som möjligt. Nu är det bara spel från originalserien där. Sedan en liten skiljelinje och så spinoffs, just nu bara FFX-2. Efter det en “Fler spelguider”-meny som listar alla andra guider vi har (det är väldigt många).

Sociala länkarmenyn fick flytta upp igen, men nu lite ändrad. Den är nu mer ren, ingen text, bara ikoner, och mer luft. Samtidigt la jag in kära Cactuar där. Det är dels än fin färgklick, en känd FF-symbol, och något som drar ögonen tills sig. Den får nya besökare att lättare upptäcka Communityn, de sociala länkarna, och “Fler spelguider”-menyn.

Med allt detta extra utrymme kunde jag ge mer luft runt logon, sajtlänkarna, nyhetsboxen, och under communityn (men där klämde jag nu in social-menyn). Sajtlänkarna har också ändrats lite. Det står nu bara “Nyheter”, kort och gott. Och under “Mer på FFU” med en pil. Detta är inte designat än men jag tänker mig en liten drop down där jag kan lista länkar till FAQ, extra länk till Communityns startsida, Sök, Blogg, och liknande. Det är en del som kan behöva få plats där uppe men som bara grötar till det om det ska skrivas ut, så det får lämpas in i en utfällbar meny helt enkelt.

Bytte också “sajtbakgrund” under TopNav för att testa med en ljus sajt istället och se hur det passar. Tycker det funkar riktigt bra. Här är ett exempel med “Fler spelguider”-menyn utfälld (den har jag också jobbat en del på):

topnav-skiss-(2015-09-04)2

Sista ändringar på TopNav4

Nu har jag sovit på saken flera nätter och sen återkommit till designutkastet jag gjorde till en framtida ny TopNav. Och flera saker har fått ändrats. Det gav ett lite för grötigt intryck och det känns inte bra.

För att friska upp era minnen så såg det ut såhär förra veckan:

topnav-skiss-(2015-08-19)

Flera detaljer i denna skiss är så klart bara test, så det är svårt att komma undan denna gröt. Men en del kan göras, och har nu gjorts. Detta är det senaste utkastet, en med “Fler spelguider”-menyn utvecklad och en utan.

topnav-skiss-(2015-08-25)---expanded topnav-skiss-(2015-08-25)

Den grå bakgrunden runt bilden på Noctis (och hela bilden med Noctis) är bara platshållare för mig för att jag ska se hur brett jag designar i förhållande till hur bred sajten är idag. Likaså de pixelmått jag lagt nere i högra hörnet.

Den största sak jag tagit tag i nu är “menyn” med sociala media-knappar/länkar. Den gjorde allt grötigt där under Community-menyn (som expanderar vid klick och visar login-formuläret). Den ligger nu till höger på sidan av menyn med alla spelguider. Inte helt perfekt, men i vartfall bättre. Föredrar att kunna ha en beskrivande text till alla ikoner, men det får inte plats nu, men vi får se om jag kommer på nån ny bätte lösning.

Dessutom böt jag plats på länkarna till andra avdelningar på FFU (startsidan med spelnyheter, samt vår FAQ med supportfunktion) och den så kallade “News tickern”. Det känns bättre att ha sajtlänkarna närmare logon, samtidigt får nyhets-tickern en väldigt central placering, och det känns som det funkar mycket bättre än jag trodde först.

Annars så har dessa saker ändrats:

  • Sub-titel till FFU är nu skrivet i vitt.
  • Länkarna till “Community” och “Guider” är borttagna, möjligt de ska visas till höger om de andra sajtlänkarna när man har väldigt stor skärm.
  • Nyhetstickern visar en uppdatering från en av guide-sajterna.
  • Ljusare skugga (och svart istället för blå) på “Fler spelguider”-dropdownen, dessutom är den mindre 3D och skuggig.
  • I Community-boxen så är all text nu grå och länkar orange, gillade hur det funkade med den mörkgrå bakgrunden.
  • Community-boxen är nu lite mörkare, och den övre färgade ramen lite ljusare.
  • Mer luft generellt i Community-boxen (som också blivit större).
  • Vertikal skiljelinje mellan alla FF-spel och de andra länkarna.
  • FFXVI borttaget från spelmenyn, det var ändå bara en test. När det spelet blir aktuellt så får “Bravely Default” och “Chrono Trigger” (allt som inte tillhör grundserien i FF-serien) stryka på foten. Hoppas bygga automatik på detta.

Ny TopNav lämnar skiss-stadiet

Jag skissar alltid med vanlig blyerts, eller bläckpenna, på helt vanligt papper när jag håller på med webbdesign. Idéer föds på sömnlösa nätter, oftast. De kladdas sen ner på papper, i en oerhörd mängd olika varianter. Där testar jag vad som känns som att det funkar.

Efter mycket skissande över lång tid går jag till Photoshop och börjar sätta upp det hela. Ibland skippas detta steg om det går att designa allt direkt med HTML och CSS istället. I Photoshop så får jag fram saker från skisserna som kanske bara varit med dem som små handskrivna kommentarer – detaljer, färger, med mera. Här märker jag hur saker får plats, luft, och liknande.

Även i Photoshop så går jag över min “skiss”/design flera gånger och gör om saker. Det gäller att inte vara rädd att bara kasta något man inte är helt nöjd med. Bättre det och börja om än att fastna i ett spår som bara är halvbra.

Vår TopNav, navigationsmenyn i topp på alla FFUs sidor med alla FF-spelen, får sig nu en runda. Det blir i så fall den fjärde i ordningen. Här är tre skärmdumpar från designprocessen än så länge. Det återstår så klart flera rundor till. Se hur designen ändras dag för dag.

Det ligger extremt många tankar bakom rätt många av detaljerna i designen. Kanske förklarar mer i en kommande bloggpost. Om inte annat då det börjar närma sig lansering (lång lång väg kvar än, räkna med upp emot ett år).

För 3 dagar sen:

Första rundan i Photoshop. Ett snabbt och litet rörigt upplägg på vad jag hade tänkt få plats med (märkte fort att det blev trångt). Här testar jag också en hel del idéer och känner in om de funkar eller ej. Många såna “försök” tas bort under designprocessen.

topnav-skiss-(2015-08-16)

För 1 dag sen:

Testar en meny för sociala media och har jobbat lite mer på en förbättrad Community-meny (mer lik mina pappersskisser). Fortfarande inte nöjd. Flera saker känns lite fel.

topnav-skiss-(2015-08-18)

Idag:

Gjort en pixlad backgrundsbild, som varit tanken ända sen skisserna. Förbättrat och jobbat mer på Community-menyn (alla delar av den: inloggad och utloggad). Dessutom gjort menyn med sociala länkar mindre synlig, men fortfarande inte nöjd med den. Ändra också “nyhets-tickern” mer röd-gul än grön-gul. Pilen ned på vald sajt är mindre spetsig. Och jag började snabbskissa på en dropdown-meny för alla spel som inte får plats i den horisontella menyn … inte direkt nöjd med den heller. Så det blir nog flera ändringar i nästa rundan.

topnav-skiss-(2015-08-19)

Nya vapenlistor

Då jag för lite över två år sedan flyttat färdigt FF7-sajten till vår nya design och nya system så var jag inte helt nöjd med alla sidor. Många sidor hade fått flera förbättringar, men en perfektionist blir aldrig nöjd. Speciellt våra sidor med gamla listor såg väldigt gamla och tråkiga ut, stela. Samtidigt är det lite utmattande jobbigt att sitta i timme efter timme och bara ändra små små saker i texter. Man tröttnar, och man vill bara lansera sajten och gå vidare.

Så jag lanserade sajten. Och istället så har jag lite då och då efter det jobbat med dessa förbättringar. Ett exempel är vår långa sida med information om allas vapen. Där har egentligen allas vapen bara listats i en lång lång lista (lite dumt ja). Nummer ett så är denna lista extremt tråkig. Sen så får inte allt plats, det är sneda linjer, text försvinner, etc. Se nedan.

Screen Shot 2015-07-30 at 14.22.33

Så det jag gjorde var att pröva göra om en sådan tråkig lista till en mer modern tabell med lite bättre struktur och ordning. Det fick bli Clouds vapenlista jag gjorde om. Men det var så tidskrävande (men mest sjukt tråkigt och enformigt jobb) att jag nöjde mig med den. Listan för Clouds vapen såg så ut som detta:

Screen Shot 2015-07-31 at 09.56.43

Detta var till lanseringen. Jag var inte helt säker på om jag ville göra om alla listor till att se ut som den för Cloud. Så jag väntade. Till nu. Flera andra uppdateringar på sajten ledde mig till att komma på en ny idé på upplägg, lite mer som Materia-sidorna där varje materia får sin egen stora rubrik (som kan sökas på mycket lättare) samtidigt som viktig info som “Vart hittar jag detta vapen” får mer fokus och mer plats. I en tabell så har man extremt begränsat med plats att jobba på. Så det ledde mig till att pröva detta upplägg, denna gång på Red XIIIs vapenlista.

Screen Shot 2015-07-30 at 14.22.15

Vad tror ni? Känns Reds upplägg som det bästa? Mer plats för information om vart man köper vapnet, vad det kostar, och framförallt – hur hittar jag detta vapen? Fördelen med en tabell är helt klart att du får överblick på en sekund, men du får väldigt tunt med info. Skulle vi gå för att göra om alla listor till Reds upplägg så skulle nog hela vapen-sidan behöva styckas upp så att alla karaktärer får sin egen undersida, för bättre ordning och för att slippa en sju mil lång sida med text.

Förbättrad meny

Theme 1.5 får nya små förbättringar kontinuerligt. En ganska stor (men osynlig) förbättring jag precis rullat ut är en helt ny meny.

Till vänster på alla sidor har vi en blå fin meny med en liten gradient på, samt vita ramar. Precis som menyerna brukar se ut i Final Fantasy-spelen. För två år sedan då detta theme designades så var stödet för att göra sådana saker (gradienter och skuggor) med CSS inte så bra. Men nu är stödet över 90% av alla webbläsare (inklusive mobil).

Så det jag har gjort är att istället för att ha fullt med extra “div”-taggar i koden, och flera olika bakgrundsbilder till menyn, så är nu koden omskriven till att enbart använda CSS till de fina menyerna. Dessutom kan nu menyerna ha fri höjd, förut var de tvungna att alltid vara minst 180 pixlar höga (pga hur allt var satt upp). Nu kan vi ha en meny med bara en enda länk utan att det är ett jättestort tomrum i botten.

Som en liten bonus så la jag också in så att denna design fick vara kvar på menyerna också på mobil. Tyckte det såg lite trevligare ut än att bara ha den där stora mörkblå bakgrunden med vita länkar på.

HTML5 + CSS3 for the win!

Fokus-mallen

fokus_ff7

Bild från gamla Paint Shop Pro-mallen

På FFUs nyhetssajt har vi något jag kallar för en fokusbild – “Fokus”. Denna skulle jag nu för första gången på många många år uppdatera genom att lägga in en ny bild där. För de flesta tillfällen (men tyvärr inte alla) av sånt här skapade jag mallar i Paint Shop Pro då jag designade sajten. Men jag har inte kvar det programmet längre utan använder uteslutande Photoshop. Så jag fick inte upp den filen som jag använt tidigare. Efter lite Googlande så testade jag lite olika program för att konvertera denna gamla fil (och flera andra), men de funkade inte.

Så det var bara att bita i det sura äpplet och designa allt från början igen. Samma fick jag göra med TopNav då jag skulle ändra i den. Stegen jag genomför är dock rätt identiska.

  1. Finn fram måttet på bilden på FFU
  2. Skapa en tom fil i Photoshop med detta mått
  3. Lägg ett vitt bakgrundslager
  4. Lägg en av bilderna från FFU ovanpå den (som eget lager)

Nu börjar det roliga. Efter det får jag steg för steg med effekter och lager återskapa precis det som syns i den platta JPG-bilden. För detta tillfälle var det flera små textsnuttar. De lägger jag då i ett lager över den platta bilden från FFU. Sen ändrar jag på storlekar, färger, och inställningar tills det ser nästan identiskt ut.

Så upprepar jag detta med andra element, så som skuggor, runda hörn, eller överliggande block med färg. På fokusbilderna har vi en bred horisontell vit linje som spelets titel ligger på. Den får jag stega mig igenom “opacity”-inställningen för att hitta rätt nivå. Sen gör jag samma med de tre lodräta svarta linjerna.

Här är det nu dags att skriva in spelets namn. Och där finner jag att fonten som jag använt förut – Long Tall Sally EEN – inte finns installerad på datorn. Jag har använt just den på all annan FFU-grafik, så jag vill helst ha just den. Googling efter andra FF-fonter visar inte helt lika bra resultat. Men jag finner fort min gamla goda font i mina gamla zip-arkiv. Men nu såg jag till att lägga den på ett smartare ställe på datorn =)

Nu börjar det ta sig. Bara en bild av Bravely Default behövs. Och det finner jag så klart lätt. Den lägger jag en “Shape” över, en fyrkant med rundade hörn. Jag Ctrl-klickar på den i lager-menyn för att kopiera rundningen. Sen skapar jag en Mask på bilden från Bravely Default och baserar den på den markering jag nyss gjort. Nu fick jag automatiskt runda hörn på denna bild. Detta underlättar väldigt nästa gång jag ska göra en likadan bild för då droppar jag bara in den i samma lager och får då automatiskt runda perfekta hörn.

fokus_bravely-default

Slutresultatet med Photoshop

Sist lite “Inner Glow” med svart ljus så hade jag nu en mall i Photoshop som är så gott som identisk med det flera år gamla Paint Shop Pro-originalet.

Nu är jag också duktigare på att spara alla dessa filer som “_TEMPLATE_xxx.psd” i samma mapp som de slutliga filerna sedan ligger. Då hittar jag mallarna mycket lättare.