Navrhnite používateľský profil a kreatívne využite rozmazaný efekt

V tejto príručke ti ukážem, ako si môžeš vytvoriť atraktívny užívateľský-profil v aplikácii na návrh a pritom použiť vzrušujúci Blur-efekt na zvýšenie vizuálnej atraktivity. Naučíš sa, ako efektívne kombinovať rôzne prvky a ponúknuť svojim užívateľom pôsobivý zážitok.

Najdôležitejšie zistenia

• Vytvorenie užívateľského profilu s atraktívnym dizajnom je kľúčové pre užívateľskú skúsenosť.
• Použitie blur efektov môže pomôcť sústrediť pozornosť na podstatné informácie.
• Správne používanie masiek v tvojom grafickom softvéri môže výrazne zlepšiť rozloženie.
• Budeš schopný efektívne kombinovať obrazové a textové prvky, aby si dosiahol harmonický celkový vzhľad.

Krok 1: Pridať nového ovládača

Začni pridaním nového ovládača do svojho dizajnového nástroja. V tomto príklade používame šablónu iPhone 8. Skopíruj existujúce prvky, ako je navigačná lišta a stavový riadok, pomocou klávesov "Ctrl + C" (na kopírovanie) a "Ctrl + V" (na vloženie).

Dbaj na to, aby bolo všetko správne zarovnané. V tomto kroku zabezpečíš, že štruktúra ovládača je už stanovená a ponúka miesto pre budúci obsah.

Krok 2: Prispôsobiť navigačnú lištu

Zmeň názov v navigačnej lište z "Chat" na "Profil", aby si informoval užívateľov, že sú v oblasti profilu. Prispôsob aj ikonu na paneli kariet, aby si zabezpečil, že užívateľská prístupnosť je zaručená.

Jasná a intuitívna navigácia je kľúčová, aby užívatelia vždy vedeli, kde sa v rámci aplikácie nachádzajú.

Krok 3: Vložiť pozadie a blur efekt

Teraz vložíme pozadie. Najprv vytvor obdĺžnik, ktorý má 375 pixelov na šírku a 200 pixelov na výšku. Odstráň okraj obdĺžnika a prispôsob ho hornej hrane tvojho profilu.

Skopíruj obrázok zo svojich zdrojov a vlož ho do obdĺžnika pomocou "Ctrl + Shift + V". Týmto spôsobom sa obrázok správne zarovná. Ak je to potrebné, zmenši obrázok pomocou masky, aby dobre zapadol do obdĺžnika a zobrazoval požadovanú plochu.

Krok 4: Aplikovať blur efekt

Aby si dosiahol požadovaný blur efekt, vytvor ďalší obdĺžnik nad už vloženým obrázkom. Nastav blur efekt na približne 15 pixelov, aby obrázok vyzeral ľahko rozmazane, pričom kontúry sú stále rozpoznateľné.

Ako chceš ďalej dolaďovať priehľadnosť alebo efekt, experimentuj s nastaveniami, aby si našiel dokonalé merítko, ktoré prospieva tvojmu dizajnu.

Krok 5: Pridať profilový obrázok

Pridaj ovál pre profilový obrázok. Môžeš pridať štvorcový tvar s rozmermi 125 x 125 pixelov a zaobliť rohy, aby dobre zapadal do celkového vzhľadu. Nezabudni nechať trochu priestoru hore, aby to pôsobilo harmonicky.

Obrázok opäť skopíruj do oválu a vytvor masku, aby vyzeral dobre orámovane. Okraj s hrúbkou 3 pixely môže pomôcť lepšie oddeliť profilový obrázok od pozadia.

Krok 6: Textové polia pre meno a progres

Teraz vytvor textové polia pre užívateľské meno a zobrazenie pokroku. Použi nadpis H4 pre meno a umiestni ho pod profilový obrázok.

Dbaj na to, aby si vybral jasný a atraktívny font a text umiestnil do stredu. Veľkosť písma by mala byť primeraná, aby bola zabezpečená užívateľská prístupnosť.

Krok 7: Nastaviť zobrazenie pokroku

Pridaj zobrazenie pokroku, aby si užívateľom ukázal, koľko už dosiahli. Použi pre to šedé označenie a uprav výšku, aby dobre ladila s ostatnou sekciou.

Zadaj text "Tvoj pokrok" a číselník. Dbaj na to, aby si používal rôzne farby, aby si odlíšil zobrazenie pokroku od popisu.

Krok 8: Pridať tlačidlo pre Pro verziu

Vytvor tlačidlo pre možnosť "Získať Pro verziu". Uisti sa, že tlačidlo je dobre viditeľné a má jednotný dizajn so atraktívnym pozadím. Vzdialenosť od spodného okraja by mala byť 16 pixelov, aby bolo ľahko dosiahnuteľné.

Text v tlačidle by mohol byť "Získať Pro teraz", v dobre čitateľnom písmovom štýle. Je dôležité formulovať jasnú výzvu k akcii.

Zhrnutie – Vytvorenie užívateľského profilu s blur efektom

V tejto príručke si sa naučil, ako vytvoriť atraktívny užívateľský profil a integrovať vzrušujúci blur efekt do svojho dizajnu. Prešiel si rôznymi krokmi, ako je pridanie obrázkov, vytváranie masiek a prispôsobenie textových polí. Tieto techniky ti pomôžu vytvoriť vizuálne atraktívne a funkčné rozloženia aplikácií.