Kev pom kev txawb no tsis yog ib txwm zoo li cas
Nws yog qhov tshwm sim ntau tshaj rau cov duab kos tsis tau tsuas yog ua lawv cov hauj lwm tshwm hauv ntawv, tab sis kuj nyob rau hauv lub vas sab thiab cov cuab yeej xws li iPhones, iPads, Android devices thiab Android tablets. Nyob rau ntawm qhov chaw, qhov no yuav pom tau tias yog "qhov zoo tshaj plaws" raws li xov xwm peb ua haujlwm tshwm sim rau cov duab ntxig. Tus downside yog tus sheer number ntawm cov ntxaij vab tshaus thiab qhov teeb meem ruam tag nrho ntawm kev tshuaj ntsuam. Nws tsis yog cov tsis tshua muaj neeg hnov qhov ntse uas xav tau txhua yam tshwm sim rau cov hnub thaum 300 dpi daws teeb meem TIFF duab nyob hauv CMYK hom ntawv. Huag rau hnub qub zoo!
Cov hnub dhau lawm. Peb tam sim no yuav tsum tau sib tw nrog qhov tseeb tias 200 ntawm 200 cov duab yuav pom zoo rau ib qho cuab yeej thiab tseem tshwm sim raws li peb lub hlis ntawm lwm thiab peb lub quarter qhov loj ntawm lwm qhov. Nws tag nrho tiag tiag tuaj rau "Cov Hwj Haum Haum Haum Haum" uas tau hnov los ntawm cov tuamtsheem ua haujlwm raws li lawv sim ua ntau ntau pixels rau hauv ib qho screen tshaj lawv cov neeg sib tw.
Qhov no coj peb mus rau yam peb yuav hu ua "The Rise of the Suffixes". Cov lus xaus yog cov khoom - @ 2x, @ 3x - tacked rau lub npe ntawm tus duab. Lawv yeej tseem zoo, piv txwv, muab cov duab zoo nyob rau hauv txoj cai qhov chaw ntawm txoj cai ntaus ntawv. Tom qab ntawd nws tau txais txawm zoo dua.
Ntau ntau peb cov hauj lwm yuav ua hauj lwm nrog cov icons thiab, nrog qhov nce ntawm qhov kev tsim tawm ncaj, Cov khoom no yog tsim los ntawm cov vector kos daim ntaub ntawv raws li Daim Ntawv Cog Lus thiab Tswv Yim. Qhov teeb meem yog cov cuab yeej cias tsis tau xa cov ntaub ntawv .ai lossis .eps. Lawv yuav tsum tau hloov dua siab tshiab rau Scalable Vector Graphics thiab, nyob ntawm daim ntawv thov siv los tsim cov cim, tej zaum yuav tsis txawm yog SVG kev xaiv.
Tom qab ntawd nws tau txais txawm zoo dua.
Muaj ib qho tshiab ntawm software- Prototyping daim ntawv sau npe - uas yog qhov taw tes ua ke ua ntej koj cov duab thiab cov cim uas tau muab pov tseg rau cov khoom siv thiab lawv muaj lawv cov peculiarities thiab.
Qhov kev nyeem ntawv no yog txav ntawm Photoshop thiab Sketch rau cov duab thiab siv Adobe Experience Design los qhia txog ob peb ntawm cov ntsiab lus ntawm qhov koj xav tau thiab lub caij nyoog xa mus. Cia peb pib.
01 ntawm 05
Yuav ua li cas npaj duab rau txawb hauv Adobe Photoshop
Thawj kauj ruam hauv txoj haujlwm no yog paub txog koj lub cuab yeej phiaj xwm lossis cov khoom siv. Hauv qhov no, koj mam li targeting tus iPhone 6 uas muaj ib qhov screen cheeb tsam ntawm 375 pixels dav los ntawm 667 pixels siab. Tus tsim qauv hu rau daim duab kom dav ntawm qhov screen.
Daim duab yuav raug siv nyob hauv Bern Minster Cathedral hauv Bern, Switzerland. Thaum cov duab qhib hauv Photoshop, xaiv Duab> Duab Loj los saib qhov ntev ntawm daim duab thiab nws qhov kev daws teeb meem. Obviously, tus duab uas yog 3156 x 2592 nrog ib Resolution ntawm 300 ppi thiab cov ntaub ntawv loj ntawm 23.4 Mb tsuas yuav tsis ua hauj lwm.
Hauv Diam duab loj sib tham, txo cov Resolution 100 ppi . Ua li no vim hais tias cov duab qhov ntev kuj yuav hloov. Nrog rau kev daws teeb meem, hloov qhov dav mus rau 375 Pixels. Yog tias koj kos cov duab cov ntaub ntawv koj yuav pom cov duab tau shrunk los ntawm 23.4 Mb rau ib lub xov tooj txawb dua 338k. Nyem OK los txais qhov kev hloov thiab kaw cov Duab Duab sib tham.
02 ntawm 05
Yuav siv cov "Export As ..." Kev Sib Tham hauv Tsev Adobe Photoshop
Thaum cov duab yog npaj rau kev xa tawm, xaiv "Export> Export Li ..." qhib lub Export Raws li lub thawv ntawv.
Qhov kev sib tham hauv phau ntawv no yog qhov sib ntxiv rau Photoshop thiab ntau xyoo "Txuag Rau Web" lub thawv uas lawv siv tau ntau xyoo. Yog tias koj tseem xav tau nws, koj tuaj yeem pom nws hauv Export Pop cia. Nws yog, rau qhov tseeb vim li cas, tam sim no hu ua "Export For Web (Legacy)". Yog tias qhov no yog qhov koj tuaj ntsib thawj zaug rau hauv lub thawv no, ntawm no yog ib nyuag ncig saib:
- Loj: Qhov kem no teev cov zis loj ntawm daim duab. Qhov nthuav ntawm thaj chaw no nws yuav ntug daim duab, tiam sis daim duab yuav tsis tshwm raws li "fuzzy" ntawm lub cuab yeej vim qhov loj heev ntawm cov pixels ntawm lub tshuab ntaus ntawv.
- 1X: Nias ntawm tuav qhov no thiab koj yuav tsum tau nthuav tawm nrog ntau ntau qhov ntau thiab tsawg. Lub 1x, 2x thiab 3x pawg yog feeb ntau nrog Hi Hi Dpi li ntawm Apple thiab lawv nrog rau ob peb lwm tus neeg yuav npaj dluab rau Android pab kiag li lawm.
- Suffix: Qhov kev xaiv no yuav qhia koj qhov me me, tiam sis nws yuav raug pom raws li @ 2x los yog qhov loj me me raug xaiv. Qhov kev qhia no yuav muab ntxiv rau daim duab lub npe.
- Lub npe + kos npe: Nyem qhov no ntxiv cov ntau thiab tsawg ntau rau cov zis. Hauv qhov no, nyem nws ob zaug thiab xaiv 2x thiab 3x los ntawm cov pop cia. Qhov no yuav npog suab yam iOS no.
- Pov Tseg Muaj: Siv qhov no thiab qhov kev xaiv raug tshem tawm ntawm kab ntawv.
- Cov Chaw Nkag: Xaiv hom ntawv - jpg, png, gif los yog svg - zoo tshaj plaws-haum rau daim duab. Yog tias cov ntaub ntawv loj yog qhov muaj kev txhawj xeeb koj tuaj yeem txo qhov Kev Xaiv.
- Image Size: koj tuaj yeem hloov lub cev qhov loj ntawm daim duab.
- Canvas Loj: Koj tuaj yeem hloov lub cev qhov ntev ntawm daim duab kos duab.
- Metadata: Koj tuaj yeem ntxiv cov cai thiab koj cov ntaub ntawv tiv tauj rau cov duab metadata.
Thaum tiav lawm, nyem qhov Export All khawm. Koj yuav tau nug seb koj xav tso cov duab twg. Tus cwj pwm zoo tsim yog yuav tsum nias lub nplaub tshev Tshiab khawm thiab tsim ib phau ntawv khaws cov duab xa tawm. Thaum koj nias xa, koj yuav tsum pom cov duab hauv daim nplaub tshev.
03 ntawm 05
Yuav Npaj Taw Qhia Rau Cov Cuab Yeej Siv Hauv Kev Kos Tshaj 3 Los Ntawm Bohemian Coding
Sketch 3, ib daim ntawv Macintosh-tsuas yog siv los ntawm Bohemian Coding, yog sai tau nce npe ntawm UX thiab UI designers vim nws qhov ntse heev rau hauv web thiab app tsim. Qhov tseeb Photoshop, muaj ntau txoj hauv kev, yog nyob rau hauv txoj kev khib ntawm kev ua si "ntes tau" nrog Sketch.
Los npaj ib daim duab rau txawb hauv Sketch, xaiv cov duab ntawm qhov kos duab thiab nias lub Tshawb Ua Tshaj Tawm rau hauv qab ntawm cov khoom vaj huam sib luag . Qhov no yuav qhib lub thawv Export Export box. Nias qhov + kos npe rau ntxiv rau 2x thiab 3x versions thiab kuj ntxiv cov lus xaus. Cov tawm tswv yim muaj PNG, JPG, TIF, PDF, EPS, thiab SVG. Hauv qhov no, xaiv JPG. Nyem khawm Export thiab lub hom phiaj los tsim cov nplaub tshev tuav cov dluab ntau yam.
04 ntawm 05
Vim Li Cas Koj Yuav Tsum Tau Tsim Peb (lossis Ntau Ntxiv) ntawm Duab
Hauv ntau lub khw, lub lag luam txawb yog "Wild West" ntawm kev txiav txim siab thiab ib qhov me me mas nws tsis haum txhua tus. Hauv qhov ua piv txwv saum toj no los ntawm Adobe Experience Design, cov duab tso rau ntawm 2 iPhone 6 artboards thiab ib qho Android deviceboard. Daim ntawv ceeb toom ua li cas rau 1x version ntawm sab laug pom zoo li ib nrab qhov loj. Qhov no yog raws nraim li cas cov duab yuav tshwm sim rau ntawm ib qho iPhone 6 nrog nws qhov screen retina. Tus 2x version fits txig thiab cov Android version sau ntawm qhov screen. Koj qhov kev xaiv no yog los teev cov duab lossis xa daim duab tawm ntawm Photoshop ntawm ib qho txawv me me.
05 ntawm 05
Kev Soj Ntsuam Thaum Ntxov, Kev Xeem Feem ntau, Ntseeg tsis muaj dab tsi, Tso Siab Tsis Muaj Ib Leeg Thiab Koj Tus Kheej
Qhov koj yuav tsum to taub yog qhov no tsuas yog pib ntawm txoj kev. Saib koj cov dej num rau ntau li cov cuab yeej ua tau raws li koj tuaj yeem tau poob siab tias yog ib qho tseem ceeb ntawm kev ua hauj lwm. Koj kuj yuav tsum paub hais tias qhov no yog thawj kauj ruam hauv tus txheej txheem tsim cov khoom muaj nqis rau ib qho kev lag luam hauv app los sis mobile web.
Siv daim ntawv prototyping yog ib txoj kev zoo ntawm kev paub txog cov ntsiab lus ntawm qhov mob, tiam sis cov nyiaj no yuav tsum muaj kev tsim tawm los ntawm tus tsim tawm. Feem ntau, lub cev qhov loj ntawm cov khoom muaj nqis, suav nrog cov cim, yuav loj heev thiab tsis nyob hauv cov ntawv svg tiam sis png. Thaum xub thawj siab, qhov no yuav zoo li yuav nce mentsis rau sab saum toj, tiam sis nco ntsoov txoj cai ntawm scaling dluab: nws yog qhov zoo dua los mus nce dua li nce.
Cov kab hauv qab yog ua haujlwm nrog koj tus tsim tawm thiab siv cov software prototyping los ua ib txoj kev uas koj tus qauv tsim. Txawm li ntawd los, li ntawd, cov cuab yeej cuab tam yuav tsum npaj kom tiav rau qhov khoom kawg thiab koj tus tsim tawm tau zoo dua ntawm nws qhov kev xav tau li cas rau koj.