Prejsť na navigáciu
Máte vybrané články autora: Justína Zrušiť výber?

články autora: Justína Zrušiť výber?

Responzívny a adaptívny dizajn - štandardy pri tvorbe nových webov

V nasledujúcom blogu vám predstavujeme základné princípy responzívneho a adaptívneho dizajnu, ktoré sa pri tvorbe nových webových stránok stávajú štandardom.

Zobrazovanie URL adresy v novom Firefoxe

Nedávno som sa nechala presvedčiť na update Firefoxu na nejakú novšiu verziu. Ako to už býva, nový prehliadač priniesol aj nové problémy. Jedným z tých drobných bolo pre mňa zobrazovanie skrátenej a upravenej URL adresy. Je to už síce zmena staršieho dáta, ale verím, že sa úprava URL lišty na pôvodné zobrazenie bude hodiť viacerým.

Pravidlá pre pomenovávanie súborov - ako si zjednodušiť život

Niektoré bežné návyky človeku značne uľahčia život. Často sa dobré a praktické návyky v mnohých oblastiach ukážu ako neoceniteľné, aj keď ide len o drobnosti.

Množstvo času na počítači strávi človek prácou so súbormi. Zefektívnenie správy súborov a adresárov je preto jednoznačná výhoda. Prvým krokom k príjemnej a jednoduchej práci je vhodné pomenovávanie súborov.

Hromadná zmena veľkostí efektov vrstvy vo Photoshope

V Illustratore je známa možnosť zväčšovať a zmenšovať efekty cesty zväčšovať a zmenšovať pri zväčšovaní a zmenšovaní cesty alebo objektu. Takáto možnosť často chýba užívateľom vo Photoshope – keď má vrstva nastavený efekt tieňa na 20 px, pri zväčšovaní alebo zmenšovaní vrstvy zostáva tieň stále 20 px.

Čo však robiť, keď  má vrstva nastavených napríklad 5 rôznych efektov a potrebujeme zväčšiť alebo zmenšiť viac vrstiev? Postupné upravovanie všetkých jednotlivých efektovje v takomto prípade veľmi zdĺhavé.

Pomôže nám možnosť úpravy veľkosti efektov hromadne, pomocou nástroja Scale Effects.

Farby a farebné schémy pre webstránku

Voľba vhodnej farebnej schémy býva jednou z najťažších fáz navrhovania dizajnu webstránky. Ladiace, dobre zvolené farby sú základom pre dosiahnutie žiadaného efektu. Budú pre váš projekt lepšie jemné pastelové, tmavé, žiarivé, kontrastné, sýte alebo odtiene šedej? A ak už sa rozhodnete pre typ farieb, ako sa rozhodnúť pre konkrétne odtiene? Budú sa k sebe vôbec hodiť?

Jednou z metód voľby hodiacich sa farieb je použitie prirodzených schém, teda výber farieb z prirodzene jestvujúcich kombinácií.

Nedeliteľná medzera v HTML, v Adobe Photoshope a Ilustratore

Z Wordu väčšina aktívnych používateľov pozná takzvanú nedeliteľnú, pevnú medzeru (non-breaking space). Možnosť vyrobiť nedeliteľné medzery je užitočná, ak človek chce zabrániť predložkám, spojkám a iným krátkym slovám zostať osihotene na konci riadku.

Niekedy sa aj vo Photoshope a Illustratore vyskytne priestor pre využitie nedeliteľnej medzery. Ako sa k nej však v týchto Adobe produktoch dopracovať? :)

Oko na stiahnutie - vektorová ilustrácia očí v Adobe Illustratore

Tento týždeň som potrebovala v jednom dizajne ilustráciu oka, dívajúceho sa jedným smerom. Spravila som si teda jednoduchú vektorovú ilustráciu očnej bulvy v Illustratore.

Tak sa mi oko zapáčilo, že som si oči spravila ešte tri. :) Ponúkam vám teda na voľné stiahnutie štyri ilustrácie rôznych očí. Každé oko má inú farbu a pozerá sa iným smerom...

Double margin chyba pri floatovaných elementoch a Internet Explorer 6

Testovanie pre Internet Explorer 6 je v našich končinách stále nutným zlom.

Jedným zo známych problémov je takzvaný Double margin bug, teda chyba dvojitého okraja. Tento bug spôsobí, že floatovaný element s nastaveným marginom v smere floatu je v IE6-tke zobrazený s marginom dvojnásobným. Táto chyba sa dá ošetriť viacerými spôsobmi; spomeňme dva jednoduché – CSS IE6 hack a predchádzanie bugu nahradením marginu paddingom.

Zabezpečiť, aby sa webstránky zobrazovali správne v IE6  je pri dobrom chápaní fungovania jeho špecifických bugov pomerne jednoduché – treba sa skrátka pri kódovaní vyvarovať špecifických nastavení a štýlovania.

Rozmazané farebné pozadie na webstránku alebo obrazovku

Takzvané „rozmazané“  alebo „rozostrené“ pozadia webstránok sa stali nedávno veľmi populárnymi, najmä vďaka rozšírenému tzv. Vista efektu. Je zrejmé prečo – sú prosto pekné a stránkam dodávajú nádych tajomna a profesionálny šmrnc.

Stále rýchlejšie pripojenia umožňujú dizajnérom využívať bez ostychu aj veľkorozmerné pozadia a teda možností hrať sa s efektmi je skutočne neúrekom.

V tomto tutoriáli vytvoríme na pozadí webstránky intenzívnu žiaru vychádzajúcu spoza tela stránky. 

Vektorové puzzle dieliky v Adobe Illustratore

Pred pár dňami som v jednom fóre narazila na žiadosť o návod, ako vytvoriť vzor opakujúcich sa puzzle dielikov.

Keďže z vesmírneho hľadiska pokladám za dobré vytvárať trvalé hodnoty s potenciálom na opakované využitie (;]), rozhodla som sa poskytnúť návod na vytvorenie opakujúceho sa vzoru puzzle dielikov vo vektoroch – teda dieliky, ktoré sa dajú ľubovoľne zväčšovať bez straty kvality, majú presne taký tvar, aký od nich očakávam a môžem ich aplikovať kdekoľvek potrebujem a akýmkoľvek spôsobom.

Smart Guides vo Photoshope – automatické zarovnávanie pomocou vodítok

Väčšina webdizajnérov používajúcich Photoshop potrebuje čo najefektívnejšie metódy na zrovnávanie objektov.

Na zarovnávanie objektov je možné použiť viaceré metódy. Jednou z metód okamžitého zarovnávania v reálnom čase je použitie Smart Guides, teda Inteligentných vodítok.

Dobre zostavená internetová reklama

Dnes som nezávisle dvakrát videla na internete tú istú reklamu, ktorá mi spôsobila dilemu – mám sa smiať, alebo plakať? Dôvodom bol obsah reklamy – jedna jediná nič nehovoriaca veta. A to bola prosím platená reklama, ktorú som videla prvýkrát na facebooku, druhýkrát niekde na webe, myslím cez Etarget.

Pozrime sa teda na to, čo urobil pisateľ tejto reklamy zle a aké základné pravidlá sú dôležité pri zostavovaní krátkej internetovej reklamy.

Metódy výberu vrstiev vo Photoshope

Práca vo Photoshope môže byť neuveriteľne komplexná, a každý užívateľ využíva vlastné spôsoby a techniky na rôzne úkony. Pozrime sa na niektoré špecifické spôsoby práce s vrstvami – a to na vyhľadávanie konkrétnej vrstvy v Palete vrstiev a na vyberanie vrstvy priamo z pracovnej plochy pomocou klávesovej skratky.

Priamy výbery z pracovnej plochy je až neskutočne užitočná vlastnosť Photoshopu, ktorá pri práci s vrstvami šetrí množstvo času...

Je rozumné žiadať grafické návrhy už v cenových ponukách?

Za posledný mesiac nám opäť pribudlo žiadostí o vypracovanie cenovej ponuky na rôzne zaujímavé webstránky. A zároveň žiadostí o grafický dizajn oných budúcich webstránok – vopred.

Je bežnou praxou, že vo verejných súťažiach o vytvorenie webstránky štátnych inštitúcií, veľkých firiem, miest, obcí a mestských častí, je zahrnutá podmienka k cenovej ponuke: s cenovou ponukou zašlite aj grafický návrh.

Výberové konanie sa následne uskutoční nie na základe ceny, ponúkaných funkcií webu alebo použitého systému na správu obsahu, ale na základe vzhľadu dodaného grafického návrhu.

Pozrime sa na to, v čom je problém grafického návrhu v tendroch a prečo by sa ho mali zadávatelia súťaží vo vlastnom záujme vyvarovať.

Analýza webstránky www.Relaxos.sk

Dnes mi mejlom prišla zaujímavá ponuka na analýzu webstránky www.Relaxos.sk. Relaxos, ostrov môjho relaxu, je portál pre liečebné, wellness a víkendové pobyty a touto cestou sa múdro snaží o vytvorenie liniek na svoj web a rozširovanie povedomia o svojej existencii. 

Už dávno som mala v pláne napísať blog o analýze nejakej konkrétnej stránky, jej nedostatkov a výhod. Nenarazila som ale zatiaľ na vhodnú webstránku. Keďže Relaxos.sk si verejnú recenziu priamo vypýtal, ulahčil mi prácu. ;]

Aj na pohľad krásna stránka môže skrývať webdizajnérske chyby a prešľapy. Vedieť ich odhaliť na cudzích stránkach pomôže webdizajnérovi vyvarovať sa chýb pri tvorbe vlastných webov.

Možnosti prepínania jazykových verzií

Po dlhšej letnej odmlke (mladí sme len raz a odpočinúť si treba ;]), pokračujeme v radách a tipoch pri vytváraní webstránok.

Dnes sa pozrieme na prepínanie jazykových verzií stránok. Zamerajme sa tentokrát na vizuál a typ riešenia jazykových mutácií. Spôsobov ako prepínanie nakódovať je neúrekom, ale grafika a metóda prepínania musí prísť pri tvorení web stránky na rad prvá.

Viacnásobný stroke v Adobe Illustratore

V Adobe Illustratore sú každému dobre známe funkciie Fill (Vyplniť farbou alebo gradientom) a Stroke (Obtiahnuť farbou).

Objekt môže mať nastavené rôzne kombinácie fill a stroke, alebo žiadne. Skvelou vlastnosťou Illustratora CS4 je, že umožňuje jednému objektu nastaviť viacnásobný stroke a viacnásobný fill. Nastavené vlastnosti sa správajú ako vrstvy, viacero obtiahnutí sa teda navrství na seba, podobne, ako jednotlivé cesty a objekty.

S jednou cestou sa teda dá dosiahnuť neobmedzené množstvo efektov, a to len aplikáciou viacerých obtiahnutí...

Rozšírená schránka pre Windows – Clipboard Recorder

Väčšina aktívnych užívateľov počítačov pozná funkcie Copy a Paste, teda kopírovanie a vkladanie textov, obrázkov a súborov do schránky.

Štandardom vo Windowse je, že po vložení textu do schránky je možné ho zo schránky vybrať a vložiť prakticky hocikam. Pri okopírovaní nového textu je však text, ktorý sme okopírovali predtým, už navždy stratený – schránka teda naraz obsahuje len jeden kopírovaný element.

Skvelou pomôckou pri práci kohokoľvek, kto často kopíruje napríklad kúsky textu alebo kódu, je maličký program Clipboard Recorder. Tento program si pamätá všetko, čo ste vložili do schránky a všetko sa dá z neho pohodlne vytiahnuť...

Ako usporiadať vrstvy a skupiny vo Photoshope pri výrobe webstránky

Pri grafických návrhoch nádejných photoshopových začiatočníkov sa často môžeme stretnúť s fenoménom tzv. strašného chaosu a dezorganizácie pri práci. ;]

Nadšený grafik začne realizovať svoju predstavu, kreslí všetko do jednej vrstvy, alebo naopak vytvára vrstvy jednu za druhou. Kopíruje a premiestňuje objekty, vytvára dizajn podstránok v samostatných súboroch, zarovnáva objekty od oka a vraví si, že detaily sa v CSSkách nakoniec sami vyriešia.

Dizajn nakoniec môže skončiť výborne, ale pre svojho tvorcu zbytočne namáhavý. Po viacerých ukončených projektoch si zvyčajne každý vyvinie určitý spôsob práce a drží sa ho, čím sa mu celý proces výroby stránky zjednoduší a zefektívni.

Pozrime sa na jeden z možných spôsobov organizácie psd súboru a to konkrétne môj vlastný. ;]

Webová typografia – veľkosť fontu a riadkovanie

Kvalitná prezentácia textu na webstránke je rovnako dôležitá ako krása grafiky a zmysel textu.

Na dobré usporiadanie textu na webe mnoho slovenských dizajnérov zabúda. Grafik, ktorý vymyslí vizuál stránky, má často o riadkovaní, odstavcoch a zarovnaniach len letmú predstavu a kóder je rád, že sa mu grafikovu predstavu podarí nasekať do CSS.

Pravidlá typografie na webstránke sa odlišujú od typografie v iných médiách. Pozrime sa na niekoľko základných pravidiel formátovania textu v CSS, konkrétne určovanie veľkosti písma, riadkovania a vertikálneho odsadenia.

Uložte si webstránky ako obrázky – Firefox Addon: ScreenGrab!

Väčšina užívateľov internetu si čas od času chce uložiť obsah webstránky pre budúce použitie offline. Niektorí užívatelia sú zároveň aj webdizajnérmi, a chcú si uložiť nie obsah stránky, ale naopak jej vzhľad. ;]

Ako webdizajnér často navštevujem webstránky iných autorov, prezerám si stovky detailov a skúmam, akými technikami dosiahli žiadané efekty. Hľadám inšpirácie pre grafiku, layouty, ikony a farebné schémy.

Samozrejme, nie je možné si všetko donekonečna pamätať, takže keď vidím graficky zaujímavú webstránku, uložím si ju ako obrázok a kedykoľvek sa k nej môžem vrátiť, aj keď pôvodná stránka zmení dizajn.

Používam na to skvelý doplnok pre prehliadač FirefoxScreenGrab!...

Print media type a zobrazovanie skratiek a odkazov

Jedna z vecí, čo mám na CSSkách obzvlášť rada, je možnosť špecifikovať výstupné zariadenie a vytvoriť rôzne štýly pre rôzne zobrazovacie médiá.

Zvyčajne štýlujem pre typy médií screen a print. Pozrime sa na štýlovanie webstránky pre tlač, teda na print media type, a na niektoré špecifiká štýlovania skratiek a odkazov v ňom s použitím pseudoelementov :after a :not.

Ako naštýlovať pekný objekt, ktorý sa vertikálne prispôsobí obsahu

Na webstránkach sa zvyčajne vyskytuje množstvo objektov, ktorých obsah je vizuálne odlíšený od okolitých objektov.

Dizajnér pri tvorení grafiky občas narazí na situáciu, keď potrebuje nakresliť pekný objekt, ale nevie presne, akú bude mať na stránke funkciu. Nevie teda, aký bude mať objekt obsah, a teda ani aký dlhý môže byť.

V takom prípade existuje niekoľko spôsobov, ako takýto objekt naštýlovať. Každý spôsob má svoje výhody a nevýhody. Vytvorenie takéhoto objektu sa môže niekomu zdať triviálne, pozrime sa ale pre istotu ako na to. ;]

Vektory krajín Európy na stiahnutie

Za posledný rok som potrebovala v niektorých dizajnoch použiť obrysy rôznych krajín Európy.

Či už to bolo v abstraktnej grafike, alebo priamo ako mapa, aby som dosiahla kvalitu, ktorú som potrebovala a zabezpečila možnosť použiť mapy aj v budúcnosti, spracovala som obrysy týchto krajín ako vektory.

Tieto vektory vám teraz zadarmo ponúkame na stiahnutie. Možno sa vám budú tiež hodiť. ;]

CSS Box Model a jeho nevýhody pri liquid layout

Box model v CSS hovorí o tom, ako sú usporiadané jednotlivé atribúty width, height, padding, margin a border tak, aby spolu vytvorili objekt.

Týmito atribútami sú vymedzené obdĺžnikové oblasti stránky (tzv. boxy), ktoré ohraničujú obsah objektu.

Momentálne používaný model sa zdá elegantný a použiteľný, ale má niektoré nepríjemné vedľajšie účinky, ktoré znepríjemňujú webdizajnérovi život.

Povedzme si aké...

Dizajn s myšlienkou - undergroundové webstránky


Pred začatím prác na webstránke stojí grafický dizajnér pred kľúčovou otázkou – aká bude téma tejto webstránky?

V posledných mesiacoch často narážam na opakujúcu sa základnú tému westránok, a to v toľkých podobách, že som sa rozhodla niektoré z nich prezentovať naraz. 

Touto témou je webstránka, ktorá je pod zemou...

ColorPix - nástroj na vyberanie farieb od ColorSchemer.com

Grafici pracujú s farbami neustále. Samozrejme, každý používa veľa malých a väčších trikov na zefektívnenie práce a uľahčenie si života.

Jedným z jednoduchých nástrojov, ktoré ja používam denne, je ColorPix [color-picking tool] od ColorSchemer.com, ktorý umožňuje zistiť farbu ľubovoľného miesta mojej pracovnej plochy, teda obrazovky počítača, jediným kliknutím na pixel..

Poraďte sa s nami o službách, ktoré potrebujete. My vám pripravíme konkrétnu cenovú ponuku.

Kontaktujte nás

Oceňujem prístup tímu spoločnosti AlejTech, ktorý okamžite reaguje na moje otázky a rieši podnety z našej strany.

Tomáš Božik
riaditeľ IT v kurze