bluebird Posted April 25, 2010 Report Share Posted April 25, 2010 Sveiki! Varbūt kāds zin grāmatu kurā var izlasīt kā no PSD izveidot HTML? Kā sagriezt dizainu, kā labāk sagriezt, kādos formātos kurus elementus saglabāt un pēc tam kā visus sagrieztos elementus savienot kopā HTML. Idejiski es saprotu, bet vēlos palasīt kādu grāmatu kurā tas viss apstāstīts no teorētiskās puses utt. Paldies!! Quote Link to comment Share on other sites More sharing options...
briedis Posted April 25, 2010 Report Share Posted April 25, 2010 Just ask google... http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/ Atslēgvārdi: "from psd to html" Quote Link to comment Share on other sites More sharing options...
bluebird Posted April 25, 2010 Author Report Share Posted April 25, 2010 Just ask google... http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/ Atslēgvārdi: "from psd to html" Jā... es jau saprotu :) Bet liela daļa interneta apmācību ir tādas virspusējas. Nav aprakstīts kādēļ tas jādara tieši tā un nevis savādāk, kādos formātos saglabāt labāk un kā labāk griezt utt. Kādēļ sagriezt PSD tieši tā un ne savādāk utt. Attēlu optimizācijas utt. Paldies par linku, bet šo jau es arī biju izgājis cauri. Te bija vairāk kā tieši salikt visu jau sagriezto. Varbūt tiešām ir kāda laba grāmata par to? Quote Link to comment Share on other sites More sharing options...
briedis Posted April 25, 2010 Report Share Posted April 25, 2010 Neticu, ka grāmatā būs kaut kas tāds, kas nav atrodams internetā... vajag tik rakt. Ja interesē atseviški jautājumi - tad arī meklē atbildes tieši uz tiem - "best web image formats", "image optimization", utt utt. Nezinu vai vienmēr ir "labākais" variants, viss atkarīgs no gaumes, vēlmēm. Citi redz izmanto css spritus, citi vienkārši graiza, kurš labāks variants, ej nu sazini... Un galu galā, viss nāk ar pieredzi... Nevar izlasot vienu grāmatu kļūt par ekspertu šajās lietās... Quote Link to comment Share on other sites More sharing options...
Kavacky Posted April 25, 2010 Report Share Posted April 25, 2010 Attēlu formāts dizainam mūsdienās ir tikai PNG. Izņemot gadījumus, kad vajag mikroskopiskas kustīgas GIF bildītes. Tas, kā tieši griezt, jau atkarīgs no tā, kas tur paredzēts rezultātā, lai būtu pēc tam ērtāk ar sagriezto operēt. Quote Link to comment Share on other sites More sharing options...
bluebird Posted April 26, 2010 Author Report Share Posted April 26, 2010 Attēlu formāts dizainam mūsdienās ir tikai PNG. Izņemot gadījumus, kad vajag mikroskopiskas kustīgas GIF bildītes. Tas, kā tieši griezt, jau atkarīgs no tā, kas tur paredzēts rezultātā, lai būtu pēc tam ērtāk ar sagriezto operēt. Un kādēļ ne jpg? Kaut kur lasīju, ka ar PNG mēdzot būt problēmas!!! Quote Link to comment Share on other sites More sharing options...
xcwcx Posted April 27, 2010 Report Share Posted April 27, 2010 @Kavacky - pilnīgas muļķības. Dizainā ir jāizmanto gan GIF, gan JPG, gan arī PNG, katru tur, kur tas ir nepieciešams. Katram formātam ir sava specifika. Piemēram, attēls, kurā ir salīdzinoši neliels skaits dažādu krāsu (Piem., poga, vienkārša ikona.), piemērotākais būtu GIF. Pretēji tam PNG ļauj iegūt augstāku kvalitāti (Piem., ikonās, logotipos.), bet noteikti jau nu ne liela izmēra fona attēlos, kuriem savukārt visparocīgais parasti ir JPG. JPG ir arī ļoti veiksmīgs priekš gradientiem. Protams, nedrīkst aizmirst par attēla optimizāciju lietojot katru no augstāk minētajiem formātiem. Varbūt neizteicos super precīzi, bet nu sīkāk var palasīt googlē. Kaut vai šajos resursos: http://snook.ca/archives/design/which_image_for http://www.donutey.com/imageformat.php Quote Link to comment Share on other sites More sharing options...
Grey_Wolf Posted April 28, 2010 Report Share Posted April 28, 2010 @Kavacky - pilnīgas muļķības. Dizainā ir jāizmanto gan GIF, gan JPG, gan arī PNG, katru tur, kur tas ir nepieciešams. Pilniiba piekritu. Ar png tiesham medz buut problemas, vecakas brauzeru versijas neizmanto Alfa (transparent) kanalu, liidz ar to tas tiek attelots kaa peleks(vai cita veida krasaa). Tatad jaizmanto JS fixi etc. risinajumi.Taadelj jacenshas no png izvairiities, protams ja vien tas ir iespejams. Gif derigs jebkura lieluma bildei kur ir asas konturas un daudz vienads krasas laukumu. Piemeram krasainu cetrsturu kaudziite *.gif formata aiznjems daudz mazak nekaa *.jpg , pilniiba nezaudejot kvalitaati. *.jpg pats par sevi ir saspiests formats, ar kvalitates zudumiem no sakotnejas kvalitaates ( nu var jau uzlikt protams 100% bet tas jau vairs nedos *.jpg prieksrociibas) Savukart ja poga buus no krasainiem apliishiem, tad *.gif formata vinja diezko labi neiskatiisies, jo buus pagruti izveidot kvalitativas parejas (var bet lielaks cakars ), tatad paliek *.jpg vai *.png ja vajag transparentu... --- Principa jaskatas peec bilzju 'Svara', lai buutu sbalancceta attieciba Izmers( kB)/kvalitaate. --- Teshi par Griesanu ar *.psd , var jau izmantot vinja sniegtaas iespejas, bet nu automatiski vinsh griezj diezgan drankjigi ( praktiski viss ir TABLE). Pats personiigi kompaneju visus elementus atseviskji ar rocinjam , atlasot vajadzigos fonus, pogas, krasas etc.. No pieredzes varu teikt ka tas sanak optimalais varjants. Jo citur daudz atrak ir izveidot jaunu elementu ar CSS, nevis izmantot dizainera uzzimeto. ( piemeram 1-2 pikselju linijas, ramishus etc..) Quote Link to comment Share on other sites More sharing options...
foxsk8 Posted April 28, 2010 Report Share Posted April 28, 2010 Pec butibas, reali dizaina var izmantot png, tas, ka javeido fixski, cik tur laika aiznem, nezinu, 5 min max. Ja jau grieshanas darbs, ka man, ir ikdiena, tad jau kaut cik normali viss ir piegatavots, lidz ar to, tas viss ari aiznem vel mazak laika. Par bildem, var tachu izmantot punypng un smush.it iespejas, kas automatiski vel sakompreses lapa, atrodamos attelus, tapec jau reali png vai gif uz maziem dizaina elementiem, es labak izvelos png. Ja vajag rakstiem bildes, fotoattelus, tos liekam jpg formata, un ja nu kaut ko kustigu, tad protams gif. Tatad bildes varam iedalit 3 sadalas: 1. GIF- animacija 2. PNG - transperect 3. JPG - fotoatteli Un viss, nekadus murgojumus tur nevajag. Talak par grieshanas procesu, photoshops, ka tads, em, man kaut ka nejiet pie sirds, es izmantoju fireworks, tieshi ieks fireworks, ir ertak parvaldit visus objektus, utt... man personigi iet atrak. Tatad atveram psd failu, hops, ja tur ir sazimeti visadi objekti, viens kliks, iegustam aktivu to objektu, teiksim kaut kada bilde, panem vai nu iekopejam objektu jauna lapa un saglabajam, vai ari uzreiz to exportejam, utt... Uzreiz varam noteikt fonta izmeru tekstiem, krasu, utt... Var teikt, viss ir tirs roku darbs, automatiski nekas nenotiek. P.S. Ja nemaldos PS bija kaut kads automatisks toolis, saucas Sitegrinder, bet nu cik testets, rezutlats vienkarshi iesparda, nekas labs tur nesanak. Tapec ari visu viedot ka nakas, izveido jaunu projekta mapi, talak izveido mapes css, images, js, un tukshu index.html, ieks css mapes izveido jau ieprieks nodefinetus css uzstadijumus, reset.css un general css failu, teiksim main.css, ver vala index.html un paraleli main.css un sac darboties. Nezinu ka citi, bet es visu daru paraleli, citi uzmet vispirms html strukturu, nestailotu un pec tam visu stailo. Darit var dazadi, ka kuram ertak. Ja butu brivaks laiks, uzmestu kadu video tutoriali, nez, varbut nakotne vajadzes izveidot. P.S. Vel viens ieteikums, lai beigas nebutu ziepes, visu veidot paraleli un pie reizes jau izstrades laika testet to uz visiem parlukiem, uzmet teiksim header, menu dalu, uzreiz parbaudi, ka izskatas gan uz FF, Operas, Chrome, ka ari uz IE. Piekopjot shadu vai lidzigu metodi, beigas ari nebus jacortojas, ka redz IE visu attelo nepareizi. Ja visam piejiet rupigi, vairakums IE glukus var mierigi noverst. Vai kas, pa sacerejumu sanaca. Quote Link to comment Share on other sites More sharing options...
Kavacky Posted April 29, 2010 Report Share Posted April 29, 2010 Ar png tiesham medz buut problemas, vecakas brauzeru versijas neizmanto Alfa (transparent) kanalu, liidz ar to tas tiek attelots kaa peleks(vai cita veida krasaa). Tatad jaizmanto JS fixi etc. risinajumi. Šai problēmai mūsdienās eksistē tikai viens pareizais risinājums, līdzīgs tam, kuru piekopj pati Google pat pret tādu "aizvēsturisku un līku" pārlūku kā Firefox 2 - proti, pats vainīgs; ja neesi apgreidojies, skaties uz pleķiem alfakanāla vietā. Un var jau taupīt uz vietu un lielus fona attēlus glabāt JPEG ar kkādiem minimālajiem zudumiem, bet nu jau kādu laiku Lattelecom reklamē savu gaziljons megabitu sekundē trubu, tāpēc megabaits - šmegabaits šurpu - turpu, nu nez... tad jau labāk izvairīties no lielu attēlu izmantošanas fonā, fons nav plakātu izstāde tomēr. Protams, var jau spēlēties arī ar JPEG optimizācijām, dažādus laukumus sabīdot pa pikselim, lai precīzāk saspiež ( nu tā metode, izmantojot 8x8 px kompresijas apgabalus ) un nezaudē tik daudz kvalitātes, bet es neņemos apgalvot, ka tas atmaksājas. Quote Link to comment Share on other sites More sharing options...
daGrevis Posted April 30, 2010 Report Share Posted April 30, 2010 Nu nez, nez... :/ Mana metode būtu... :) Visi dizaina elementi tikai ar PNG (dieva dēļ ne kāds JPG gradient'iem), izņēmumi - kustīgie attēli (GIF). Pārējais, tas ir fotogrāfijas lapas saturā - JPG. Un punkts. :) Kā jau fox'is teica, ir servisi, kas bez kvalitātes zudumiem PNG vēl samazina: PunyPNG, Smush.it, un vēl.... :) Nekad par PNG attēlu izmēriem neesmu sūdzējies, bet, protams, ir jāmāk CSS'ā 'background-repeat'... :P PNG uz vecākiem pārlūkiem?? Ir daudz JS fix'iņi, kas to, vienkārši, novērš! :) Graizos ar Photoshop -> Crop Tool, zinu, ka tas ir šausmīgi nepareizi! :D Slice Tool man nepatīk... :D Quote Link to comment Share on other sites More sharing options...
briedis Posted April 30, 2010 Report Share Posted April 30, 2010 Arī izmantoju priekš graizīšanas Adobe Fireworks - tur tieši ir tāds Crop Export tūlis, kas, kad iezīmē apgabalu uzreiz ļauj eksportēt to vajadzīgajā formātā... Quote Link to comment Share on other sites More sharing options...
Grey_Wolf Posted May 1, 2010 Report Share Posted May 1, 2010 Šai problēmai mūsdienās eksistē tikai viens pareizais risinājums, līdzīgs tam, kuru piekopj pati Google pat pret tādu "aizvēsturisku un līku" pārlūku kā Firefox 2 - proti, pats vainīgs; ja neesi apgreidojies, skaties uz pleķiem alfakanāla vietā. Pamegjini shamo paskidrot klientam ;) It ipashi ja lapa paredzeta arzemniekiem. Prasibas buus elementaras. Visam jaizskatas Ok. uz Visiem parluuiem. Ieskaitot IE6 ( nu IE5 ju toch neviens neprasis) Taa kaa ar shadu pieeju talu netiksi.. Quote Link to comment Share on other sites More sharing options...
rATRIJS Posted May 1, 2010 Report Share Posted May 1, 2010 Nav jau tik traki, ka perfekti ir jāizskatās uz visiem pārlūkiem. Arī ārzemēs (es strādāju ārzemēs). Protams, nevar būt variants, ka uz vecajiem pārlūkiem vispār neko nevar darīt, bet neredzēt visus skaistumus un/vai redzēt kādu mazu brāķīti šur un tur var. Quote Link to comment Share on other sites More sharing options...
Grey_Wolf Posted May 2, 2010 Report Share Posted May 2, 2010 , bet neredzēt visus skaistumus un/vai redzēt kādu mazu brāķīti šur un tur var. Parasti transparent ir sameraa butisks dizaina elements, ja vinsh vispar pielietots. Un to diezko nenosauksi par 'mazu' brakjiti. Protams ka katram brauzerim dizains mazliet atskjirsies, un uz vecakiem brauzeriem shis tas stipri nebutisks varetu arii nestradat. bet nu ja pa visu laukumu buus daudz peleku plekju tad tas nu gan 'neies krasta'. ;) Vienkarshi gribeju uzsvert, ka ir slikti pielietot tadu taktiku, ka 'Po' , lai klients 'greido' brauzeri, nevis izlabot gljukus. Un ja ir iespejams izvairieties no transparent lietosanas, kaut mazliet vairak ieguldot darbu, tad tomer vjadzetu izmantot alternativas. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.