Självstudier: Hur man lägger upp en webbsida med Adobe Photoshop

Det finns ett stort utbud av verktyg för att designa webbsidor och arbeta på ett helt enkelt och funktionellt sätt utan att ange eller vidröra kod. De är otaliga, föreslagna av ansökningar (Adobe Dreamweaver är ett exempel) eller direkt av onlineplattformar som Wix. Men för en webbdesigner är det viktigt att känna till de manuella procedurerna. HTML5 och CSS är de grundläggande pelarna för layout av webbplatser och målsidor.

Men oftare än du förväntar dig måste du vända dig till applikationer som Indesign eller Adobe Photoshop för att komplettera ditt layoutarbete och ge dem en perfekt finish. Idag kommer vi att se i denna omfattande handledning, hur vi kan lägga upp en webbsida med Adobe Photoshop. I denna första del kommer vi att stanna kvar i det arbete som ska utvecklas från Photoshop, även om vi i framtida delar kommer att se hur vi kan tillämpa detta arbete redan direkt i HTML-kod för att göra det funktionellt.

Börjar med utformningen av vår trådram

Till att börja med layouten och utformningen av en webbsida är det oerhört viktigt att vi börjar med att definiera vilka grundelement som kommer att vara, detta är skelettet. Denna struktur kommer att fungera som ett stöd för att hålla allt innehåll (vare sig text eller multimedia). Genom att definiera varje avsnitt som utgör vår sida kommer vi att kunna arbeta med dem med fullständig noggrannhet och tillhandahålla en visuell design som är så framgångsrik som möjligt.

Det är mycket viktigt att vi tar hänsyn till de dimensioner som vår webbplats kommer att ha, om den kommer att ha en boxad eller fullbredd. En inramad webbsida kommer att finnas i en liten behållare och därför kommer ett utrymme att visas runt den. Tvärtom kommer en fullständig webb att uppta hela skärmen på enheten som återger sidan. Att välja mellan en eller annan metod svarar bara på stilistiska frågor och beror också på behoven hos det projekt som vi arbetar med. Vi kommer att arbeta i det här exemplet med det rutade läget så att det inte tar upp allt utrymme som tillhandahålls av webbläsaren.

För att skapa vår trådram är det första vi måste göra att gå in i Adobe Photoshop-applikationen och inkludera de dimensioner vi vill att vår sida ska ha. I det här exemplet kommer vår sida att vara 1280 pixlar bred. Storleksproblemet kan dock variera beroende på den slutliga destinationen eller den enhet som vi vill återge vår sida på. Det råder ingen tvekan om att för att en webbdesign ska vara funktionell och effektiv måste den vara mottaglig och den måste anpassas till alla enheter på marknaden. Men i det här fallet ska vi arbeta för att skapa en prototyp som vi ska reproducera på en stationär dator. Ändå kommer den responsiva frågan att diskuteras senare, för nu är här en hierarki av skärmdimensioner att arbeta med i detta exempel. Tänk på att i det här fallet gör vi en layout för målsidan i Adobe Photoshop och sedan migrerar den till HTML5 OCH CSS3. Målet med denna lilla övning är att konvertera en design som skapats i Photoshop till en användbar och interaktiv webbdesign som svarar på användarens rörelser.

Mätningar för mobiltelefoner

iPhone 4 och 4S: 320 x 480

iPhone 5 och 5S: 320 x 568

iPhone 6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Tablettmätningar

iPad alla modeller samt iPad Mini: 1024 x 768

Galaxy Tab 2 och 3 (7.0 tum): 600 x 1024

Galaxy Tab 2 och 3 (10.1 tum): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Mätningar för stationära datorer

Små skärmar (används till exempel i netbooks): 1024 x 600

Medium skärmar: 1280 x 720/1280 x 800

Stora skärmar: bredd större än 1400 pixlar, exempelvis 1400 x 900 eller 1600 x 1200.

För att börja distribuera elementen och tilldela sektioner i vår webbmockup är det mycket viktigt att vi tar hänsyn till proportionerna för att säkerställa en läsbar och melodisk finish. Det är viktigt att du använder alternativen för regler och guider som du hittar i toppmenyn Visa. För att arbeta proportionellt och exakt är det bäst att vi arbetar från procent. Vi klickar på visningsmenyn och sedan på alternativet «Ny guide» för att välja uppdelningens modalitet. I det här fallet kommer vi att göra fyra vertikala uppdelningar på 25% och vi tar dem som referens för att placera våra bilder i sidfoten och bilden av vår logotyp i sidhuvudet.

Det finns en kod för att beteckna vart och ett av de områden som kommer att uppta våra områden modell och den funktion som var och en av dem kommer att ha. Till exempel, för att ange det område som en bild kommer att uppta, skapar vi rektanglar med ett slags kors. För att indikera att vi vill inkludera videor i ett visst område kommer vi att inkludera spelsymbolen i vår container. I det här första exemplet ska vi bara arbeta med bilder, i den övre tagningen kan du se det område som logo från vår webbplats.

Detta skulle vara slutresultatet av vår trådram. Som vi kan se är den uppdelad i ett sidhuvud som består av bilden där logotypen kommer att hittas och som kommer att fungera som en länk till hemsidan tillsammans med två flikar, en sökmotor och fyra knappar i sökrutan. Dessutom har vi redan inkluderat ett sidofält som består av en delningsfält och en serie kategorier som kategoriserar vilken typ av innehåll som kommer att finnas på vår webbplats. Ett annat avsnitt med en numrering som innehåller de poster som kommer att finnas på vår webbplats och slutligen en lista med de mest representativa metataggarna eller etiketterna på vår webbplats.

I innehållsområdet, som kommer att definieras av ett avsnitt som kommer att inkludera självhanterligt innehållhittar vi innehållet i våra artiklar. I det här fallet brödsmulor eller brödsmulor (som indikerar den organiska strukturen på vår webbplats, artikelns rubrik, metadata, ett stycke som en texttext, där en bild ingår.

Som sidfot har vi inkluderat fyra bilder som fungerar som en länk till andra delar av vår sida. Här kan vi inkludera logotyper eller andra intressanta avsnitt. Även om det i verkligheten kommer att fungera mer som förfot, eftersom själva sidfoten kommer att gå lite längre ner med användarpolicyn, juridiskt meddelande och upphovsrätt.

När vi har definierat grundstrukturen eller skelettet på vår sida måste vi gå till nästa nivå. Detta kommer att bestå av en korrekt utformning av vart och ett av områdena på vår webbplats. Med andra ord kommer vi att börja "fylla i" vart och ett av dessa områden med det innehåll som äntligen kommer att införas på vår webbplats. Det rekommenderas att vi inte börjar designa dessa element innan vi arbetar med trådramen eftersom det är mycket troligt att om vi gör det i den här ordningen, kommer vi senare att behöva ändra deras proportioner. Vi riskerar att förvränga våra bilder och att behöva göra om utformningen av vart och ett av elementen, vilket antingen blir slöseri med tid eller ett lägre kvalitetsresultat.

I det här fallet kommer designen av vår webbplats att vara extremt enkel. Vi kommer att använda föreskrifter för materialdesigneftersom vi ska använda Googles logotyp för att exemplifiera denna praxis. Jag måste klargöra att syftet med denna handledning är att illustrera den tekniska kunskapen, så det estetiska resultatet i detta fall är irrelevant. Som du ser har vi lite efter lite fyllt utrymmet med alla de områden som vi tidigare har bestämt i vårt schema. Vi gjorde dock en liten modifiering i sista minuten. Som du kanske har märkt har vi minskat storleken på vår logotyp avsevärt och vi har inkluderat en delningslinje i det nedre rubrikområdet som ansluter perfekt till den övre menyn. I det här fallet har vi använt knappar och material från en resursbank. Som designers kan vi designa dem själva (speciellt det här alternativet rekommenderas om vi vill att det ska presentera en mycket liknande tonic som den som presenteras av varumärkets image eller logotyp).

Det är viktigt att vi kommer ihåg att för att lägga fram detta exempel kommer vi att arbeta på två olika nivåer. Å ena sidan kommer vi att arbeta med objekten och å andra sidan utseendet på webbplatsen. Det vill säga å ena sidan i skelettet på vår webbplats och å andra sidan i alla flytande element som detta skelett stöder. Du kommer att märka att det finns områden som inte kommer att sväva alls, till exempel det område som vårt sidofält kommer att uppta, förfoten eller delningsfältet som delar huvudet från kroppen.

Strukturerna 1, 2, 3 och 4 kommer att ingå i bakgrund på vår webbsida, så i själva verket är det inte nödvändigt för oss att exportera som sådana från Adobe Photoshop, även om vi kan göra det är det inte nödvändigt. När det kommer till Platta färger (En av de viktigaste funktionerna i platt design och materialdesign, de kan appliceras perfekt via kod med hjälp av ett CSS-formatmall). Resten av elementen måste dock sparas för senare infogning i vår HTML-kod. I det här lilla diagrammet har vi också reproducerat de områden som hör till bakgrunden på sidan så att vi får en tydlig uppfattning om hur det slutliga utseendet på vår webbplats kommer att bli.

Som du kommer att kunna inse är känslan av att skapa detta schema i Adobe Photoshop att få den verkliga dimensionen för varje element och att klargöra arrangemanget och strukturen för varje element. Naturligtvis har textinnehållet ingen plats i denna fas av processen eftersom det måste vara levereras från vår kodredigerare. Vi måste också påpeka att vi i den här praktiken kommer att arbeta med knappar och statiska element, även om de vanligtvis tillämpas från ramar som Bootstrap eller direkt från Jquery.

När vi väl har skapat vart och ett av elementen som kommer att utgöra vår webbsida är det dags att börja exportera dem och spara dem i bildmappen i HTML-projektmappen. Det är viktigt att du vänjer dig vid export från din trådram, eftersom det är mycket troligt att du kommer att behöva ändra några av de ursprungliga elementen baserat på skelettkonfigurationen. (I detta fall har vi till exempel ändrat storleken på originalknapparna, logotypen och de flesta element som ingår i kompositionen, inklusive bilderna i det nedre området).

Det är viktigt att vi lär oss att lagra alla artiklar oberoende för att spara dem med de mått de har och på ett exakt sätt. Alla fel, hur minimala som helst, kan påverka alla element som ingår i din webbsida. Tänk på att de kommer att vara relaterade till varandra och måste ha perfekta dimensioner så att de kan matas in från HTML i den slutliga webben. I det här fallet måste vi klippa och spara följande element självständigt:

• Vår logotyp.
• Alla knappar (de som ingår i huvudmenyn och resten).
• Alla bilder.

Vi kan göra det på många sätt och kanske hittar du ett alternativ som är mer effektivt för dig. Men om det är första gången du ska göra den här typen av layout rekommenderar jag att du följer följande tips.

• Först måste du gå till mappen där PSD-filen som innehåller vår trådram finns och duplicera den så många gånger som de element du ska exportera. I det här fallet har vi skapat 12 kopior från originalet och sparat dem i samma mapp. Därefter byter du namn på var och en av kopiorna och tilldelar var och en av dem namnet på det element som den innehåller. Våra 12 exemplar kommer att döpas om: Logo, menyknapp 1, menyknapp 2, sökfält, övre knapp 1, övre knapp 2, övre knapp 3 och övre knapp 4. De återstående fyra kommer att döpas om till: Bild 1, Bild 2, Bild 3 och bild 4.
• När detta är klart öppnar vi filen med logotypnamnet.
• Vi går till vår lagerpalett och hittar lagret som innehåller vår logotyp. Sedan kommer vi att trycka på Ctrl / Cmd medan vi klickar på miniatyren av lagret. På detta sätt kommer logotypen att väljas automatiskt.
• Nästa steg blir att berätta för Photoshop att vi vill att den ska klippa ut logotypen på ett exakt sätt. För detta behöver vi bara ringa beskärningsverktyget från tangenten eller kommandot C.
• När vi har gjort detta kommer vi att klicka på Enter-knappen för att bekräfta klippningen.
• Nu går vi till den översta filmenyn för att klicka på spara hur. Vi väljer namnet, som i detta fall kommer att vara «Logo» och vi tilldelar ett format PNG, för att vara den fil som erbjuder högsta kvalitet på webben.
• Vi upprepar processen med alla kopior och elementen. När du har trimmat, se till att resten av lagren i vår palett är osynliga eller elimineras. På detta sätt kan vi spara varje element med en transparent bakgrund.

I det här fallet väljer vi vår menyknapp 2 från lagerpaletten. Du kan se på skärmdumpen hur gränserna för vår knapp automatiskt har valts.

När vi väl har valt beskärningsverktyget från C-tangenten reduceras vår duk endast till dimensionerna på vår knapp.

Nu är det dags att spara alla element som ingår i vår webbplats en efter en och ta med dem i bildmappen och som vi kommer att använda senare. Vi kommer att ringa från vår kod och vi fortsätter med vår layout men från och med nu från vår kodredigerare.

Även om det finns många verktyg och alternativ för att utforma en webbsida som gör processen helt intuitiv, är det mycket viktigt att vi lär oss hur man gör det på ett manuell. På detta sätt lär vi oss vad som ligger till grund för utformningen av en webbsida.

Sammanfattning:

1. Designa struktur på webbplatsen med särskild uppmärksamhet åt innehållet du vill överföra och avsnitten som du måste skapa på din webbplats.
2. Arbeta på ditt skelett eller trådram från Adobe Photoshop som anger i vilka områden innehållet kommer att visas och deras format.
3. Förlita dig på de åtgärder och varumärken som du tidigare har utvecklat, börja med utformning banans yta. Inkluderar alla element (både flytande och fasta). Glöm inte att inkludera motsvarande knappar, logotyp och bilder.
4. Klipp ut alla element som ingår i projektet en efter en. Se till att de har rätt åtgärder och att de inte kommer att orsaka problem senare.
5. Spara alla element i format PNG i bildmappen inuti projektmappen html.
6. Tänk på att det här projektet kommer att ha en utgång till webbfönstret så det är mycket viktigt att du tar hänsyn till färgläget och tillämpar RGB.
7. Bli inspirerad av andra webbsidor som du beundrar innan du börjar arbeta, och glöm inte att diskutera detta med dina teammedlemmar. Om det är ett projekt för en klient, försök att hålla fast vid briefing så långt som möjligt.