Mammals / Ola Anderson

Detta är bloggen för min enskilda firma Mammals. Den innehåller sådant jag är intresserad av eller vill berätta om.
Teckensnitts storlek: +

Göra snygga layouter i FileMaker

En grej man märker efter 10 år i Filemaker-branshen är att Filemaker-utvecklare verkar ÄLSKA grått. Man ser den ena grå lösningen efter den andra och alla former av färger i Filemaker-lösningar betraktas med misstänksamma blickar. Det är väldans konstigt alltihopa tycker jag. Mig veterligen råder det inte ett skriande överskott på färger i världen så vi strävar efter att ha neutrala färger. Att uttrycka sin personlighet och ge sitt system en personlighet med hjälp färg och form råder det en skriande brist på.

Här är en före och efter-bild:

{rokbox album=|Klart| title=|Detta är FÖRE. |}images/stories/filemaker/tips/snygga_layouter/11_fore.jpg{/rokbox} {rokbox album=|Klart| title=|Detta är EFTER. |}images/stories/filemaker/tips/snygga_layouter/10_efter.jpg{/rokbox} 

Med uppkomsten av Open Source rörelsen så har det inneburit att även webbdesigners väljer att skapa designs med denna form av licens. Det betyder att den är fri att använda och förändra som man vill. Men det fiffiga för Filemaker-utvecklare är dock att en layout som fungerar bra för web ofta lätt kan anpassas till att fungera väl för en Filemaker-databas. Enkelt är det också! Vilket jag hoppas visa i denna artikel.

Klicka på "Fortsätt läs mer..."-knappen nedanför till höger för att läsa resten.

Vad som finns på nätet gratis eller billigt är alltså webbdesign, bilder, ikoner och logotyper. Men även program för att tex redigera bilder. Så man kan alltså lätt få tag i alla de element och den programvara man behöver för att göra en snygg layout i Filemaker med enkla medel. Det är tom gratis! 

I denna artikel tänkte jag visa...

  • Hur man hittar en gratis design
  • Hur man lägger in den design man hittat i en databas i Filemaker i ett par enkla steg.
  • Peka på några resurser för detta på nätet (vi börjar med det) för bilder och program.

Ställen för gratis webdesign

Open Source Web Design (jag har i två lösningar använt tex Miami Sky som användes i Lönespecifikationerna och Dreamy som jag använde i Tidrapportering).
The Open Source Web Design Toolbox: 100 Web Design Template Sources, Tools and Resources

Free template providers

Opendesigns

Open web design

Många flera exempel kan man hitta med hjälp av Google - free web templates.

Ställen för gratis bilder

Flickr Creative Commons Project

Här kan du söka efter bilder som har licensen Attribute, som betyder fri att använda i alla sammanhang (även kommersiellt), bara du anger vem som tagit bilden. Detta kan göras tex med att länka tillbaka till sidan där bilden finns. Som gör på denna site ganska så ofta.

Ställen för billiga bilder och/eller ikoner

iStockphoto.com
StockPhotoMedia.com
fotolia.com
bigstockphoto.com

Sökmotor för ikoner (en del fria använda kommersiellt)

iconfinder.net

Program för redigering av bilder

Förutom bilder behöver du vanligen program för att skapa illustrationer, eller redigera bilder. Här finns några.

Gimp - kallas för en gratis Photoshop. Detta är visserligen att överdriva, men faktiskt inte så mycket.
Inkscape
- kallas på samma sätt för en gratis Illustrator. Det är också att överdriva, men det är förvånansvärt kompetent för att vara gratis.

Hur man gör

Säg att du skapat en ny databas i FileMaker utifrån de in byggda mallarna. Tex ser mallen som heter Kontaktpersoner ut så här:

{rokbox album=|Kontaktpersoner| title=|Kontaktpersoner|}images/stories/filemaker/tips/snygga_layouter/kontaktpersoner_01.jpg{/rokbox}

Som synes är den grå grå grå grå grå.... Sedan har designern blivit helt skogstokig och färgat ett par saker blå. Men han mår enligt uppgift bättre nu och är på där där sortens vilohem där man inte kan slå sig på väggarna då de är klädda med madrasser och där personalen är noga med att ingen patient skall frysa för att de tappat sin tröja, så de sätter på alla patienter en tröja med väldigt långa ärmar man kan knyta bakom ryggen.

Hitta ett template - ladda hem det

Jag hittade dock ett template som heter Earthling Two på siten Open Designs.org. Den är lite stor att göra skärmdump av så jag gjorde tre så man kan se toppen och botten av sidan. Kanske den inte är klassiskt vacker men jag tycker den är rolig och roliga saker gör mig på bättre humör och så vill jag ha det.

{rokbox album=|EarthlingTwo| title=|Toppen|}images/stories/filemaker/tips/snygga_layouter/earthlingtwo.jpg{/rokbox} {rokbox album=|EarthlingTwo| title=|Mitten|}images/stories/filemaker/tips/snygga_layouter/earthlingtwo2.jpg{/rokbox} {rokbox album=|EarthlingTwo| title=|Botten|}images/stories/filemaker/tips/snygga_layouter/earthlingtwo3.jpg{/rokbox}

När man laddat hem zip-arkivet packar man upp det. Allt "godis" vi behöver ligger i mappen som vanligen heter images, som visas i denna bild.

{rokbox album=|Mappen| title=|Mappen|}images/stories/filemaker/tips/snygga_layouter/03_earthlingtwo_folder.jpg{/rokbox}

Öppna dessa bilder och leta rätt på vad som är vad.

Lägg in bilderna i Filemaker

Gå i layout-läge. Gör en ny tom layout att lägga bilderna i. Denna är bara till för att innehålla bilderna så det blir lätt att kopiera och klistra in dem i andra layouter. Kör sätt in bild massa gånger, organisera dina bilder. Så här kan det se ut.

{rokbox album=|Layoutobjekt| title=|Alla objekt inlagda i en layout|}images/stories/filemaker/tips/snygga_layouter/04_layout.jpg{/rokbox}

Om du vill kan du duplicera layouten så att du har kvar ett original som du kan återställa med senare. Jobba sedan i originalet, inte kopian (din backup). (Anledningen är att originallayoutens id kanske redan används i manussteg och sådant. Genom att jobba i den används automatiskt din nya layout utan att du behöver ändra i dessa manus och du har kvar en kopia av originalet). 

{rokbox album=|Duplicera| title=|Dublicera layouten, jobba i originalet.|}images/stories/filemaker/tips/snygga_layouter/01_duplicera_layout.jpg{/rokbox}

Slakta den gamla layouten

Tag bort layoutelement, men inte fält från den gamla layouten. Du kan gruppera de gamla elementen och flytta dem lågt åt sidan till höger.

Vanligen klickar man på ett objekt för att makera det, och sedan trycker man på backspace för att radera. Hittar du låsta objekt låser du först upp dem i menyn "Ordna > Lås upp"

Lägg in elementen

Nu kan du kopiera grafiska objekt från layouten som innehåller dem och placera ut dem för att efterlikna webboriginalet.

Notera att du kan sträcka ut element som fungerar som bakgrunder. Det är bara att dra i ankarpunkterna. Håll ner shift så drar du bara vertikalt eller lodrätt.

Notera även att när du dubbelklickar på ett objekt så hittar du ett kryss för "Behåll bildens proportioner". För objekt du sträckt ut så skall detta inte vara ikryssat. På så sätt kan du få något som likar det trick som finns i HTML att en bakgrund kan upprepas så den täcker hela webbläsarens fönster.

{rokbox album=|Proportioner| title=|För utsträckta objekt skall krysset inte vara förkryssat.|}images/stories/filemaker/tips/snygga_layouter/05_proportioner.jpg{/rokbox}

Dessa två kommandon är också väldans bra, att lägga objekt underst och att låsa dem:

{rokbox album=|Ordna| title=|Lägg objektet underst.|}images/stories/filemaker/tips/snygga_layouter/06_ordna_lagg_underst.jpg{/rokbox} {rokbox album=|Ordna| title=|Lås fast objektet.|}images/stories/filemaker/tips/snygga_layouter/07_las.jpg{/rokbox}

Objekt kan även behöva beskäras eller skalas om. För detta kan du använda tex Förhandsvisning (Medföljer Mac OS X) eller Gimp som finns för Mac och PC. Så här kan det se ut i Förhandsvisning när jag kopierar en mindre del av huvudet.

{rokbox album=|Beskar| title=|Markera och kopiera i Förhandsvisning.|}images/stories/filemaker/tips/snygga_layouter/08_beskar.jpg{/rokbox}

Sedan finns det ett gäng tricks till, tex att använda justeringspaletten för att lägga objekt kant i kant. Man kan också både beskära objekt för att få färgnyansterna att passa överens, så man inte ser kanterna på objekt som ligger ovanpå varandra. Man kan också duplicera bakgrundsbilder istället för att sträcka ut dem, sedan gruppera dem och lägga dem underst och avsluta med att låsa. Det finns mera sådant. :)

Ett trick till: Att göra skärmdumpar från den webbläsaren är förstås ett annat trick.

Så här kan det se ut när jag är klar med huvudet. Det består av ett upprepat layoutobjekt (den blå stolpen) som beskurits lite inuti Filemaker, sedan lagts in om och om igen, sedan grupperats, lagt underst och sedan låsts.

{rokbox album=|Huvudet| title=|Huvudet.|}images/stories/filemaker/tips/snygga_layouter/09_huvud_klart.jpg{/rokbox}

Sedan jobbade jag vidare på så vis att jag gjorde flikobjektet transparent och även utan linje och lade det ovanpå de tre vita rektanglar med grå övertoning som utgör flikarna.

I det här fallet valde jag att inte att duplicera layouten tre gånger för att kunna få det att se ut exakt som i webbläsaren i vilken den aktiva fliken blir mörkbrun. Vill man så går det även att göra det med just flera layouter som ser lika ut, förutom just vad som ligger i dem. Men det tar längre tid att bygga.

Jag har sedan inte riktigt följt typsnitten från webbsidan, men det är förstås detaljer. Man kan slipa på det ganska länge.

Här är avslutningsvis en före och en efter bild. Vad tycks? Bättre? Sämre? Helt fantastiskt och värt någon form av Nobelpris?

{rokbox album=|Klart| title=|Detta är EFTER. |}images/stories/filemaker/tips/snygga_layouter/10_efter.jpg{/rokbox} {rokbox album=|Klart| title=|Detta är FÖRE. |}images/stories/filemaker/tips/snygga_layouter/11_fore.jpg{/rokbox}

Nu måste jag visst avbryta... det är några män här med en varm och gosig tröja med väldans långa armar...

Här är databasen! Klicka på ikonen för att ladda hem databasen som ett zip-arkiv.

Filemaker Ladda ner Kontaktpersoner.fp7.zip

/ Ola Andersson, Mammals

 

Att skicka individuella meddelanden via email i Fi...
Hur man bygger siter idag - enklare än någonsin!
 

Kommentarer

Kommentarer saknas