แผนการสอน

27

Click here to load reader

Upload: rorsuelee

Post on 29-May-2015

9.826 views

Category:

Education


9 download

DESCRIPTION

กราฟฟิก

TRANSCRIPT

Page 1: แผนการสอน

1. ����������

����ก�� PhotoShop �� Macromedia Flash ��������ก��� ������ก���ก�����ก�����������������ก����ก ���� �! "��#� $% �� ���&� '(�&�#�')ก���������*)�$�+ 2. �� ������ก����������

1. ����.����������ก�������"��/�

2. ����� ���������ก��������� 2. ����ก����������

- ก�� ���������ก���������� - ก�� ���������ก������

3. ก����ก���������� ����������������� !�

1. "���ก�� !���#��$%��&�' �()� www.piriyalai.ac.th 2. "���ก�� !����ก�*�+"�$�$%��&�'� )����,�ก����ก����������������ก��

���� 3. �,��,-����.' "���ก�� !�����$��"���,�ก,����� !�� ����$��ก�� !������

���������ก����������������ก��������� ���������/�ก����

4. ��ก�� !�01ก2�.$�����,�ก �.$������ ) 8 ��()�� ก��!���!�!*�+ �.$������ ) 9 ก�� ���������ก������

5. .���3/�$/3 ก��ก����������� ���� ��!4������ lan 6. "���ก�� !������� ����� ) 8, 9 7. �6� )��ก�� !��7/���/��� .��.�!���ก�ก���������� "�.������� .����1ก2�

�ก���ก�� !��!��� ก���/� 8. -����ก�� !�����6 3 D 4 .� "���ก���3/�$/3 ก��������.�/.+/�02 ��!

��(�ก���� )�������� �� "��+()�� 8 ��$�ก��$/+�ก!'

���ก�����ก�� �!"��#$%!& �'&()/+��, ก��������� ��ก��ก����ก

-�./"ก�� �!"��#$%!& 1

ก01.2+��,ก�� �!"��#$ ก�������� +����.����!

3�&/42)%!& 1-4 ��"/73� ���""ก�))���ก����ก

�8��/� 4 3�&/42)

�'&()

ก��������� ��ก��ก����ก 3./)3�9�%!& 4 3�9� 2.6

Page 2: แผนการสอน

�����-� 9. .�� "����./� �����������+/)���/� �+()� "���ก�� !������.�/.$/3 ก���� �� �

ก��+�9��ก���$%��+,�������� "�� ��/�3/*�+��ก!/)��1�� ������! ��ก�� !�� )� .$������ , �ก�����ก/,ก��� � .$�����4/���� � $/��! �ก��������

10. .����$,��4���������ก�� !�������/�4�

5. ��� ก�������ก��� � 1. �.�()��.��+/$����' 2. �.$������ ) 8,9 3. ����� ) 8,9

6. ก��!��"# ����$�"# 6.1 $/3 $��

6.1.1 ���ก�+:�/ก���� )+1����.' 6.1.2 �����;<ก�7/���/,�/�

6.2 �.�()���(�$��4�

6.2.1 ������ก�+:�/ก���� )+1����.' 6.2.2 ���ก�������;<ก�7/���/,�/�

7. %� ��� ���

8. &��'(ก)#��ก��� �

���()� (��!��&(�� �,=�) .��4����

Page 3: แผนการสอน

9. �!���)*�% �"��&�$)��

���()� ( )

����"���

Page 4: แผนการสอน

�) ���I��� 8 ��! "� ก������������ก�������"�

1. ก��?��@A���A()B�C

����� �&��������ก")��*) �� ������/�#(��กJ��� #�ก�����&����������� ����)�������/�#(��ก ���&�ก����"���/�"����/��� PhotoShop ก�"��&���������N�J� �� ����� Attribute Width & Height �� TAG <IMG> �) ^���/ �����N��&��#� ก���#�/������ก����ก�J �/� &��' ��� �����ก����" / �������/��� !" Image, Image Size... $% ����กbN"����&����/'���c

�(B�C%8�)�� Image, Image Size

��') �� Pixel Dimensions �/�����.��')����� ���/ ��#�% � "�ก ��N���')�#�"'���'�J ���.����"�ก����') ���"��'c��"� �� N���"��ก��Jก���ก����!"ก�"� Constrain Proportions

ก�"�

Page 5: แผนการสอน

2. ก��C72CHA$(I/�2

��" ��ก����ก �������������#�% ��� �J��&��������ก")�"ก�����*) �/���Jh�ก�������/'���c

• ���/���+��� #�!"������Jc�����#� • �Jก��!"ก� �! "�!" Text Tool • ��!"ก�I��))"'กi�N�ก Text Options Bar

o �I��))ก�������"'กi� �'��������%)�����"'กi��� ����� ���� ก&�#�/ ������กb��������"�+��" �� �l��� �'���������� N������"'กi�������"�+�mNN̂)'� ������กb�n�������� ������

o ��!"ก�Jo���ก���J�+

o ��!"ก�))"'กi�

o ��!"ก�'กil�"'กi�

o ��!"ก���/"'กi�

o ��!"ก�I��))�"������")�")"'กi�

o ��!"ก�&��#���ก�������" ��

o ��!"ก����" ��

Page 6: แผนการสอน

o ��!"ก�'กil��J�oi

• �&����+�� �Jก l �&��#����� ��"�ก���J�+��" ��

• �J�+��" ���� ��"�ก�� ����.����^p ��! "�%c�)���'/�#� #�!" <Backspace> ��! "�)�ก���

• �l��� �J�+ ����. Select �'�"'กi� �����')�����n����'�"'กi��/� • �l��� �J�+ ����.�����&��#�����" �� �/��&����+����c�J/�������"���" ��

N���'กil�/'���c

N�ก�'c�ก/�^p���+ ������ ��ก���'��&��#����� ��"�ก�� #�!"ก/�^p ������ ������ก���'��&��#����� ��"�ก��

• �! "��"�ก���^�Jก���J�+ �#� �Jก���+�� �^p� �! "�!""! � #�!" �Jก�� �^p

#���#�̂

�&�#�')� �! "�!" Type Mask N����กb��������� ������ $% ���"���� &��' � ��"����cN'/ก��

• ��!"ก�� Foreground $% �N�����������"������") ������!"ก &��' � Edit, Stroke ��! "��J�����")��" ��

• ��!"ก�� Background $% �N�����������!c��"���" �� ����� ��!"ก &��' � Edit, Fill, Background Color ��! "��J���!c��"���" ��

3. ก�� 0'(ก@�)+./�A()B�C2�J3$)�� (Crop Image)

Page 7: แผนการสอน

�I��� �&���������*) 'กN��������.����� t���ก����ก�/���� �! "���ก���"�+ �! "�&����� tI����"�NN���"�ก�������)�������"���� N%���"��&�ก����!"ก�����"���� ����'/������� �������ก�'c��"�ก����!"ก��� ����'/����n��������� ��!"ก������c��� Crop $% � PhotoShop � &��' �/'���c

1. ���/���+����� ��"�ก��

2. ��!"ก� �! "�!" Marquee #�ก�����กb� �! "�!"��c ��/�����ก������ ����J/� �! "�!" ��������.���� ��ก�')�/�ก���&����+� �Jก �������� �^p� �! "�!""'���ก ���.)� �! "�!" N����กb�^/� �! "�!" /'���c

N�ก�'c���! "����+��! "��!"ก� �! "�!" Marquee

3. �&����+$% ���I���������ก�ก)����*กv ���c l ^)�$����"��&��#�������� ��"�ก�� ก/�^p���+ ������ ��ก���+ N����กb������� �#���ก���+�#��/����/�"���������� �^����� ��"�ก��

Page 8: แผนการสอน

4. #�ก��"�ก���ก��Jกก����!"ก�!c��� ��� �#���!"ก &��' � Select, None 5. �! "�/����/�"������ ��"�ก�� ก*N��&�ก���'/��� /��� &��' � Image, Crop

N�ก����'�"���� N��/�t��'�h+ /'���c

&��' � Image, Crop N%��#����� �'/�����"������ ���N ��! "�&���������

4. B�CN$(�

1.��J N�ก���/���+�����ก�%c��ก�"� �'�"����N����/���+����! " shoes.jpg N�ก����/"�+ samples �"� Adobe N�ก�'c����/���+��� fruit.jpg N�ก����/"�+�/J 2.���/#������� Layer /��� &��' � Window, Show Layers 3./��� �Jก� �! "�!" Marquee �&����+����ก�������)���� fruit �#��/��!c��� ������/�� ��"�ก�� 4.ก/�^p <Ctrl> <C> ����ก���&������N"��� shoes /��� &��' � Window, Shoes �&������ '/�"ก����/��� &��' � <Ctrl> <V> ����� '/�"ก���N��$�"�������n)') !" ��� shoes

Page 9: แผนการสอน

5.+�1??�, �O�+8�I�PA()B�Cก��QRก+8�-��@)�� /O@

ก���&����ก����ก��! "����������*) �#�'กก���n�����ก������N�ก����! "�J ��J�+ �'c���! "� �����"��/�"���� (Resolution) �� �������� 72 dpi #�!"N&�������� �����/�t� ������� /'��'c�ก��o%กi�.%� �'กil��n�����ก����� PhotoShop �����ก����ก�������*) N%�����o����+�� ������N"�กo����+#�% �

?�, �O�+8�I�PA()B�Cก��QRก+8�-��@)�� /O@

• ��� �� �����"��/�"���� (Resolution) 72 dpi • ����#/ RGB ��ก���������� • ��"� &��%�.%� Screen Area �"�N"��� /'���c

o 640 x 480 pixel o 800 x 600 pixel o 1024 x 768 pixel

• �ก*)���+���n)')�����" (.psd �! "��� PhotoShop)

Page 10: แผนการสอน

o ��!"ก���������+�������#��#��� o ����� �����"�, ��"�ก�� �� �'/� &� )'��%ก���� .gif o ����� ��"�ก�� �� �'/�I�v ��/����กv )'��%ก���� .jpg

• ก&�#�/�'กil��J�oi�"�����#��#��� ���� ก����� ������. Interlaced, Progressive, Transparent

• ����� ����/�#(�v �ก ������� �J ก���'/��������Jc���*กv �����&�����ก")/��� &��' � HTML

Page 11: แผนการสอน

�)����� 8 ��! "� ก������������ก�������"�

&��' � 1. �#��'ก������&��I������ �Iก&�#�/�#������&�ก����"������� �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N . 2. �#��'ก������J�+��" ���� �Iก&�#�/�#������&��#���������� �� �ก�����#�������/��&��#��J�J��J ������ ���I���"/N��"��� ���� v �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N .

3. �#��'ก������&��I������ �Iก&�#�/�#������&�ก���'/�n���)�������"�������� �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N .

Page 12: แผนการสอน

4. �#��'ก������&��I������ �Iก&�#�/�#������&�ก��$�"���� �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N .

Page 13: แผนการสอน

�) ���I��� 9 ��! "� ก������������ก�����

1. ก��ก8�-��I1S+2@�T7B�C I0'&(�U-/

Dropper Tool

ก��ก�������� ����������������������������������

1. ���#ก$%������&�� Movie Properties 1�#$%����2 Modify > Movie

2. ก����� Frame Rate ��&�ก� 12 fps Dimensions Width��&�ก� 400 px C�D Dimensions Height 300 px

3. ก�������������� ����������1�#$%�����H���ก������������� Background Color ODP��กQ Dropper Tool $%�����H���ก����ก���������ก��

� ���#ก$%���������&�� Movie Properties

� ก�������� ���

�ก������������������������

Page 14: แผนการสอน

2 ก��J3$ I�'&()2'(/���#?

ก��$%���������������2P������������������

1. $%�����H���ก��� Pencil Tool �C� ����������

2. ����ก Options �����&��T��C� �����������PU�C Smooth

3. $%�����H��ก���������� 1 �������ก����������������C�D����1��� 2 �����PU�����2กC��1�W&�X�ก

� ���#ก$%� Pencil Tool

��P���#� Option T�� Pencil Tool

���������2PC��1�

Page 15: แผนการสอน

� ���#ก$%� Paint Bucket Tool

��P���#��� Fill Color

� ��������C��

4. $%�����H���ก��� Paint Bucket Tool �C� ����������

5. $%�����H���ก��� Fill Color ODP��กQ�����&��O���� $������ก��C��

6. ������������$��PU���C��

7. $%�����H���ก��� Fill Color C�������ก��C ��&�D�� �� (Gradient) ���T�#�

��P���#��� Fill Color

Page 16: แผนการสอน

� ���������T�#�

8. ��������������ก�PU����T�#��PU���ก`D�P���กC��1�

9. $%�����H���ก��� Brush Tool �C� ����������

10. ����ก Options Brush Tool �����&��T��C� �����������PU�C ��ก��T�����bก

11. $%�����H���ก��� Fill Color ODP��กQ�����&��O���� $������ก�����

12. $%�����H����2P�PU����b�C��1� �������� �

���#ก$%� Brush Tool

�P���#� Option

�� ����2P���b�C��1������&�� Frame

�� �P���#��� Fill Color

Tool 2

Tool 1

Frame By

Frame 3

Frame By

Frame 1

Frame By

Frame 2

Tools

3

Movie Propertie

s

Page 17: แผนการสอน

3. ก��+�$�)B�C I0'&(�U-/�@@ Frame By Frame

� ������2P��� ก��������������������C Frame By Frame ������������������

1. ������2P������1.2 T�� 1 - 12

2. $%�����H���ก��� Arrow Tool �C� ����������

3. $%�����H��ก��� �2P����������ODP��กQ�2P�������2ก����ก������

4. ���#ก$%������&�� Symbol Properties 1�#ก��ก�CPg� ����H F8 ����$%����2 Insert > Convert to Symbol

� ���#ก$%� Arrow Tool

� ����ก�2P����������

Page 18: แผนการสอน

� ���#ก$%������&�� Symbol Properties

� CP���2P����PU� Symbol 5. CP���2P����PU� Symbol 1�#ก�������������&�� Symbol Properties ����ก Behavior �PU�C Graphic

6. $%�����H���ก����i����� 5 (%&����������#������$����T 5)

7. C��ก Keyframe ����i�� 5 1�#���#ก$%����2 Insert > Keyframe ����ก�CPg�����H F6

8. �����C��ก Keyframe C���ODP��กQ��k��ก`H Keyframe ����i�� 5

� C��กก��C���W��i����� 5 P���2P����PU� Symbol

� ���#ก$%����2C��ก Keyframe

Page 19: แผนการสอน

� Keyframe ����i�� 5

���#ก$%����2 Rotate 9. ���#ก$%����2 Modify > Transform > Rotate ODP��กQPl��� �2P��� 8Pl�

10. $%�����H���ก������ X��# �C�����กTm������ �

11. C��ก Frame ����i�� 8 1�#$%�����H���ก���%&�� Frame ��� 8 C������#ก$%����2 Insert > Frame ����$%�CPg�����H F5

12. C������������� ���1�#���#ก$%����2 Control > Play ����ก�CPg�����H Enter ODP��กQ�������������C Frame By Frame

���P�� �P���#��2P���

�� C��ก Frame ����i�� 8

Page 20: แผนการสอน

4. ก��+�$�)B�C I0'&(�U-/�@@ Frame By Frame

�� C����������������

� ���#ก$%� Oval Tool

� CP���2P�PU� Symbol

�C��ก Keyframe

Page 21: แผนการสอน

������ Motion Tween

� ��/����� �! "��#�

Page 22: แผนการสอน

�)����� 9 ��! "� ก������������ก�����

&��' � 1. �#��'ก�����ก&�#�/ �� DocumentProperty ���� �Iก&�#�/�#� �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N . 2. �#��'ก�������/�I����������������� �Iก&�#�/�#� �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N .

3. �#��'ก������&��I������� ��/��&����� �! "��#��))���)����� �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N .

Page 23: แผนการสอน

4. �#��'ก�������/�I���ก������&��#�� �! "��#��)) Motiontween �/�������&�/')�'c��"��Jh�ก���&����� �'ก����������N .

� � � � �

Page 24: แผนการสอน

�@@?�, 27��0ก��%8�)��

กJNก���� 1 กJNก���� 2 ��

�! " D �ก^� �/� ���/� �/� ���/�

� � � � �

Page 25: แผนการสอน

�@@?�, 27��0ก��%8�)��

กJNก���� 3 กJNก���� 4 ��

�! " D �ก^� �/� ���/� �/� ���/�

Page 26: แผนการสอน

�@@+�) กTCXT7ก��2%!&CY)?�,+)IH

I1S0�กZS,%!&CY)?�,+)IH ��" 1. �bJ)'�J�����)��)�J�'��"��������� (2 ����) ��" 2. $! "�'��+�^N�J���"���"����tI�"! � (2 ����) ��" 3. �')tJ/�")��"���"����������� (3 ����) ��" 4. ��'� ���� �#���ก')ก�����o����)^ � (3 ����)

�� �! " D �ก^� ��" 1 ��" 2 ��" 3 ��" 4

�กl~+ก���'/t�����J�t�

9 D 10 ���� = /��ก 7 D 8 ���� = /�

5 D 6 ���� = �"��� � &�ก��� 5 ���� = ��"���')��̂�

Page 27: แผนการสอน

� � � � �