A webdesign alapjai
A webdesign alapjai. Vázlatok. Fejlesztése a vázlat
- Előző anyag - A webdesign alapjai. Vázlatok. Mit kell tudnom, mielőtt elkezdek dolgozni a webhelyen?
Hogyan kezdheti el a vázlat rajzolását?
El kell kezdeni azzal a feltételezéssel, hogy az ügyfél az okok megmagyarázása nélkül elutasíthatja a rajzot. Nos, nem tetszik neki, ez minden! Általánosságban elmondható, hogy a felnőtt lakosságnak csak 6 százaléka érthetően és ésszerűen megmagyarázza a mellékleteket és nem szeret. Az ügyfél egyszerűen nem tolerálja a zöld színt, és nem tud segíteni. Jobb, ha megismered ezt előre.
Ezért a vázlat egyedülálló lehet csak akkor, ha Önnek, a szeretőjének dolgozik. A legjobb, ha három különböző változatot rajzol, az anyag elrendezését és a színsémát. Ezzel adsz az ügyfél a lehetőséget, hogy választhat: „színű, mint az első vázlat, szöveg valamivel nagyobb, mint a második, de ugyanazt a betűtípust, és szükség van valahol ragaszkodni, hogy itt szép kartinochku a harmadik.” Egyetlen vázlat elkészítésével fennáll a kockázata annak, hogy "nem, valami nincs rendben." Nem tudom mi, de nem tetszik nekem! ", És minden újra elindítható.
Tegyük fel, hogy az építeni kívánt webhelynek sok szöveges információt kell tartalmaznia. Az első oldalon az ügyfél "valami különlegeset" szeretne elhelyezni. Mit ad ez nekünk?
Mivel az eddigi tapasztalat eddig, hogy a macska sírt, megpróbáljuk követni a legkisebb ellenállás útját. Nézze meg az alábbi képet.
Semmi eredeti, igaz? És mégis ilyen vázlatokból is lehetséges egy cukorka. Fogjuk meg a rajzot részletesebben: képzeljük el, hogy ezek valós vázlatok, csökkentve, így az összes részlet egyszerűen nem látható.
Most lépjünk tovább a "b" részre, a második szintű oldal prototípusára. Mivel a szöveg az ilyen oldalak tartalmának fő része, a zenekarnak a kompozíció közepén kell lennie. A bal oldalon elhelyezhető a navigációs sáv, fentről és alulról, például bannerekről. A jobb oldali rész nem használatos, csak a nagy felbontású monitorok tulajdonosai láthatják. És még egyszer - még akkor is, ha az ábrán látható kereten belül maradsz, van választás: a színek, a gombok megjelenése, az illusztrációk megtervezése, ha vannak, a szövegblokkok szétválasztói és bármi más.
Miután elkezdte felvázolni, nem lehet magával részlet: legyen az első vázlat (lehetőleg papíron, de nem Photoshop) nem lesz több, akik dolgoztak velem. Rendkívül fontos, hogy az egész kompozíció egészére, és aztán jön a megértése, hogy milyen színű a legjobb választani, hogy mit kell tennie Kontúrelem ha a szimmetria és geometriai szükség.
Nem fogom elrejteni a leírást az egyik lehetséges megközelítés jött elég kopott, de egyébként ez nem is lehetne: egy személy lehet képezni eltávozni egyik helyről a másikra pixel Photoshop, de még a legelső lépés a tervezés, hogy csak akkor tud magának, és az első Az Ön által készített vázlat önérzetet biztosít. De ne pihenjen: nincs garancia arra, hogy az első mesterművet HTML-be fogják fordítani. ;-)
A vázlat technikája
Amikor létrehoz egy új fájlt a vázlathoz a Photoshopban, helyesen válassza ki a fájl paramétereit, sokkal nehezebbé vagy lehetetlenné válik később, ha a kép minősége megmarad.
A munka megkezdése előtt nézze meg a Fájl menüpontot Preferenciák. A Megjelenítés részben A kurzorok a kurzor típusát az ecsetmérethez a festészet kurzoraihoz és a többi kurzorhoz pontosan állítják be. Ha ezt nem teszed meg, olyan funkciók, mint a Crop, nehéz lesz dolgozni.
Állítsa be a felbontást 72 képpont per hüvelykre, ez a beállítás a webes grafika számára szabványos. Ha azt szeretnénk, hogy hozzon létre egy miniatűr felbontása 600-800 dpi (ez a megközelítés gyakran megtalálható a tervezők megszokták, hogy dolgozik a sajtó) és előtt tárolják a megfelelő formában, hogy csökkentse a felbontást a kívánt szem előtt tartani, hogy ez nem fog működni: a minőség a kép visszavonhatatlanul elvész. A fotók az eljárás után megőrzik az elfogadható minőséget, de a grafikai primitíveken alapuló összes szerkezet hal meg.
Néhány szó a grafikus fájlok formátumáról. Grafikonokból álló képek. primitívek és korlátozott paletta használatával, GIF formátumban menteni. Lehetővé teszi a színek számának manuális meghatározását. Ugyanez vonatkozik az átlátszó képekre is: a Fájl menüpontra Az Export lehetővé teszi a kívánt hatás elérését, ha a GIF89A formátumot használja. A fényképeket általában JPEG formátumban menti el (ennek érdekében célszerű a File | Save for Web funkciót használni). Ha a vázlat mindkét típusú grafikát magában foglalja, a képet mindig több részre vághatjuk, különböző formátumokban menthetjük el, majd egy HTML-fájlba egy képbe illeszthetjük az asztal elrendezését.
Néhány szó a szövegről szól.
Sajnos nagyon kevés újonc tervező a vázlatfejlesztési folyamatban figyel a szövegre, amelyet a szimulált weboldalra kell elhelyezni. Mindazonáltal a szöveg a tervezés legfontosabb része. Ne felejtsd el a szöveggel való együttműködésre vonatkozó négy szabályt:
Az első szabály:
A fehér háttérben lévő fekete betűk normálisak. Sötét betűk elfogadhatóak a világos háttéren. Világos betűk egy sötét háttéren - a tervezési koncepciónak nagyon értékesnek kell lennie ahhoz, hogy ilyen színek kombinációját igényelje! Fehér / kék / zöld / piros betűk fekete háttéren - próbáld meg nem számolni, próbáld újra.
A második szabály:
Harmadik szabály:
A szöveg minden egyes bekezdését el kell választani az oldal többi elemétől a háttérszín mezői szerint. Nem olvasható a szöveg, amely "eltalálja" az oszlop határait.
A szabály négy:
Talán csalódni fogsz, de nem fogom elmagyarázni, hogyan kell megfelelően dolgozni a Photoshopban, vagy hogyan érhetem el ezt a vizuális effektust. Mindennek meg kell tanulnia magad. Az interneten elegendő erőforrás áll rendelkezésre, és sokat foglalkoztak ezzel a témával. Hajrá!
Ha még mindig nem tudja elképzelni, hogyan fog kinézni a vázlat az interneten, készítsen egy képernyőképet a böngészőablakról, vágja ki az oldalt, és mentse ezt a fájlt a lemezre. Most akkor „helyet” benne bármelyik eskizov.nuzhno egyszerűen töltse ki a megfelelő képet területe az oldalon, amely az ismételt vízszintes szürke csíkos
Ennek megfelelően, éppen ellenkezőleg, ha azt szeretnénk, hogy mi tűnt vázlatok, vagy hogy tetszett az oldal, hogy ez egy screenshot, vágja le a széleit, és meglátjuk, mi történik. Nagyon hasznos lecke, biztosíthatom önt!
Hogyan született ez a weboldal?
A kék vonalak azt mutatják, hogyan vágták le a vázlatot HTML oldal elkészítéséhez. A szürke terület üres tér, itt az igazi oldalon a szöveg. A vázlat két rétegből áll: a tetején csak egy kék pont található, az egérmutatót követve a tartalomjegyzék mentén, az alján - minden mást.
Mellesleg, a grafikai része a helyszínen szervezik némileg eltérő: a „cut” tartalomjegyzéket a sok kis kép, megmentettem, mint egy GIF-fájl, a technológia forgalomba sylok Képtérkép. amelyről a HTML-ben leírt órák egyikében beszélünk.
De a második szintű oldalak vázlata:
A rendszer ugyanaz: a kék szín a vágott vonalakat mutatja, két réteg, amelyek közül az egyik csak kék pontot tartalmaz. Eddig teljesen tisztázatlan, hogy miért ez így van, és egyébként nem igaz? Ez semmi: minden a helyére fog kerülni, amikor a táblák elrendezését elsajátítjuk. vagy amikor megpróbálsz "gyűjteni" egy többé-kevésbé bonyolult oldalat magadnak.
Az utolsó lépés csíkos háttér. A kívánt hatás elérése érdekében csak annyit kell kitöltenie, hogy az oldal megfelelő részét kitöltse egy olyan kép, amely szürke vízszintes csíkokat ad meg, amikor ismétlődik. Így néz ki, ha 16-szor nagyítja (GIF, két szín, 536 byte, valós méret 10x9 pixel):
Ezzel befejezem a Photoshop-ról szóló vitát, vázlatokat és mindenféle grafikát. Legközelebb írni a kódot egy egyszerű weboldal, és próbálja megérteni, és gyakorolja grafikák web vissza egy kicsit később, és egy másik szinten. Sok szerencsét!
- Előző anyag - A webdesign alapjai. Vázlatok. Mit kell tudnom, mielőtt elkezdek dolgozni a webhelyen?