Ασκήσεις Ενότήτας 1620-c1-u4

Quick Mask, Wireframes, Mockups, Responsive Website Design

ΑΣΚΗΣΗ 1 [Μονάδες 20]

Να χρησιμοποιήσετε το εργαλείο Quick Mask του Photoshop και σε
συνδυασμό με άλλα εργαλεία του Photoshop να επεξεργαστείτε κατάλληλα
την εικόνα «blond-hair.jpg» με σκοπό να αλλάξετε το χρώμα των μαλλιών
και των ματιών της εικονιζόμενης σε κάποια καστανή απόχρωση ή στην
επιθυμητή απόχρωση. Αποθηκεύσετε το αρχείο ως «brown-hair.jpg».

ΑΣΚΗΣΗ 2 [Μονάδες 100]

Έστω ότι έχετε ως πελάτη την εταιρία «Two Trees Company», η οποία θέλει
να σχεδιάσετε και να δημιουργήσετε ένα Responsive Website για την εταιρική
της προβολή στο διαδίκτυο.

Εικόνα: Σκίτσο του Website Layout (twotrees_fullsketch.jpg)

1
Μετά από συνάντηση με τον πελάτη σας, ο οποίος σας παρείχε ένα πρώτο
σκίτσο του Layout της Ιστοσελίδας (βλ. Εικόνα 1 «twotrees_fullsketch.jpg»),
και αρκετά draft wireframes έχετε δημιουργήσει το τελικό Wireframe για
desktop PC, με χρήση του Adobe Photoshop όπως απεικονίζεται στην Εικόνα
2 «ttc_wireframe_completed.jpg». Όπως θα διαπιστώσετε, το wireframe
περιλαμβάνει όλα τα απαραίτητα στοιχεία περιεχομένου που θα χρειαστούν
κατά το development της Ιστοσελίδας.

Εικόνα 2: Final Wireframe (ttc_wireframe_completed.jpg)

2
Θα χρειαστεί, επίσης, να παραδώσετε wireframes για τις υπόλοιπες συσκευές
Web καθώς, επίσης, και το τελικό Mockup. Αυτό σημαίνει ότι στην παρούσα
εργασία θα χρειαστεί:
Α) Με τη βοήθεια του Adobe Photoshop, να δημιουργήσετε άλλα δύο (2)
ακόμη Wireframes, ένα για smartphones και ένα για tablets. Να αιτιολογήσετε
τα screen sizes που θα επιλέξετε. Στο συνοδευτικό υλικό της ενότητας θα
βρείτε το αρχείο PSD «ttc_wireframe_completed.psd» με το τελικό desktop
Wireframe. Αποθηκεύστε τα wireframes σε αρχεία JPEG.
Β) Χρησιμοποιώντας το απαραίτητο υλικό (εικόνες, χρώματα, γραμματοσειρές
κ.τ.λ.) να δημιουργήσετε το τελικό Mockup της Ιστοσελίδας (desktop version)
βασιζόμενοι στο τελικό Wireframe. Για την εμφάνιση της Ιστοσελίδας μπορείτε
να χρησιμοποιήσετε είτε το δικό σας υλικό (εικόνες, χρώματα κ.λ.π.) ή το
έτοιμο υλικό που βρίσκεται στο συνοδευτικό υλικό της ενότητας (φάκελος
assets). Το τελικό αποτέλεσμα με το sample content εμφανίζεται στην Εικόνα
3.
Εάν χρησιμοποιείτε την τελευταία έκδοση Photoshop CC, μπορείτε να
πειραματιστείτε με τα linked smart objects για τη δημιουργία των
διαφορετικών layouts (mobile, tablet, desktop).
Να επισυνάψετε τα τελικά αρχεία (JPEG), σε μορφή συμπιεσμένου αρχείου
(zip, rar), στην τελευταία ερώτηση του τεστ αξιολόγησης.

Καλή επιτυχία!

3
Εικόνα 3: Sample Mockup