ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ. Διδάσκων: Κωνσταντίνος Στεφανίδης

Transcript

1 ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ ΣΧΟΛΗ ΘΕΤΙΚΩΝ ΕΠΙΣΤΗΜΩΝ ΤΜΗΜΑ ΕΠΙΣΤΗΜΗΣ ΥΠΟΛΟΓΙΣΤΩΝ ΜΑΘΗΜΑ ΕΠΙΛΟΓΗΣ ΗΥ-464 ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ - ΥΠΟΛΟΓΙΣΤΗ Διδάσκων: Κωνσταντίνος Στεφανίδης

2

3 Adobe XD is an all-in-one cross-platform tool for designing and prototyping websites and mobile apps. Download from adobe website: xperience-design?promoid=3x72b5hv&mv=other Sign up to Creative Cloud or Sign in with your Adobe ID in order to use the program. Διαφάνεια 3

4 Available for: Windows (Beta version) Mac OS Διαφάνεια 4

5 Several choices: Tutorial Open a new file UI kits Open a recent file Διαφάνεια 5

6 Begin a tutorial, set up in an actual XD file, with simple steps from adobe designers to guide you through basic functionality of the tool. Διαφάνεια 6

7 You can open a new file. choose the device you want, with a predefined or custom Size artboard. Διαφάνεια 7

8 You can open UI Kits, that are ready-to-use XD files, set up with platform specific layout and Resources. Διαφάνεια 8

9 Or you can open a recent.xd file. Διαφάνεια 9

10 Διαφάνεια 10

11 Διαφάνεια 11

12 In the middle, is your canvas. Here you can design your prototypes and/or store your assets. You can zoom in or out by pressing ctrl +/-. By pressing Z, you can access the zoom tool. By pressing Space Bar, you can access the hand tool which allow you to pan your screen by clicking and dragging. By pressing ctrl + 0, you can fit everything on your canvas into the screen. Διαφάνεια 12

13 Changes depending what tool you re using or what you re doing. e.g. Text tool: options: font, size, alignment, spacing etc. Rectangle tool: options: Fill color, Border color, Border size, shadow etc Διαφάνεια 13

14 Διαφάνεια 14

15 By pressing A you can create a new artboard. By double-clicking the title of the Artboard you can rename it. Διαφάνεια 15

16 Select rectangle tool & draw your shape in the artboard. Διαφάνεια 16

17 You can change its colour from fill option. 3 Ways to change color: -Pick a colour from wheel. -Write a hex number in the field. -Pick a colour from anywhere in the artboard. Διαφάνεια 17

18 You can add/remove a border to the rectangle. Διαφάνεια 18

19 You can add/remove a shadow to the rectangle. Shadow Position Διαφάνεια 19

20 You can add/remove a shadow to the rectangle. Shadow Depth Διαφάνεια 20

21 You can add/remove the opacity to the rectangle. Διαφάνεια 21

22 You can change the corner radius by clicking the inner circles on your rectangle and adjust them accordingly. Διαφάνεια 22

23 Or manually in the right menu set the radius of your corners. You can have the same radius for all your corners or each one have a different value. Διαφάνεια 23

24 You can bring an element in front of others by clicking Ctrl + ] You can send back an element Ctrl + [ Διαφάνεια 24

25 Or right click the object you want to bring front/send back, and in the menu click arrange and choose your preferred action. Διαφάνεια 25

26 You can have horizontal alignment on top, bottom or middle. Choose your shapes and align them by clicking the button in right top menu. Διαφάνεια 26

27 The shapes align in the middle of that space. If they were aligned At top they would move to the Shape that is higher from the rest. Διαφάνεια 27

28 You can have vertical alignment on left, right or center. Choose your shapes and align them by clicking the button in right top menu. Διαφάνεια 28

29 You can distribute your objects with equal spaces, vertically or horizontally. Διαφάνεια 29

30 Select circle tool & draw your shape in the artboard. Διαφάνεια 30

31 From the right menu, you can fill the shape with color, add/remove a border, add/remove a shadow, change width, height and position. Διαφάνεια 31

32 Select line tool & draw your shape in the artboard. Διαφάνεια 32

33 From the right menu, you can add/remove a border, add/remove a shadow, change width, height and position. Διαφάνεια 33

34 Select text tool & write your text in the artboard. Διαφάνεια 34

35 You can change the font, size, intensity, alignment, spacing, Opacity and colour of the text, add/remove border or shadow from the letters. Διαφάνεια 35

36 You can choose multiple shapes and group them to one item/shape. You can press Ctrl + G or right click in the items. Διαφάνεια 36

37 You can choose a shape and press the Repeat Grid button. Διαφάνεια 37

38 You can choose a shape or a group of shapes and press the Repeat Grid button. This will create repeat versions of your selected items. Διαφάνεια 38

39 You can adjust the spaces between your repeated items by simple clicking in the space between them. Διαφάνεια 39

40 Διαφάνεια 40

41 Select your icons from a folder and place them in a shape. Διαφάνεια 41

42 The images will repeat until every shape is filled with an image. Διαφάνεια 42

43 With Pen tool you can create complicated shapes. Διαφάνεια 43

44 Διαφάνεια 44

45 You can preview your prototypes by clicking the play button in the upper bar. Διαφάνεια 45

46 You can export an individual asset, artboard or all artboards in a design. You can export assets for web, ios, Android Available formats are PNG and SVG. Διαφάνεια 46

47 You can choose an asset, a group of assets or an artboard. An asset (circle) A group of assets An artboard Διαφάνεια 47

48 Use the Export action from the menu at the top left corner. Διαφάνεια 48

49 Choose the format (PNG for this course), the design mode (Design, Web, ios or Android) and the destination folder for your prototypes. Click the Export button Διαφάνεια 49

50 You can use icon font families: Chart-Template.pdf/preview.png Διαφάνεια 50