Иди на текст

Једноставнa login картицa

Једноставнa login картицa која садржи:

  • Наслов "Пријава"
  • Два поља за унос (Email, Password)
  • Дугме "Пријави се"
  • Link "Заборављена лозинка?"

Димензије:

  • Картица: 400 x 500 px
  • Input поља: 360 x 48 px
  • Дугме: 360 x 48 px

Креирање основне структуре (10 мин)

Корак 1: Направи Frame

  1. Притисни F (Frame tool)
  2. На десној страни изабери "Desktop" → "Desktop (1440 x 1024)"
  3. Или ручно направи Frame: 1440 x 1024 px
  4. Преименуј у "Desktop"
  5. Промени боју позадине у светло сиву #F5F5F5

Корак 2: Креирај картицу

  1. Притисни R (Rectangle)
  2. Нацртај правоугаоник 400 x 500 px
  3. Центрирај га: X: 520, Y: 262
  4. Преименуј у "Login Card"
  5. Подеси:
  6. Fill: #FFFFFF (бела)
  7. Corner radius: 16px
  8. Drop shadow: X:0, Y:8, Blur:24, Spread:0, боја #000000 10% opacity

Корак 3: Наслов

  1. Притисни T (Text tool)
  2. Кликни изнад картице и напиши "Пријава"
  3. Премести текст на картицу (X: 540, Y: 302 - или на око 40px од врха картице)
  4. Подеси текст:
  5. Font: Inter (или било који sans-serif)
  6. Size: 32px
  7. Weight: Bold
  8. Color: #1A1A1A

Корак 4: Текст за поља за унос

  1. Притисни T
  2. Напиши "Email"
  3. Позиционирај на X: 540, Y: 382
  4. Подеси:
  5. Font: Inter
  6. Size: 14px
  7. Weight: Medium
  8. Color: #4A4A4A
  9. Дуплирај текст (Cmd/Ctrl + D)
  10. Промени текст у "Лозинка"
  11. Позиционирај испод (Y: 470)

Корак 5: Email input

  1. Притисни R (Rectangle)
  2. Направи правоугаоник: 360 x 48 px
  3. Позиционирај: X: 540, Y: 406
  4. Преименуј у "Input - Email"
  5. Подеси:
  6. Fill: #FFFFFF
  7. Stroke: 1px, #CCCCCC
  8. Corner radius: 8px
  9. Додај placeholder текст:
  10. Притисни T
  11. Напиши ime@example.com
  12. Позиционирај унутар input-а (X: 556, Y: 420)
  13. Font size: 16px
  14. Color: #999999

Корак 6: Password input**

  1. Селектуј email input и placeholder (држи Shift)
  2. Дуплирај (Cmd/Ctrl + D)
  3. Премести испод: Y: 494
  4. Промени placeholder текст у "••••••••"
  5. Преименуј input у "Input - Password"

Корак 7: Login дугме

  1. Притисни R
  2. Направи правоугаоник: 360 x 48 px
  3. Позиционирај: X: 540, Y: 570
  4. Преименуј у "Button - Login"
  5. Подеси:
  6. Fill: #4A90E2 (плава)
  7. Corner radius: 8px
  8. Без stroke-а
  9. Додај текст на дугме:
  10. Притисни T
  11. Напиши "Пријави се"
  12. Центрирај на дугме (X: 660, Y: 584)
  13. Font size: 16px
  14. Weight: Semi-Bold
  15. Color: #FFFFFF
  1. Притисни T
  2. Напиши "Заборављена лозинка?"
  3. Позиционирај: X: 640, Y: 638 (испод дугмета)
  4. Подеси:
  5. Font size: 14px
  6. Color: #4A90E2
  7. Додај underline (Text decoration)

Корак 9: Финално уређење

  1. Провери alignment свих елемената
  2. Провери да ли су размаци конзистентни
  3. Груписање (опционо):
  4. Селектуј све елементе на картици
  5. Cmd/Ctrl + G
  6. Преименуј групу у "Login Form"

login картица

КОРИСНЕ ПРЕЧИЦЕ

Пречица Акција
V Move tool (селекција)
R Rectangle
O Circle/Ellipse
T Text
F Frame
Ctrl + D Дуплирање
Ctrl + G Груписање
Ctrl + Z Undo
Ctrl + Shift + Z Redo
Ctrl + C/V Copy/Paste
Alt + Drag Дуплирај превлачењем
Shift + Drag Задржи пропорције/правац
Space + Drag Помери canvas
Ctrl + 0 Zoom to fit
Ctrl + 1 Zoom to 100%