Tutoriala: Nola diseinatu web orri bat Adobe Photoshop-ekin

EREDU-FOTOSHOP

Tresna ugari dago web orriak diseinatzeko eta kodea modu sinplean eta funtzionalean lantzeko kodea sartu edo ukitu gabe. Kontaezinak dira, aplikazioek proposatuta (Adobe Dreamweaver adibidea da) edo zuzenean Wix bezalako lineako plataformen bidez. Hala ere, web diseinatzaile batentzat eskuzko prozedurak ezagutzea ezinbestekoa da. HTML5 eta CSS dira webguneen eta lurreratze orrien diseinurako oinarrizko zutabeak.

Hala ere, espero zitekeena baino maizago, Indesign edo. Bezalako aplikazioetara jo beharko duzu Adobe Photoshop zure diseinu lana osatzeko eta akabera ezin hobea emateko. Gaur tutorial zabal honetan ikusiko dugu nola diseinatu dezakegun web orri bat Adobe Photoshop erabiliz. Lehenengo zati honetan Photoshop-etik garatu beharreko lanean jarraituko dugu, nahiz eta etorkizuneko zatietan lan hau zuzenean HTML kodean nola aplika dezakegun ikusiko dugun funtzionala izan dadin.

Gure wireframe-aren diseinutik hasita

Web orri baten diseinua eta diseinua hasteko, oso garrantzitsua da oinarrizko elementuak zeintzuk izango diren definitzen hastea, hau da hezurdura. Egitura honek eduki guztia (testuzkoa edo multimediakoa) gordetzeko euskarri gisa balioko du. Gure orria osatzen duten ataletako bakoitza zehaztuz, zehaztasun osoz landuko ditugu eta ahalik eta arrakasta handiena duen diseinu bisuala emango dugu.

Oso garrantzitsua da gure webguneak izango dituen dimentsioak kontutan hartzea, izango badu kaxa edo zabalera osoa. Kaxatutako web orri bat edukiontzi txiki baten barruan egongo da eta, beraz, horren inguruan espazio bat agertuko da. Aitzitik, webgune oso batek orria erreproduzitzen duen gailuaren pantaila osoa hartuko du. Modalitate bat edo beste aukeratzeak galdera estilistiko soilak erantzuten ditu eta lanean ari garen proiektuaren beharren araberakoa izango da. Adibide honetan boxed moduan erabiliko dugu, beraz, ez du arakatzaileak eskaintzen duen leku guztia okupatuko.

 

Wireframe-1

Gure wireframe sortzeko, egin behar dugun lehenengo gauza Adobe Photoshop aplikazioan sartu eta gure orrialdeak izatea nahi ditugun neurriak sartzea da. Adibide honetan gure orrialdeak 1280 pixeleko zabalera izango du. Hala ere, tamainaren arazoa alda daiteke azken helmugaren edo gure orria erreproduzitu nahi dugun gailuaren arabera. Zalantzarik gabe, web diseinua funtzionala eta eraginkorra izan dadin, hala izan behar da sentikorrena eta merkatuko gailu guztietara egokitu behar da. Hala ere, kasu honetan mahaigaineko ordenagailu batean erreproduzituko dugun prototipo bat sortzeko lan egingo dugu. Hala eta guztiz ere, erantzuteko gaia geroago eztabaidatuko da, oraingoz, hona hemen adibide honetan lantzeko pantailen dimentsioen hierarkia. Gogoan izan, kasu honetan Adobe Photoshop-en helmugako orriaren diseinua egingo dugula eta ondoren HTML5 ETA CSS3-ra migratuko dugula. Praktika txiki honen helburua Photoshop-en sortutako diseinua erabiltzailearen mugimenduei erantzuten dien web diseinu erabilgarri eta interaktibo bihurtzea da.

Telefono mugikorrentzako neurriak

iPhone 4 eta 4S: 320 x 480

iPhone 5 eta 5S: 320 x 568

iPhone6: 375x667

iPhone 6++: 414 x 736

4. lotura: 384 x 598

5. lotura: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Tableten neurriak

iPad modelo guztiak eta baita iPad Mini ere: 1024 x 768

Galaxy Tab 2 eta 3 (7.0 hazbeteko): 600 x 1024

Galaxy Tab 2 eta 3 (10.1 hazbeteko): 800 x 1280

7. lotura: 603 x 966

10. lotura: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Mahaigaineko ordenagailuen neurriak

Pantaila txikiak (adibidez netbooketan erabiltzen dira): 1024 x 600

Pantaila ertainak: 1280 x 720/1280 x 800

Pantaila handiak: zabalera 1400 pixeletik gorakoa, adibidez 1400 x 900 edo 1600 x 1200.

 

wireframe-gidak

Elementuak banatzen eta gure web maketaren barruan atalak esleitzen hasteko, oso garrantzitsua da proportzioak kontuan hartzea akabera irakurgarria eta melodikoa bermatzeko. Ezinbestekoa izango da goiko menuan Ikusi ditzakezun arauak eta gidak aukerak erabiltzea. Modu proportzional eta zehatzean lan egiteko, onena ehunekoetatik lan egitea da. Ikusteko menuan klik egingo dugu eta gero «Gida berria» aukeraren gainean zatiketaren modalitatea aukeratzeko. Kasu honetan lau zatiketa bertikal egingo ditugu% 25ean eta erreferentzia gisa hartuko ditugu gure irudiak oinean eta gure logotipoaren irudia goiburuan kokatzeko.

Wireframe-1a

Gure okupatuko duten eremu bakoitza izendatzeko kode bat dago eredua eta horietako bakoitzak izango duen funtzioa. Adibidez, irudi batek hartuko duen eremua adierazteko, gurutze moduko laukizuzenak sortuko ditugu. Bideoak eremu jakin batean sartu nahi ditugula adierazteko, erreproduzitzeko ikurra gure edukiontzian sartuko dugu. Lehenengo adibide honetan irudiekin bakarrik lan egingo dugu. Goiko kapturan irudiaren eremua ikus dezakezu logo gure webgunetik.

Wireframe-finala

Hau izango litzateke gure azken emaitza wireframe. Ikus dezakegun moduan, logotipoa topatuko duen irudiz osatutako goiburu batean dago banatuta eta hasierako orrira esteka gisa balioko du bi fitxa, bilaketa-motor eta bilaketa-koadroan lau botoiz lagunduta. Gainera, dagoeneko gorputzaren barruan, barra banatzailez osatutako alboko barra eta gure webgunean egongo den eduki mota sailkatzen duten kategoria batzuk sartu ditugu. Beste atal bat, gure gunean egongo diren sarrerak biltzen dituen numerazioarekin, eta, azkenik, gure webgunean meta etiketa edo etiketarik adierazgarrienak dituen zerrenda.

Edukiaren eremuan, sartuko duen atal batek definituko du autogestionagarria den edukia, gure artikuluen edukia aurkituko dugu. Kasu honetan, ogi birrindua edo ogia (gure webgunearen egitura organikoa adierazten duen artikulua, artikuluaren izenburua, metadatuak, paragrafo bat testu multzo gisa, eta horren barruan irudia sartzen da.

Oin-orri gisa gure orriko beste gune batzuetarako esteka gisa balioko duten lau irudi sartu ditugu. Hemen logotipoak edo beste atal interesgarri batzuk sar ditzakegu. Errealitatean ere, arlo honek antzera jokatuko du aurrealdea, orri-oina bera pixka bat beherago joango baita erabilera politikarekin, lege oharrekin eta copyrightarekin.

Gure orriaren oinarrizko egitura edo eskeletoa definitu ondoren, hurrengo mailara joan beharko dugu. Hau gure webguneko arlo bakoitzaren diseinu egokian egongo da. Alegia, arlo horietako bakoitza azkenean gure webgunean txertatuko den edukiarekin "betetzen" hasiko gara. Gomendagarria da elementu horiek ez diseinatzea wireframe-a landu aurretik, oso litekeena baita ordena honetan eginez gero, geroago haien proportzioak aldatzea. Gure irudiak desitxuratzeko arriskua dugu eta elementu bakoitzaren diseinua berregin behar izatea, denbora galtzea edo kalitate baxuko emaitza bihurtuko dena.

Kasu honetan, gure webgunearen diseinua oso erraza izango da. Erabiliko dugu materialak diseinatzeko aginduak, Google-ren logotipoa praktika honen adibide gisa erabiliko dugunez. Argitu behar dut tutorial honen xedea ezagutza teknikoa ilustratzea dela, beraz, kasu honetan emaitza estetikoak ez du garrantzirik. Ikus dezakezunez, pixkanaka espazioa gure eskeman aurretik zehaztu ditugun arlo guztiekin betetzen joan gara. Hala ere, azken momentuan aldaketa txiki bat egin genuen. Konturatuko zinenez, gure logotipoaren tamaina nabarmen murriztu dugu eta goiko menuarekin ezin hobeto lotzen den lerro banatzailea sartu dugu goiko goiburuaren eremuan. Kasu honetan baliabide banku bateko botoiak eta materialak erabili ditugu. Diseinatzaileok guk geuk diseinatu ditzakegu (batez ere aukera hau gomendagarria da markaren irudiak edo logotipoak aurkezten duenaren antzeko tonikoa aurkeztea nahi badugu).

Web

Garrantzitsua da kontuan izatea adibide hau jartzeko bi maila desberdinetan lan egingo dugula. Alde batetik, objektuak landuko ditugu eta bestetik webgunearen itxura. Hau da, alde batetik gure webgunearen hezurduran eta bestetik guztietan eskeleto honek onartuko dituen elementu mugikorrak. Konturatuko zara flotatzen egongo ez diren eremuak daudela, hala nola gure alboko barrak okupatuko duen eremua, aurreanderra edo goiburua gorputzetik banatzen duen barra banatzailea.

web2

1, 2, 3 eta 4 egiturak atzeko planoa gure web orrian, beraz, egia esan, ez zaigu beharrezkoa izango Adobe Photoshop-etik horrelako esportazioak egitea, guk egin dezakegun arren, ez da beharrezkoa. Orduan Kolore lauak (diseinu lauaren eta materialen diseinuaren funtsezko ezaugarrietako bat, CSS estilo orria erabiliz kodearen bidez ezin hobeto aplika daitezke). Hala ere, gainerako elementuak gorde behar dira gure HTML kodean gero txertatzeko. Diagrama txiki honetan orrialdearen atzeko planoari dagozkion eremuak ere erreproduzitu ditugu, gure webgunearen azken itxura zein izango den argi izan dezagun.

Konturatuko zarenez, Adobe Photoshop-en eskema hau sortzearen zentzua elementu bakoitzaren benetako dimentsioa lortzea da, eta elementu bakoitzaren antolaketa eta egitura argitzea. Jakina, testu-edukiak ez du lekurik prozesuaren fase honetan, hala izan behar baita gure kode editoretik hornituta. Era berean, adierazi behar dugu praktika honetan botoiekin eta elementu estatikoekin lan egingo dugula, nahiz eta normalean Bootstrap bezalako esparruetatik edo zuzenean Jquery-tik aplikatzen diren.

Gure web orria osatuko duten elementu bakoitza sortu ondoren, horiek esportatzen hasteko eta HTML proiektuaren karpetan kokatutako irudien karpetan gordetzeko garaia da. Garrantzitsua da zure wireframe-ra esportatzen ohitzea ohitzea, oso litekeena baita jatorrizko elementu batzuk eskeletoa konfiguratzean oinarrituta aldatu beharko izatea. (Adibidez, kasu honetan, jatorrizko botoien tamaina, logotipoa eta konposizioaren zati diren elementu gehienak aldatu ditugu, beheko eremuko irudiak barne).

Garrantzitsua da edozein elementu modu independentean gordetzen ikastea, dituzten dimentsioekin eta modu zehatzean gordetzeko. Edozein akatsek, minimoak izan arren, zure webguneko elementu guztietan eragin dezake. Gogoan izan, elkarren artean erlazionatuta egongo direla eta dimentsio ezin hobeak izan behar dituztela, azken sarean HTMLtik sar daitezen. Kasu honetan, elementu hauek modu independentean moztu eta gorde beharko ditugu:

  • Gure logotipoa.
  • Botoi guztiak (menu nagusiaren zati direnak eta gainerakoak).
  • Irudi guztiak.

Modu askotan egin dezakegu eta, agian, alternatiba bat aurkituko duzu zuretzat eraginkorragoa dena. Baina diseinu mota hau egingo duzun lehen aldia bada, honako aholku hauek jarraitzea gomendatzen dizut.

  • Lehenik eta behin, gure wireframe duen PSD fitxategia dagoen karpetara joan behar duzu eta esportatuko dituzun elementuak adina aldiz bikoiztu. Kasu honetan originaletik 12 ale sortu ditugu eta karpeta berean gorde ditugu. Ondoren, kopia bakoitzari izena aldatuko diozu eta horietako bakoitzari duen elementuaren izena emango diozu. Gure 12 kopiei izena aldatuko zaie: logotipoa, menuaren botoia 1, menuaren botoia 2, bilaketa-barra, goiko botoia 1, goiko botoia 2, goiko botoia 3 eta goiko botoia. Gainerako laurak honela izendatuko dira: 4. irudia, 1. irudia, 2. irudia eta 3. irudia.
  • Hori egin ondoren logotipoaren izena duen fitxategia irekiko dugu.
  • Gure geruza paletara joango gara eta gure logotipoa duen geruza kokatuko dugu. Gero sakatuko dugu Ktrl / Cmd geruza horren miniaturaren gainean klik egiten dugun bitartean. Modu honetan logotipoa automatikoki hautatuta egongo da.
  • Hurrengo pausoa Photoshop-i esatea logotipo hori modu zehatzean moztea nahi dugula da. Horretarako mozteko tresnara deia egin beharko dugu teklatik edo agindutik C.
  • Hori egin ondoren, Sartu botoian klik egingo dugu ebaketa berresteko.
  • Orain goiko Fitxategiaren menura joango gara nola gorde klik egitera. Izena hautatuko dugu, kasu honetan «Logotipoa» izango da eta formatu bat esleituko diogu PNG, webean kalitate altuena eskaintzen duen fitxategia izateagatik.
  • Prozesua kopia eta elementu guztiekin errepikatuko dugu. Moztu duzunean, ziurtatu gure paletako gainerako geruzak direla ikusezina edo ezabatuta. Modu honetan elementu bakoitza atzeko plano garden batekin gorde dezakegu.

Botoia1

Kasu honetan gure menuaren botoia 2 geruzen paletan hautatzen ari gara. Pantailan ikus dezakezu nola hautatu diren gure botoiaren mugak automatikoki.

botoia2

Mozteko tresna C teklatik hautatzen dugunean, gure mihisea botoiaren dimentsioetara soilik murrizten da.

gorde botoia

Bada garaia gure webguneko elementu guztiak banan-banan gordetzeko eta irudien karpetan sartzeko eta gero erabiliko ditugunak. Gure kodetik deiak egingo ditugu eta gure diseinuarekin jarraituko dugu baina hemendik aurrera gure kode editoretik.

Web orria diseinatzeko tresna eta alternatiba ugari dauden arren eta prozesua guztiz intuitiboa bihurtzen duten arren, oso garrantzitsua da ikasten ikastea eskuliburu. Modu honetan web orrialde bat diseinatzearen oinarriak zeintzuk diren ikasiko dugu.

Laburpena:

  1. Diseinatu estructura webgunearen arreta berezia eskainiz transmititu nahi duzun edukiari eta zure webgunean sortu behar dituzun atalei.
  2. Lan egin zure hezurduran edo wireframe Adobe Photoshop-etik edukia zein eremutan agertuko den eta haien formatua adieraziz.
  3. Aurretik garatu dituzun neurri eta marketan oinarrituta, hasi diseinua webaren azalera. Elementu guztiak (mugikorrak eta finkoak) biltzen ditu. Ez ahaztu dagozkien botoiak, logotipoa eta irudiak sartzea.
  4. Moztu banan-banan proiektuaren parte diren elementu guztiak. Ziurtatu neurri egokiak dituztela eta gero ez dizutela arazorik sortuko.
  5. Gorde elementu guztiak formatuan PNG proiektuaren karpetan dauden irudien karpetan HTML.
  6. Gogoan izan proiektu honek web leihora irteera bat izango duela, beraz, oso garrantzitsua da kolore modua kontuan hartzea eta aplikatzea RGB.
  7. Inspiratu lanera hasi aurretik miresten dituzun beste web orrietan eta ez ahaztu horretaz eztabaidatzea zure taldeko kideekin. Bezeroarentzako proiektua izanez gero, saiatu briefing ahal den neurrian.

 


Artikuluaren edukia gure printzipioekin bat dator etika editoriala. Akats baten berri emateko egin klik hemen.

2 iruzkin, utzi zurea

Utzi zure iruzkina

Zure helbide elektronikoa ez da argitaratuko.

*

*

  1. Datuen arduraduna: Miguel Ángel Gatón
  2. Datuen xedea: SPAM kontrolatzea, iruzkinen kudeaketa.
  3. Legitimazioa: Zure baimena
  4. Datuen komunikazioa: datuak ez zaizkie hirugarrenei jakinaraziko legezko betebeharrez izan ezik.
  5. Datuak biltegiratzea: Occentus Networks-ek (EB) ostatatutako datu-basea
  6. Eskubideak: Edonoiz zure informazioa mugatu, berreskuratu eta ezabatu dezakezu.

  1.   Piratesking Pirate King esan zuen

    jajajajajaja eta honen guztiaren amaieran, hasierako botoira joaten zara, ekipamendua itzaltzen duzu eta kaka izugarria ez den webgune bat egingo dizun profesional izorratuarengana joango zara;)

  2.   Ronny esan zuen

    Tutorialak ondo iruditzen zait, baina agian hurrengo batean zehatzago egingo duzu, diseinu honetan hasi naiz eta azken emaitzarekin irudiak ikusten ditudanean badaude nola egin ez dakizkidan urrats batzuk. Eskerrik asko.