Skapa en webbdesign med Photoshop

Om du vill skapa din egen webbsida, förstå hur du gör en webbplats i Photoshop. Adobe Photoshop är en grafisk redaktör. Det är möjligt att rita upp layouter och deras enskilda element. Detta är ganska lång och komplicerad process. Under årens lopp har webbdesigners läst hur man utformar mallar och lägger ut webbsidor på dem. Men en enkel layout kan samla någon person. Endast grundläggande Photoshop kunskaper och fantasi behövs.

I Photoshop kan du skapa en enkel webbdesign även en nybörjarkan

Från första gången är det osannolikt att du får en sida som designmästarna. Men du kan rita en attraktiv och obekväm service.

Lite om att skapa webbplatser

Avkodning av vissa termer.

  • CSS (Cascading Style Sheets) och HTML (HyperText Markup Language) är datorspråk som används för att skapa webbresurser. Om du öppnar källkoden på en sida på Internet kommer det att finnas HTML-taggar.
  • Layout - layout och installation av material från layouten, förvandla den till en HTML-mall. Det beror på hur objekten är ordnade, oavsett om de är vackra i den totala kompositionen, om det är bekvämt att läsa texten och liknande.
  • Lager är en del av layouten. Tillsammans bildar de den stora bilden. Men de kan redigeras och flyttas separat från varandra.
  • Kroppen är den plats där innehållet ligger. Det kan finnas en bakgrund runt den.
  • Ram (Ram) - sidelementet. Ett block med viss information, bild, form.

Gör en fantastisk plats från början kan bara vara en professionell. För att göra detta måste du förstå webbdesign och känna till HTML. Eftersom den färdiga layouten fortfarande måste vara kompetent.

Men det finns enklare sätt. Det finns onlinetjänster och program som automatiskt konverterar .psd (Photoshop-filformat) till HTML och CSS. Du måste bara montera mallen korrekt.

För att använda Photoshop är det inte nödvändigt att vara en artist och att förstå alla alternativ i programmet. Men om du först började det och inte vet hur du infogar text, ritar en geometrisk form, duplicerar ett lager, ändrar färg eller väljer ett godtyckligt område, bör du börja med något enklare. För att skapa en layout i Photoshop behöver vi minst initiala kunskaper i att arbeta med verktyget och en förståelse för grundläggande funktioner (hur man ritar en rad, lägger en guide, väljer en typsnitt och liknande).

Allmän information om nätverkstjänster är också användbar. Webbplatsen kan präglas av följande kriterier:

  • Enda sida. Alla element, innehåll, allt innehåll i resursen finns på ett ställe. På en sida. För att se innehållet i tjänsten, klicka inte på länkarna eller öppna nya flikar. Samtidigt kan själva webbplatsen vara godtyckligt stor. Den kommer att passa en liten reklambroschyr och en stor 600-sidig roman.
  • Full. Följaktligen innehåller många sidor. Dessa kan till exempel vara "Hem", "Forum", "Gästbok", "Svar på vanliga frågor", "Kontakter". För var och en av dem behöver du göra en layout. Du behöver också navigering och en sidokarta: ett separat avsnitt med länkar till alla delar av tjänsten. Så att användaren snabbt kan hitta det bokmärke han behöver.
  • "Gummi". Ändrar storleken beroende på skärmupplösningen. Sträckt ut med webbläsarfönstret. Vi måste beräkna i förväg hur platsen kommer att se ut. Om med en bredd på 1300 allt visas normalt, då kan en del av artikeln i 900 pixlar "gå" bortom ramgränserna, bilderna stiger inte som de ska och flashanimationen stänger inmatningsformuläret.
  • Fast. Webbplatsens kropp ändrar inte storleken. Det enklaste och mest praktiska alternativet. För att få sidan att se fast, och när du expanderade fönstret fanns inget "tomt" utrymme vid kanterna, du kan göra en gummibakgrund.

layout

Först bestämmer du vilken design du behöver. Det räcker inte att helt enkelt "föreställa sig" och arrangera sedan i Photoshop. Måste vara en tydlig vy. Rita ett mönster på vanligt papper. Inget behov av att redrawa varje bild. Tillräckligt schema: några rektanglar och cirklar, som vanligen betecknar elementen på en webbsida. Tänk på hur ramarna ska placeras, där det är bättre att lägga en logotyp, var att placera information för besökare.

Se exempel på sidor på Internet. Tänk vilka du gillar och varför. Oavsett om det är ett bekvämt arrangemang av ramar, trevliga färger eller en intressant inställning till designen. Kopiera någon annans design är inte värt det. Det räcker att dra inspiration ut ur det. Därefter kan du räkna ut hur man ritar en webbplats i Photoshop.

  • Skapa ett nytt dokument (File - New). Dimensioner väljs med beräkningen på små skärmar eller låg upplösning: 1024 × 720 pixlar. Detta är bredden på "information" delen, och inte hela bilden. Om du vill ha en sida på 1100 pixlar måste du göra ett dokument med en bredd på 1300 pixlar. Längden är faktiskt inte fixad - det beror på hur mycket innehåll du vill placera på resursen. Det här är rekommendationer, inte regler. Du kan bygga en stor layout om du vill.
  • Slå på linjalen. Tryck Ctrl + R eller gå till Visa-menyn - Linjaler. Detta är en mätskala. Hon syns utanför bilden. Utan det måste du uppskatta storlek och avstånd "med ögat", vilket inte påverkar slutresultatet mycket väl. Du kan konfigurera den här funktionen i menyn Redigera - Inställningar - Måttenheter och Linjaler. Där är det bättre att byta centimeter per pixel för att kunna arbeta med en parameter, och inte beräkna hur många poäng i en tum.
  • Du bör också aktivera rutnätet. Visa - Visa - Rutnät eller Ctrl + E (du kan också stänga av det). Detta är en typ av analog av en anteckningsbok i en bur. I Photoshop visas vertikala och horisontella linjer. De kommer inte att visas på ritningen själv. De kan ses endast vid redigering. Denna funktion behövs för att jämnt arrangera elementen i mallen. Någon bekvämare att arbeta med rutnätet, någon utan den. Det är bäst att slå på om du gör en webbplats för första gången
  • För att konfigurera det, gå till Redigera - Inställningar - Guider, Grid och Fragments. Där kan du välja storleken på cellerna, liksom färg och typ av linjer (fast, prickad, ur prickar).

Ett exempel på modern webbdesign

  • Installera guiderna. Mellan dem blir huvudinnehållsresursen - den fasta delen av webbplatsen. Och bakom dem - en gummibakgrund. För att göra detta klickar du på Visa - Ny guide. Markera "Vertikal" i rutan "Orientering". I fältet "Position" skriver du avståndet där objektet kommer från den vänstra kanten. Fokusera på linjalens skala.
  • Två guider behövs - till höger och vänster om sidkroppen. Avståndet mellan dem ska vara högst 1003 pixlar för skärmar med en upplösning på 1024 × 720. Du kan ange en annan bredd. Men stora resurser är obekväma att se på små skärmar.
  • Varför 1003, inte 1024? Om webbplatsen behöver rulla ner ("rulla") ner, kommer webbläsaren att ha en vertikal glider för att bläddra. Storleken på denna skjutreglage är ungefär 21 pixlar. Om du inte tar hänsyn till det kommer en horisontell rullning att visas. Och resursbesökaren måste flytta sidan till vänster och höger för att se all information.
  • Kroppen ska vara i mitten av duken.

Dessa är förberedande stadier av arbetet. Hur man gör en layout i Photoshop beror på din fantasi och smak. Därför kommer endast att vara allmänna rekommendationer av teknisk art.

  • Först behöver din layout en bakgrund. Den kan tillverkas självständigt eller hämtas från nätverket. Det finns många resurser med fria texturer. Lägg inte på bilder som är föremål för upphovsrätt på webbplatsen. Ta inte en ljus eller kontrasterande bakgrund. Det är bättre att inte använda texturer med ett stort antal små iögonfallande detaljer. De kommer att distrahera besökaren från sidans kropp.
  • Om du bara öppnar ritningen i Photoshop kommer den att vara på en ny flik och inte läggas till i layouten. Markera hela bakgrunden. För att göra detta, använd tangentbordsgenväg Ctrl + A eller markeringsverktyget (det finns i den vänstra rutan). Kopiera det och klistra in det i mallen.
  • Det här alternativet är också tillgängligt om du klickar på Redigera - Klistra in.

  • Ett nytt lager visas i listan längst ned till höger. Klicka på den med höger musknapp för att se de möjliga åtgärderna. I menyn "Layer Options" kan du ändra sitt namn. I "Överlagringsinställningar" är de grundläggande bildinställningarna. Du kan göra det glöd, prägling, glans, stroke, gradient. Om du väljer ett alternativ visas ändringarna omedelbart i Photoshop. Det finns en uppsättning färdiga stilar. Så från standardtexturen skapas ursprungliga designlösningar. Och dra inte något extra.
  • Knappen "Filters" finns i menyraden. Där hittar du en mängd olika imitationer (pastell, akvarell, pennor), styling, texturer, skisser, höjdpunkter, oskärpa.
  • Du kan välja en vanlig bakgrund. Färgen beror på din personliga preferens. Men det är bättre att inte göra det svart eller giftigt. Lämpliga sängkläder och mjuka toner eller genomskinlig kyla (till exempel ljusgrå, ljusblå).
  • Efter texturerna kan du samla själva webbplatsen. Här har du friheten att skapa.
  • För att lägga till någon form (linje, fyrkantig, oval), klicka på motsvarande knapp till höger. Det kommer att ha utseendet och namnet på det objekt som för närvarande är valt för ritning. Till exempel "Ellipse Tool", "Polygon Tool". I Photoshop är antalet former begränsade. Men de kan hittas på Internet, hämtas och installeras via menyn Edit - Set Management. I fältet Typ anger du vilken samling objekt du laddar.
  • I olika versioner av programmet kallas dessa siffror på olika sätt. Endera med en knapp i form av en liten svart triangel (det är till höger), eller med en kugghjulsikon eller med punkten "Shape of dot" (den ligger under menyraden). Objekt kan kombineras, grupperas, göra kompositioner av dem.
  • För att skapa en textram, klicka på knappen i form av en bokstav "T". Välj sedan den plats där tecknen ska ligga, klicka där och skriv vad du behöver.
  • Varje element är bättre att sätta på ett separat lager. Så det blir bekvämare att flytta och redigera, utan att "röra" hela webbplatsen. För att lägga till det här objektet, gå till Layers - New.

  • Om du vill projicera en bild i ett förutvalt område väljer du först det och öppnar sedan Redigera - Klistra in special. Det kommer att vara "Insert instead" och "Insert outside".
  • Du kan överföra del av en bild till ett nytt lager. För att göra det, välj det, högerklicka på det och välj "Klipp till ett nytt lager".
  • Med former, bildtexter och bilder finns samma alternativ som med bakgrunden: effekter, filter och så vidare.
  • I Photoshop finns det fortfarande många verktyg för ritning: penslar, pennor, pennor.

Du kan göra en kvalitetsresurs även från enkla geometriska objekt.

Det finns resurser med fria layouter. Ladda dem i Photoshop och redigera om det behövs. Det är lättare och snabbare än att rita från början.

Hur konverterar man en layout till en html-fil?

Du räknade ut hur man skapar en webbplats i Photoshop och utformade din första layout. Vad ska man göra nästa? Det kan trots allt inte bara ladda upp till hosting.

Det kan ges till kodaren som kommer att göra en html-mall av hög kvalitet. Men det finns ett annat alternativ. Använd tjänsterna för att konvertera PSD-filen till HTML och CSS.

  • Psd2Html Converter. Betald online-tjänst. Snabbt konvertera Photoshop-format till webbsidans mall. Med den här resursen kan du, även från en layout med dålig kvalitet, skapa en anständig webbplats.
  • HTML Panda.
  • PSDCenter
  • 40 Dollar Markup.

konstruktörer

Layouts kan också samlas på speciella webbplatser. Vanligtvis finns det ett tydligt och intuitivt gränssnitt. Du monterar enkelt en mall från olika delar. Vissa element är bäst ritade i Photoshop. Så du får den ursprungliga designen. Trots att det skapades på konstruktören.

I Photoshop ritar inte bara. Den samlar in layouter för webbplatser. I de flesta fall görs detta av mästarna. Men en enkel mall kan göra någon person. Endast grundläggande kunskaper om Photoshop behövs.