Tutoriaal: Hoe om 'n webblad met Adobe Photoshop op te stel

MODEL-FOTOWINKEL

Daar is 'n groot verskeidenheid instrumente om webbladsye te ontwerp en op 'n eenvoudige en funksionele manier te werk sonder om kode in te voer of aan te raak. Hulle is ontelbaar, voorgestel deur aansoeke (Adobe Dreamweaver is 'n voorbeeld) of direk deur aanlynplatforms soos Wix. Vir 'n webontwerper is dit egter belangrik om te weet wat die handleiding is. HTML5 en CSS is die fundamentele pilare vir die uitleg van webwerwe en bestemmingsbladsye.

Maar meer gereeld as wat u sou verwag, sal u na toepassings soos Indesign of Adobe Photoshop om u uitlegwerk aan te vul en hulle 'n perfekte afwerking te gee. Vandag sal ons in hierdie uitgebreide handleiding sien hoe ons 'n webblad met Adobe Photoshop kan opstel. In hierdie eerste deel sal ons bly in die werk wat uit Photoshop ontwikkel moet word, maar in toekomstige aflewerings sal ons sien hoe ons hierdie werk reeds direk in HTML-kode kan toepas om dit funksioneel te maak.

Begin met die ontwerp van ons draadraamwerk

Om te begin met die uitleg en ontwerp van 'n webblad, is dit geweldig belangrik dat ons begin definieer wat die basiese elemente is, dit is die skelet. Hierdie struktuur sal dien as ondersteuning vir al die inhoud (tekstuele of multimedia). Deur elk van die afdelings waaruit ons bladsy bestaan, te definieer, kan ons met volledige akkuraatheid daaraan werk en 'n visuele ontwerp gee wat so akkuraat moontlik is.

Dit is baie belangrik dat ons rekening hou met die afmetings wat ons webwerf sal hê as dit 'n boks of volle breedte. 'N Bladsy met 'n boks sal in 'n klein houer wees en daarom sal daar 'n spasie rondom verskyn. Inteendeel, 'n volledige web sal die hele skerm van die toestel beslaan wat die bladsy weergee. Die keuse tussen die een of ander manier reageer op stilistiese vrae en hang ook af van die behoeftes van die projek waaraan ons werk. Ons werk in hierdie voorbeeld met die afgebakse modus, sodat dit nie al die ruimte wat deur die blaaier verskaf word, inneem nie.

 

Draadraam-1

Om ons draadraamwerk te skep, is die eerste ding wat ons moet doen om die Adobe Photoshop-toepassing in te voer en die afmetings wat ons bladsy wil hê, in te sluit. In hierdie voorbeeld sal ons bladsy 1280 pixels breed wees. Die grootteprobleem kan egter wissel afhangende van die eindbestemming of die toestel waarop ons ons bladsy wil weergee. Daar is geen twyfel dat dit moet wees vir 'n funksionele en doeltreffende webontwerp nie reageer en dit moet aanpas by alle toestelle op die mark. In hierdie geval gaan ons egter werk om 'n prototipe te skep wat ons op 'n rekenaar gaan weergee. Desondanks is die responsiewe kwessie waarmee ons later sal handel, 'n hiërargie van skermafmetings om mee te werk in hierdie voorbeeld. Onthou dat ons in hierdie geval die bestemmingsbladsy in Adobe Photoshop sal opstel en dit dan na HTML5 EN CSS3 sal migreer. Die doel van hierdie klein praktyk is om 'n ontwerp wat in Photoshop geskep is te omskep in 'n bruikbare en interaktiewe webontwerp wat reageer op die bewegings van die gebruiker.

Metings vir selfone

iPhone 4 en 4S: 320 x 480

iPhone 5 en 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360 x 640

HTC One: 360 x 640

Tablette se afmetings

iPad alle modelle sowel as iPad Mini: 1024 x 768

Galaxy Tab 2 en 3 (7.0 duim): 600 x 1024

Galaxy Tab 2 en 3 (10.1 duim): 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

Metings vir tafelrekenaars

Klein skerms (word byvoorbeeld in netboeke gebruik): 1024 x 600

Medium skerms: 1280 x 720/1280 x 800

Groot skerms: breedte groter as 1400 pixels, byvoorbeeld 1400 x 900 of 1600 x 1200.

 

draadraamgidse

Om die elemente te versprei en gedeeltes binne ons webmodel toe te ken, is dit baie belangrik dat ons die verhoudings in ag neem om 'n leesbare en melodiese afwerking te verseker. Dit is noodsaaklik dat u die reëls en gidsopsies wat u in die boonste menu View kan vind, gebruik. Om proporsioneel en presies te werk, is dit die beste dat ons vanaf persentasies werk. Ons klik op die aansigmenu en dan op die opsie «Nuwe gids» om die modaliteit van die afdeling te kies. In hierdie geval maak ons ​​vier vertikale verdelings op 25% en neem dit as verwysing om ons beelde in die onderkant en die afbeelding van ons logo in die koptekst te plaas.

Draadraam-1a

Daar is 'n kode om elk van die gebiede aan te dui wat ons sal beset model en die funksie wat elkeen van hulle sal hê. Om byvoorbeeld die area aan te dui wat 'n beeld sal beset, sal ons reghoeke skep met 'n soort kruis. Om aan te dui dat ons video's in 'n sekere gebied wil insluit, sal ons die speel-simbool in ons houer insluit. In hierdie eerste voorbeeld gaan ons net met beelde werk; in die boonste opname kan u die area sien wat die logo vanaf ons webwerf.

Draadraam-finaal

Dit sou die eindresultaat van ons wees draad model. Soos ons kan sien, is dit verdeel in 'n kopstuk wat bestaan ​​uit die beeld waarin die logo gevind sal word en wat sal dien as 'n skakel na die tuisblad, vergesel van twee oortjies, 'n soekenjin en vier knoppies in die soekkassie. Daarbenewens het ons reeds binne die liggaam 'n sybalk saamgestel wat bestaan ​​uit 'n verdeelbalk en 'n reeks kategorieë wat die tipe inhoud wat op ons webwerf verskyn, kategoriseer. 'N Ander afdeling met 'n nommering wat die inskrywings bevat wat op ons webwerf sal bestaan, en uiteindelik 'n lys met die mees verteenwoordigende metatags op ons webwerf.

In die inhoudsarea, wat gedefinieer word deur 'n afdeling wat sal insluit selfbestuurbare inhoud, sal ons die inhoud van ons artikels vind. In hierdie geval, broodkrummels of die broodkrummels (wat die organiese struktuur van ons webwerf, die titel van die artikel, die metadata, 'n paragraaf as teksdeel aandui, waarbinne 'n beeld opgeneem word).

As voetskrif het ons vier beelde ingesluit wat sal dien as skakel na ander dele van ons bladsy. Hier kan ons logo's of ander interessante afdelings insluit. Alhoewel hierdie gebied in werklikheid meer sal optree voorloper, aangesien die voetskrif self 'n bietjie verder gaan met die gebruiksbeleid, wettige kennisgewing en kopiereg.

Nadat ons die basiese struktuur of skelet van ons bladsy bepaal het, sal ons na die volgende vlak moet gaan. Dit sal bestaan ​​uit die regte ontwerp van elk van die areas van ons webwerf. Met ander woorde, ons sal begin om elkeen van hierdie gebiede te "invul" met die inhoud wat uiteindelik op ons webwerf ingevoeg sal word. Dit word aanbeveel dat ons hierdie elemente nie ontwerp voordat ons aan die draadraamwerk werk nie, want dit is heel waarskynlik dat as ons dit in hierdie volgorde doen, ons die verhoudings later sal moet verander. Ons loop die gevaar om ons beelde te verdraai en die ontwerp van elk van die elemente moet oordoen, wat tydmors of 'n laer gehalte resultaat sal word.

In hierdie geval sal die ontwerp van ons webwerf uiters eenvoudig wees. Ons sal die voorskrifte vir materiaalontwerp, aangesien ons die Google-logo gaan gebruik om hierdie praktyk te illustreer. Ek moet duidelik maak dat die doel van hierdie handleiding is om die tegniese kennis te illustreer, dus die estetiese resultaat is in hierdie geval irrelevant. Soos u kan sien, het ons die ruimte wat ons voorheen in ons skema bepaal het, bietjie vir bietjie gevul. Ons het egter op die nippertjie 'n klein wysiging aangebring. Soos u miskien opgemerk het, het ons die grootte van ons logo aansienlik verklein en het ons 'n skeidslyn in die onderste kopstukgebied ingesluit wat perfek aansluit by die boonste menu. In hierdie geval het ons knoppies en materiaal van 'n hulpbronbank gebruik. As ontwerpers kan ons dit self ontwerp, (veral hierdie opsie word aanbeveel as ons wil hê dat dit 'n soortgelyke tonikum moet bied as wat deur die handelsmerkbeeld of die logo aangebied word).

web

Dit is belangrik dat ons in gedagte hou dat ons op twee verskillende vlakke gaan werk om hierdie voorbeeld uit te lê. Enersyds sal ons aan die voorwerpe werk en aan die ander kant die voorkoms van die webwerf. Dit is enersyds in die skelet van ons webwerf en andersyds in almal drywende elemente wat hierdie geraamte sal ondersteun. U sal sien dat daar gebiede is wat glad nie sal dryf nie, soos die gebied wat ons sybalk sal beset, die voorvoet of die skeidsbalk wat die kop van die liggaam skei.

web2

Strukture 1, 2, 3 en 4 sal deel uitmaak van die agtergrond van ons webblad, dus in werklikheid sal dit nie nodig wees om as sodanig vanaf Adobe Photoshop uit te voer nie, alhoewel ons dit wel kan doen, is dit nie nodig nie. Wanneer dit kom by Plat kleure (Een van die belangrikste kenmerke van plat ontwerp en materiaalontwerp, dit kan perfek toegepas word deur middel van 'n CSS-stylblad). Die res van die elemente moet egter gestoor word om dit later in ons HTML-kode in te voeg. In hierdie klein diagram het ons ook die areas wat tot die agtergrond van die bladsy behoort, weergegee, sodat ons 'n duidelike idee het van die finale voorkoms van ons webwerf.

Soos u sal kan besef, is die doel van die skep van hierdie skema in Adobe Photoshop om die werklike dimensie van elke element te verkry, en om die rangorde en struktuur van elke element duidelik te maak. Die teksinhoud het natuurlik geen plek in hierdie fase van die proses nie, aangesien dit moet wees van ons kode-redakteur voorsien. Ons moet ook daarop wys dat ons in hierdie praktyk met knoppies en statiese elemente gaan werk, alhoewel dit gewoonlik toegepas word vanaf raamwerke soos Bootstrap of direk vanaf Jquery.

Nadat ons elkeen van die elemente geskep het waaruit ons webblad bestaan, is dit tyd om dit te begin uitvoer en te stoor in die prentmap in die HTML-projekmap. Dit is belangrik dat u gewoond raak aan die uitvoer vanuit u draadraamwerk, want dit is heel waarskynlik dat u sommige van die oorspronklike elemente sal moet verander op grond van die skeletkonfigurasie. (In hierdie geval het ons byvoorbeeld die grootte van die oorspronklike knoppies, die logo en die meeste elemente wat deel uitmaak van die komposisie verander, insluitend die beelde in die onderste gebied).

Dit is belangrik dat ons leer om enige voorwerp onafhanklik op te slaan om dit op 'n presiese manier met die afmetings te bewaar. Enige fout, hoe gering ook al, kan al die elemente wat deel uitmaak van u webblad beïnvloed. Hou in gedagte dat hulle aan mekaar verwant sal wees en dat hulle perfekte dimensies moet hê sodat dit vanaf HTML in die finale web kan ingevoer word. In hierdie geval sal ons die volgende elemente onafhanklik moet knip en stoor:

  • Ons logo.
  • Alle knoppies (die wat deel uitmaak van die hoofkieslys en die res).
  • Al die beelde.

Ons kan dit op baie maniere doen en miskien sal u 'n alternatief vind wat meer effektief vir u is. Maar as dit die eerste keer is dat u hierdie tipe uitleg gaan maak, beveel ek aan dat u die volgende wenke volg.

  • Eerstens moet u na die gids gaan waarheen die PSD-lêer wat ons draadraam bevat, dupliseer en soveel keer dupliseer as die elemente wat u gaan uitvoer. In hierdie geval het ons 12 eksemplare van die oorspronklike geskep en in dieselfde vouer gestoor. Vervolgens herbenoem u elkeen van die eksemplare en gee elkeen die naam van die element wat dit bevat. Ons 12 eksemplare sal hernoem word: Logo, menu-knoppie 1, menu-knoppie 2, soekbalk, boonste knoppie 1, boonste knoppie 2, boonste knoppie 3 en boonste knoppie 4. Die oorblywende vier word herdoop as: Image 1, Image 2, Beeld 3 en Beeld 4.
  • Sodra dit gedoen is, open ons die lêer met die logo-naam.
  • Ons gaan na ons laagpalet en soek die laag wat ons logo bevat. Dan sal ons druk Ctrl / Cmd terwyl ons op die miniatuur van die laag klik. Op hierdie manier sal die logo outomaties gekies word.
  • Die volgende stap sal wees om Photoshop te vertel dat ons wil hê dat dit logo op 'n presiese manier uitgesny word. Hiervoor hoef ons slegs met die sleutel of die opdrag na die snoeihulpmiddel te roep C.
  • Sodra ons dit gedoen het, klik ons ​​op ons Enter-knoppie om die snit te bevestig.
  • Nou gaan ons na die boonste lêer-menu om te klik op Stoor hoe. Ons sal die naam kies, wat in hierdie geval «Logo» sal wees en ons sal 'n formaat daaraan toeken PNG, omdat dit die lêer is wat die hoogste gehalte op die web bied.
  • Ons sal die proses met al die eksemplare en elemente herhaal. As u klaar is, maak seker dat die res van die lae in ons palet is onsigbare of uitgeskakel. Op hierdie manier kan ons elke element met 'n deursigtige agtergrond stoor.

Knoppie1

In hierdie geval kies ons ons menu-knoppie 2 uit die lae-palet. U kan op die kiekie sien hoe die perke van ons knoppie outomaties gekies is.

knoppie2

Sodra ons die snygereedskap van die C-sleutel kies, word ons doek slegs verminder tot die afmetings van ons knoppie.

stoor-knoppie

Dit is nou die tyd om al die elemente wat deel uitmaak van ons webwerf een vir een te stoor en in die prentmap op te neem en wat ons later sal gebruik. Ons skakel met ons kode en gaan voort met ons uitleg, maar voortaan vanaf ons kode-redakteur.

Alhoewel daar baie instrumente en alternatiewe vir die uitleg van 'n webblad is wat die proses totaal intuïtief maak, is dit baie belangrik dat ons leer om dit in 'n handleiding. Op hierdie manier sal ons leer wat die grondslag is vir die ontwerp van 'n webblad.

Opsomming:

  1. Ontwerp die struktuur let veral op die inhoud wat u wil oordra en die gedeeltes wat u op u webwerf moet skep.
  2. Werk aan u skelet of draad model van Adobe Photoshop wat aandui in watter gebiede die inhoud sal verskyn en hul formaat.
  3. Begin om te vertrou op die maatstawwe en handelsmerke wat u voorheen ontwikkel het ontwerp die oppervlak van die web. Sluit alle elemente in (beide drywende en vaste). Moenie vergeet om die ooreenstemmende knoppies, logo en prente in te sluit nie.
  4. Knip die elemente wat deel uitmaak van die projek een vir een uit. Sorg dat hulle die regte maatreëls het en dat dit u nie later probleme sal veroorsaak nie.
  5. Stoor alle elemente in formaat PNG in die prentmap in die projekmap HTML.
  6. Onthou dat hierdie projek die webvenster sal uitvoer, daarom is dit baie belangrik dat u die kleurmodus in ag neem en toepas RGB.
  7. Laat u inspireer deur ander webbladsye wat u bewonder voordat u aan die werk gaan, en moenie vergeet om dit met u spanlede te bespreek nie. As dit 'n projek vir 'n kliënt is, probeer om by die inligtingsessie so ver as moontlik.

 


Die inhoud van die artikel voldoen aan ons beginsels van redaksionele etiek. Klik op om 'n fout te rapporteer hier.

2 kommentaar, los joune

Laat u kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk met *

*

*

  1. Verantwoordelik vir die data: Miguel Ángel Gatón
  2. Doel van die data: Beheer SPAM, bestuur van kommentaar.
  3. Wettiging: U toestemming
  4. Kommunikasie van die data: Die data sal nie aan derde partye oorgedra word nie, behalwe deur wettige verpligtinge.
  5. Datastoor: databasis aangebied deur Occentus Networks (EU)
  6. Regte: U kan u inligting te alle tye beperk, herstel en verwyder.

  1. hahahahahahaha en aan die einde van dit alles gaan jy na die startknoppie, skakel toerusting uit en gaan na 'n fokken professional wat vir jou 'n webwerf sal maak wat nie 'n fokken kak is nie;)

  2.   Ronny dijo

    Die tutoriaal hou my goed, maar miskien sal u dit in die volgende een meer gedetailleerd maak, ek begin nog met hierdie ontwerp, en as ek die beelde met die finale resultaat sien, is daar 'n paar stappe wat ek nie weet hoe om te doen nie. dankie.