Tutorial: Bii o ṣe le ṣe oju-iwe wẹẹbu kan pẹlu Adobe Photoshop

Awoṣe-PHOTOSHOP

Orisirisi awọn irinṣẹ lo wa lati ṣe apẹrẹ awọn oju-iwe wẹẹbu ati ṣiṣẹ ni ọna ti o rọrun ati iṣẹ ṣiṣe lapapọ laisi titẹ tabi fọwọkan koodu. Wọn jẹ ainiye, dabaa nipasẹ awọn ohun elo (Adobe Dreamweaver jẹ apẹẹrẹ) tabi taara nipasẹ awọn iru ẹrọ ori ayelujara bii Wix. Sibẹsibẹ, fun onise wẹẹbu kan, mọ awọn ilana itọnisọna jẹ pataki. HTML5 ati CSS jẹ awọn ọwọn ipilẹ fun ipilẹ awọn oju opo wẹẹbu ati awọn oju-iwe ibalẹ.

Sibẹsibẹ, diẹ sii ju igba ti o le reti lọ, iwọ yoo ni lati yipada si awọn ohun elo bii Indesign tabi Adobe Photoshop lati ṣe iranlowo iṣẹ akọkọ rẹ ki o fun wọn ni ipari pipe. Loni a yoo rii ninu ikẹkọ sanlalu yii, bawo ni a ṣe le ṣe oju-iwe wẹẹbu nipa lilo Adobe Photoshop. Ninu apakan akọkọ yii a yoo duro ninu iṣẹ lati dagbasoke lati Photoshop, botilẹjẹpe ni awọn ipin ọjọ iwaju a yoo rii bawo ni a ṣe le lo iṣẹ yii tẹlẹ taara ni koodu HTML lati jẹ ki o ṣiṣẹ.

Bibẹrẹ pẹlu apẹrẹ ti waya waya wa

Lati bẹrẹ pẹlu ipilẹ ati apẹrẹ oju-iwe wẹẹbu kan, o ṣe pataki pupọ pe a bẹrẹ nipa ṣiṣe alaye kini awọn eroja ipilẹ yoo jẹ, eyi ni egungun naa. Ẹya yii yoo ṣiṣẹ bi atilẹyin lati mu gbogbo akoonu dani (boya ọrọ tabi multimedia). Nipa ṣiṣe alaye apakan kọọkan ti o jẹ oju-iwe wa, a le ṣiṣẹ lori wọn pẹlu pipe pipe ati pese apẹrẹ iwoye ti o pe deede bi o ti ṣee.

O ṣe pataki pupọ pe ki a ṣe akiyesi awọn iwọn ti oju opo wẹẹbu wa yoo ni, ti yoo ba ni kan apoti tabi Iwọn-kikun. Oju opo wẹẹbu ti o ni apoti yoo wa ninu apo kekere kan ati nitorinaa aaye kan yoo han ni ayika rẹ. Ni ilodisi, oju opo wẹẹbu ti o ni oye yoo gba gbogbo iboju ti ẹrọ ti o tun ṣe oju-iwe naa. Yiyan laarin modality kan tabi omiiran ṣe idahun si awọn ibeere aṣa nikan ati pe yoo tun dale lori awọn iwulo ti akanṣe ti a n ṣiṣẹ lori rẹ. A yoo ṣiṣẹ ninu apẹẹrẹ yii pẹlu ipo apoti, nitorinaa kii yoo gba gbogbo aaye ti ẹrọ aṣawakiri ti pese.

 

Wireframe-1

Lati ṣẹda okun waya wa, ohun akọkọ ti a ni lati ṣe ni tẹ ohun elo Adobe Photoshop ati pẹlu awọn iwọn ti a fẹ ki oju-iwe wa ni. Ninu apẹẹrẹ yii oju-iwe wa yoo jẹ awọn piksẹli 1280 jakejado. Sibẹsibẹ, ọrọ iwọn le yatọ si da lori opin irin ajo tabi ẹrọ ti a fẹ ṣe ẹda oju-iwe wa. Ko si iyemeji pe fun apẹrẹ wẹẹbu kan lati ṣiṣẹ ati ṣiṣe daradara, o gbọdọ jẹ idahun ati pe o gbọdọ ṣe deede si gbogbo awọn ẹrọ lori ọja. Sibẹsibẹ, ninu ọran yii a yoo ṣiṣẹ lati ṣẹda apẹrẹ ti a yoo ṣe ẹda lori kọmputa tabili tabili kan. Paapaa bẹ, ọrọ idahun ti a yoo ṣe pẹlu nigbamii, fun bayi, eyi ni ipo-ọna ti awọn iwọn iboju lati ṣiṣẹ lori apẹẹrẹ yii. Ranti pe ninu ọran yii a yoo ṣe ipilẹ ti oju-iwe ibalẹ ni Adobe Photoshop ati lẹhinna gbe lọ si HTML5 ATI CSS3. Idi ti iṣe kekere yii ni lati ṣe iyipada apẹrẹ ti a ṣẹda ni Photoshop sinu lilo wẹẹbu lilo ati ibaraenisepo ti o dahun si awọn agbeka olumulo.

Awọn wiwọn fun awọn foonu alagbeka

iPhone 4 ati 4S: 320 x 480

iPhone 5 ati 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Nesusi 4: 384 x 598

Nesusi 5: 360 x 598

Agbaaiye S3, S4, S5: 360 x 640

Eshitisii Ọkan: 360 x 640

Awọn wiwọn awọn tabulẹti

iPad gbogbo awọn awoṣe bii iPad Mini: 1024 x 768

Agbaaiye Taabu 2 ati 3 (awọn inṣi 7.0): 600 x 1024

Agbaaiye Taabu 2 ati 3 (awọn inṣi 10.1): 800 x 1280

Nesusi 7: 603 x 966

Nesusi 10: 800 x 1280

Iboju Microsoft W8 RT: 768 x 1366

Microsoft dada W8 Pro: 720 x 1280

Awọn wiwọn fun awọn kọmputa tabili

Awọn iboju kekere (ti a lo fun apẹẹrẹ ni awọn netbooks): 1024 x 600

Awọn iboju alabọde: 1280 x 720/1280 x 800

Awọn iboju nla: iwọn tobi ju awọn piksẹli 1400, apẹẹrẹ 1400 x 900 tabi 1600 x 1200.

 

wireframe-itọsọna

Lati bẹrẹ pinpin awọn eroja ati fifun awọn apakan laarin iwakusa wẹẹbu wa, o ṣe pataki pupọ pe ki a ṣe akiyesi awọn ipin lati rii daju pe kika ati orin aladun pari. Yoo jẹ pataki pe ki o lo awọn aṣayan ti awọn ofin ati awọn itọsọna ti o le rii ninu Wo akojọ oke. Lati ṣiṣẹ ni ọna ti o yẹ ati deede, o dara julọ pe ki a ṣiṣẹ lati awọn ipin ogorun. A yoo tẹ lori atokọ wiwo ati lẹhinna lori aṣayan «Itọsọna titun» lati yan modality ti pipin naa. Ni ọran yii a yoo ṣe awọn ipin inaro mẹrin ni 25% ati pe a yoo mu wọn bi itọkasi lati gbe awọn aworan wa si ẹlẹsẹ ati aworan ti aami wa ninu akọle.

Wireframe-1a

Koodu kan wa lati ṣe apẹrẹ ọkọọkan awọn agbegbe ti yoo gba wa awoṣe ati iṣẹ ti ọkọọkan wọn yoo ni. Fun apẹẹrẹ, lati tọka si agbegbe ti aworan yoo gba, a yoo ṣẹda awọn onigun mẹrin pẹlu iru agbelebu kan. Lati fihan pe a fẹ lati ṣafikun awọn fidio ni agbegbe kan, a yoo ṣafikun aami iṣere ninu apo eiyan wa. Ninu apẹẹrẹ akọkọ yii a yoo ṣiṣẹ pẹlu awọn aworan nikan, ni yiya oke o le wo agbegbe ti awọn logo lati oju opo wẹẹbu wa.

Wireframe-ipari

Eyi yoo jẹ abajade ipari ti wa wiwọ waya. Bi a ṣe le rii, o pin si akọsori ti o ni aworan ninu eyiti aami aami yoo wa ati eyiti yoo ṣiṣẹ bi ọna asopọ si oju-iwe ile ti o tẹle pẹlu awọn taabu meji, ẹrọ wiwa ati awọn bọtini mẹrin lori apoti wiwa. Ni afikun, tẹlẹ laarin ara, a ti ni ọpa ti ẹgbẹ ti o ni igi ti n pin ati lẹsẹsẹ awọn ẹka ti o ṣe ipin iru akoonu ti yoo wa lori oju opo wẹẹbu wa. Apakan miiran pẹlu nomba ti o ni awọn titẹ sii ti yoo wa lori aaye wa, ati nikẹhin atokọ kan pẹlu awọn afi afiṣoju meta pupọ julọ lori aaye wa.

Ni agbegbe akoonu, eyi ti yoo ṣalaye nipasẹ apakan kan ti yoo pẹlu akoonu ti ara ẹni ṣakoso, a yoo wa akoonu ti awọn nkan wa. Ni ọran yii, awọn akara akara tabi akara burẹdi (eyiti o tọka si ilana ti ara ti oju opo wẹẹbu wa, akọle nkan naa, metadata, paragiraki bi ọrọ ara, laarin eyiti aworan wa ninu rẹ.

Gẹgẹbi ẹlẹsẹ ẹsẹ a ti fi awọn aworan mẹrin kun ti yoo jẹ ọna asopọ si awọn agbegbe miiran ti oju-iwe wa. Nibi a le pẹlu awọn apejuwe tabi awọn apakan ti o nifẹ si miiran. Botilẹjẹpe ni otitọ, agbegbe yii yoo ṣe diẹ bi ẹlẹsẹkẹsẹ, niwon ẹlẹsẹ funrararẹ yoo lọ siwaju diẹ si isalẹ pẹlu eto imulo lilo, akiyesi ofin ati aṣẹ lori ara.

Lọgan ti a ba ti ṣalaye ipilẹ ipilẹ tabi egungun ti oju-iwe wa, a yoo ni lati lọ si ipele ti nbọ. Eyi yoo ni apẹrẹ ti o yẹ fun ọkọọkan awọn agbegbe ti oju opo wẹẹbu wa. Ni awọn ọrọ miiran, a yoo bẹrẹ lati “fọwọsi” ọkọọkan awọn agbegbe wọnyi pẹlu akoonu ti yoo fi sii nikẹhin lori oju opo wẹẹbu wa. A gba ọ niyanju pe a ko ṣe apẹrẹ awọn eroja wọnyi ṣaaju ṣiṣẹ lori okun waya nitori o ṣeeṣe pupọ pe ti a ba ṣe ni aṣẹ yii, a yoo nilo lati yipada awọn ipin wọn nigbamii. A n ṣe eewu iparun awọn aworan wa ati nini lati tun ṣe apẹrẹ ọkọọkan awọn eroja, eyiti yoo di boya ibajẹ akoko tabi abajade didara kekere.

Ni ọran yii, apẹrẹ oju opo wẹẹbu wa yoo rọrun pupọ. A yoo lo awọn awọn ilana apẹrẹ ohun elo, nitori a yoo lo aami Google lati ṣe apẹẹrẹ iṣe yii. Mo gbọdọ ṣalaye pe idi ti ẹkọ yii ni lati ṣe apejuwe imọ-ẹrọ imọ-ẹrọ, nitorinaa abajade aderubaniyan ninu ọran yii ko ṣe pataki. Bi o ti le rii, diẹ diẹ ni a ti n kun aaye pẹlu gbogbo awọn agbegbe ti a ti pinnu tẹlẹ ninu ero wa. Sibẹsibẹ, a ṣe iyipada kekere ni iṣẹju to kẹhin. Bi o ṣe le ti ṣe akiyesi, a ti dinku iwọn ti aami wa ni riro ati pe a ti fi ila ilapa kan kun ni agbegbe akọsori isalẹ ti o sopọ ni pipe pẹlu akojọ aṣayan oke. Ni ọran yii a ti lo awọn bọtini ati awọn ohun elo lati banki orisun. Gẹgẹbi awọn apẹẹrẹ a le ṣe apẹrẹ wọn funrara wa, (paapaa aṣayan yii ni a ṣe iṣeduro ti a ba fẹ ki o mu iru toniki ti o jọra han si eyiti a gbekalẹ nipasẹ aworan iyasọtọ tabi aami ami).

ayelujara

O ṣe pataki ki a jẹri ni lokan pe lati gbe apẹẹrẹ yii kalẹ a yoo ṣiṣẹ lori awọn ipele oriṣiriṣi meji. Ni apa kan, a yoo ṣiṣẹ lori awọn nkan ati ni apa keji hihan oju opo wẹẹbu. Iyẹn ni, ni ọwọ kan ni egungun ti oju opo wẹẹbu wa ati ni apa keji ni gbogbo awọn eroja lilefoofo ti egungun yii yoo ṣe atilẹyin. Iwọ yoo ṣe akiyesi pe awọn agbegbe wa ti kii yoo ṣan loju omi rara, gẹgẹbi agbegbe ti ẹgbẹ wa yoo gba, ẹlẹsẹ-ẹsẹ tabi ọpa ti o pin ti o pin akọle lati ara.

web2

Awọn ẹya 1, 2, 3 ati 4 yoo jẹ apakan ti lẹhin lati oju opo wẹẹbu wa, nitorinaa kii yoo ṣe pataki fun wa lati gbe okeere gẹgẹ bii lati Adobe Photoshop, botilẹjẹpe a le ṣe, ko ṣe pataki. Nigbati o ba de Awọn awọ fifẹ (Ọkan ninu awọn ẹya pataki ti apẹrẹ fifẹ ati apẹrẹ ohun elo, wọn le ṣee lo ni pipe nipasẹ koodu nipa lilo iwe aza CSS). Sibẹsibẹ, iyoku awọn eroja gbọdọ wa ni fipamọ fun fifi sii nigbamii ni koodu HTML wa. Ninu apẹrẹ kekere yii a tun ti tun ṣe atunkọ awọn agbegbe ti o jẹ ti abẹlẹ ti oju-iwe naa ki o le ni oye ti o daju kini irisi ikẹhin ti aaye wa yoo jẹ.

Bi o ṣe le ni anfani lati mọ, idi ti ṣiṣẹda ero yii ni Adobe Photoshop ni lati gba iwọn gidi ti eroja kọọkan, ati ṣalaye eto ati eto ti eroja kọọkan. Nitoribẹẹ, akoonu ọrọ inu ko ni aaye ninu apakan yii ti ilana nitori o gbọdọ jẹ pese lati ọdọ olootu koodu wa. A tun gbọdọ tọka si pe ninu adaṣe yii, a yoo ṣiṣẹ pẹlu awọn bọtini ati awọn eroja aimi, botilẹjẹpe ni gbogbogbo a maa n lo awọn wọnyi lati awọn ilana bii Bootstrap tabi taara lati Jquery.

Lọgan ti a ti ṣẹda ọkọọkan awọn eroja ti yoo ṣe oju-iwe wẹẹbu wa, o to akoko lati bẹrẹ tajasita wọn ati fifipamọ wọn sinu folda awọn aworan ti o wa ninu folda iṣẹ akanṣe HTML. O ṣe pataki ki o lo fun gbigbe ọja si okeere lati okun waya rẹ, nitori o ṣeeṣe pe o yoo nilo lati yipada diẹ ninu awọn eroja atilẹba ti o da lori iṣeto egungun. (Fun apẹẹrẹ, ninu ọran yii, a ti yipada iwọn awọn bọtini atilẹba, aami ati ọpọlọpọ awọn eroja ti o jẹ apakan ti akopọ, pẹlu awọn aworan ni agbegbe isalẹ).

O ṣe pataki ki a kọ ẹkọ lati fipamọ eyikeyi ohunkan ni ominira lati fipamọ wọn pẹlu awọn iwọn ti wọn ni ati ni ọna titọ. Aṣiṣe eyikeyi, sibẹsibẹ o kere ju, le ni ipa gbogbo awọn eroja ti o jẹ apakan ti oju-iwe wẹẹbu rẹ. Ranti pe wọn yoo ni ibatan si ara wọn ati pe wọn gbọdọ ni awọn iwọn pipe ki wọn le wọle lati HTML ni oju opo wẹẹbu ipari. Ni idi eyi, a nilo lati ge ominira ati fipamọ awọn eroja wọnyi:

  • Aami wa.
  • Gbogbo awọn bọtini (awọn ti o jẹ apakan ti akojọ aṣayan akọkọ ati isinmi).
  • Gbogbo awọn aworan.

A le ṣe ni ọpọlọpọ awọn ọna ati boya o yoo wa yiyan ti o munadoko diẹ fun ọ. Ṣugbọn ti o ba jẹ akoko akọkọ ti o yoo ṣe iru ipilẹ yii, Mo ṣeduro pe ki o tẹle awọn imọran wọnyi.

  • Ni akọkọ, o gbọdọ lọ si folda nibiti faili PSD ti o ni wayaframe wa ninu wa ki o ṣe ẹda naa ni ọpọlọpọ awọn igba bi awọn eroja ti o yoo lọ si okeere. Ninu ọran yii a ti ṣẹda awọn adakọ 12 lati atilẹba a ti fipamọ wọn sinu folda kanna. Nigbamii ti, iwọ yoo fun lorukọ mii kọọkan awọn ẹda naa ki o fun ọkọọkan wọn ni orukọ eroja ti o ni ninu. Awọn adakọ 12 wa yoo wa ni lorukọmii: Aami, bọtini akojọ aṣayan 1, bọtini akojọ aṣayan 2, ọpa wiwa, bọtini oke 1, bọtini oke 2, bọtini oke 3 ati bọtini oke 4. Awọn mẹrin to ku yoo wa ni lorukọmii bi: Aworan 1, Aworan 2, Aworan 3 ati Aworan 4.
  • Lọgan ti a ba ṣe eyi a yoo ṣii faili naa pẹlu orukọ aami.
  • A yoo lọ si paleti fẹlẹfẹlẹ wa ki o wa fẹlẹfẹlẹ ti o ni aami wa ninu. Lẹhinna a yoo tẹ Konturolu / Cmd lakoko ti a tẹ lori eekanna atanpako ti fẹlẹfẹlẹ ti a sọ. Ni ọna yii aami yoo ti yan laifọwọyi.
  • Igbese ti yoo tẹle yoo jẹ lati sọ fun Photoshop pe a fẹ ki o ge ami aami naa ni ọna to ṣe deede. Fun eyi a yoo ni lati ṣe ipe si ohun elo gige nikan lati bọtini tabi aṣẹ C.
  • Lọgan ti a ba ti ṣe eyi a yoo tẹ bọtini Tẹ wa lati jẹrisi gige naa.
  • Bayi a yoo lọ si akojọ aṣayan Faili oke lati tẹ lori fipamọ bii. A yoo yan orukọ, eyiti ninu ọran yii yoo jẹ «Logo» ati pe a yoo fi ọna kika kan fun PNG, fun jijẹ faili ti o funni ni didara ti o ga julọ lori ayelujara.
  • A yoo tun ṣe ilana pẹlu gbogbo awọn adakọ ati awọn eroja. Nigbati o ba gee, rii daju pe awọn fẹlẹfẹlẹ to ku ninu paleti wa alaihan tabi paarẹ. Ni ọna yii a le fi eroja kọọkan pamọ pẹlu ipilẹ tanganran.

Bọtini1

Ni ọran yii a n yan bọtini atokọ wa 2 lati paleti fẹlẹfẹlẹ. O le rii ninu sikirinifoto bi o ti yan awọn aala ti bọtini wa laifọwọyi.

bọtini 2

Ni kete ti a yan ohun elo irugbin lati inu bọtini C, kanfasi wa ti dinku nikan si awọn iwọn ti bọtini wa.

bọtini fifipamọ

Nisisiyi ni akoko lati fipamọ ni ọkan nipasẹ ọkan gbogbo awọn eroja ti o jẹ apakan ti oju opo wẹẹbu wa ati fi wọn sinu folda awọn aworan ati pe a yoo lo nigbamii. A yoo ṣe awọn ipe lati koodu wa ki o tẹsiwaju pẹlu ipilẹ wa ṣugbọn lati igba bayi lọ lati ọdọ olootu koodu wa.

Botilẹjẹpe ọpọlọpọ awọn irinṣẹ ati awọn ọna miiran lo si akọkọ oju-iwe wẹẹbu kan ti o jẹ ki ilana naa jẹ ojulowo, o ṣe pataki pupọ pe ki a kọ ẹkọ lati ṣe ni Afowoyi. Ni ọna yii a yoo kọ kini awọn ipilẹ lẹhin apẹrẹ oju-iwe wẹẹbu kan.

Akopọ:

  1. Ṣe ọnà rẹ awọn itumọ ti oju opo wẹẹbu ti n san ifojusi pataki si akoonu ti o fẹ gbejade ati awọn apakan ti o gbọdọ ṣẹda lori oju opo wẹẹbu rẹ.
  2. Ṣiṣẹ lori egungun rẹ tabi wiwọ waya lati Adobe Photoshop ti n tọka ninu eyiti awọn agbegbe awọn akoonu yoo han ati ọna kika wọn.
  3. Gbẹkẹle awọn igbese ati awọn burandi ti o ti dagbasoke tẹlẹ, bẹrẹ si apẹrẹ oju-iwe ayelujara. Pẹlu gbogbo awọn eroja (mejeeji lilefoofo ati ti o wa titi). Maṣe gbagbe lati ṣafikun awọn bọtini ti o baamu, aami, ati awọn aworan.
  4. Ge gbogbo awọn eroja ti o jẹ apakan iṣẹ akanṣe lọkọọkan. Rii daju pe wọn ni awọn igbese to tọ ati pe wọn kii yoo fa awọn iṣoro fun ọ nigbamii.
  5. Fipamọ gbogbo awọn eroja ni ọna kika PNG ninu folda awọn aworan inu folda iṣẹ naa HTML.
  6. Ranti pe iṣẹ yii yoo ni iṣelọpọ si window wẹẹbu nitorinaa o ṣe pataki pupọ pe ki o ṣe akiyesi ipo awọ ki o lo RGB.
  7. Gba awokose nipasẹ awọn oju-iwe wẹẹbu miiran ti o ṣe ẹwà ṣaaju ki o to ṣiṣẹ, maṣe gbagbe lati jiroro eyi pẹlu awọn ọmọ ẹgbẹ rẹ. Ni ọran ti o jẹ idawọle fun alabara kan, gbiyanju lati faramọ awọn apero bi o ti ṣeeṣe.

 


Awọn akoonu ti nkan naa faramọ awọn ilana wa ti awọn ilana olootu. Lati jabo aṣiṣe kan tẹ nibi.

Awọn asọye 2, fi tirẹ silẹ

Fi ọrọ rẹ silẹ

Adirẹsi imeeli rẹ yoo ko le ṣe atejade. O beere aaye ti wa ni samisi pẹlu *

*

*

  1. Lodidi fun data naa: Miguel Ángel Gatón
  2. Idi ti data naa: SPAM Iṣakoso, iṣakoso ọrọ asọye.
  3. Ofin: Iyọọda rẹ
  4. Ibaraẹnisọrọ data: Awọn data kii yoo ni ifọrọhan si awọn ẹgbẹ kẹta ayafi nipasẹ ọranyan ofin.
  5. Ibi ipamọ data: Alaye data ti o gbalejo nipasẹ Awọn nẹtiwọọki Occentus (EU)
  6. Awọn ẹtọ: Ni eyikeyi akoko o le ni opin, gba pada ki o paarẹ alaye rẹ.

  1.   Piratesking Pirate King wi

    hahahahahahaha ati ni opin gbogbo eyi, o lọ si bọtini ibẹrẹ, pa kọmputa naa, o si lọ si ọjọgbọn ti o ni ibajẹ kan ti yoo ṣe ọ ni oju opo wẹẹbu ti kii ṣe eeyan onibaje;)

  2.   ronny wi

    Ikẹkọ naa gba mi lọna daradara, ṣugbọn boya ni atẹle ti iwọ yoo ṣe ni alaye diẹ sii, Mo tun bẹrẹ ni apẹrẹ yii, ati pe nigbati mo ba ri awọn aworan pẹlu abajade ikẹhin awọn igbesẹ kan wa ti Emi ko mọ bi ṣe. E dupe.