Difference between revisions of "Free transform"
Navigation menu
From Design pattern
(→Example) |
|||
| (22 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
| − | 두 | + | Free transform는 하나 혹은 두 개의 점을 조작하여 작업물이나 항목의 크기, 비율, 각도를 자유롭게 한꺼번에 변경하는 패턴이다. 크기나 각도에 제약이 없으며, 손의 움직임에 따라 직관적으로 이미지가 변화하기 때문에 작업이 간단하다. |
| + | Two fingers 형태는 하나의 그림이나 사진, 도장, 텍스트를 수정할 때 사용되며 두 개의 손가락이나 손이 접촉한 두 개의 점을 대각선으로 하는 사각형을 기본 형태로 한다. 크기, 비율, 각도 뿐 아니라 위치까지도 자유롭게 변경이 가능하며 직관적인 변경이 가능하다. Control pointer 형태는 중심이 한 점에 고정된 상태에서 하나의 꼭지점을 조절점으로 하여 조절점의 위치에 따라 크기와 각도 변경이 자유롭다. 단, 이 경우 비율 변경은 불가능하며 위치는 조절점 대신 이미지 전체를 잡고 drag하는 형태 등으로 변경이 가능하다. | ||
| − | == | + | === With this pattern, we can solve... === |
| + | 항목을 확대 및 축소하거나, 그 크기와 비율, 각도를 모두 변경하고자 할 때 활용된다. Free transform을 통해 대형 모니터에서 작은 화면들을 조절할 때, 사진이나 그림 편집 앱이나 메모 앱 등에서 이미 존재하는 이미지를 사용자가 원하는대로 구성할 수 있다. | ||
| − | + | * Free transform을 활용할 때 two fingers 의 경우 테두리가 조절 가능한 것처럼 보이는 GUI를 가지고 있거나, control pointers의 경우 한 꼭지점이 테두리보다 조금 큰 원이나 다른 도형으로 되어 있는 등 어떤 형태로 작동이 가능한지 직관적인 구성으로 파악할 수 있어야 한다. | |
| − | * 두 | + | * Free transform의 경우 직접적으로 하나나 두 개의 점을 조작하는 방식이기 때문에 제스처보다는 터치에 국한되어 활용된다. |
| − | + | * 크기만 변경해주는 경우는 [[Object zoom in/out]], 각도만 변경되는 경우는 [[Rotate object]], 여러 장의 사진으로 구성된 꼴라쥬에서 각각의 사진의 비율을 맞추는 경우는 [[Change proportion]]에 해당된다. Rotate object의 경우는 90도 각도로만 변경 가능한 경우가 아니라면, 주로 Free transform 패턴이 활용된다. | |
| − | === | + | === Example : iOS_Real Diary === |
| − | + | [[File:Free transform.jpeg]] | |
| − | + | ||
| − | + | ||
| − | + | ---- | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | === | + | == Free transform with two fingers == |
| − | * | + | |
| − | * | + | === iOS_Clocks === |
| − | + | {{#Widget:Vimeo|id=94745469|width=665|height=374}} | |
| + | |||
| + | === Hanzon_Digital video kiosk === | ||
| + | * #00:35-#00:38 | ||
| + | {{#Widget:Youtube|id=c3ykXNc20zI|width=665|height=374}} | ||
| + | |||
| + | === LG전자_대형 터치모니터 === | ||
| + | * #00:51-#00:57 | ||
| + | {{#Widget:Youtube|id=Hi6uzQ3Iv44|width=665|height=374}} | ||
| + | |||
| + | === Sky TV event_Multi touch table === | ||
| + | * #00:22-#00:24 | ||
| + | {{#Widget:Vimeo|id=6419294|width=665|height=374}} | ||
| + | |||
| + | ---- | ||
| + | |||
| + | == Free transform with control pointer == | ||
| + | |||
| + | === iOS_Real Diary === | ||
| + | {{#Widget:Vimeo|id=93552096|width=300|height=533}} | ||
| + | |||
| + | === iOS_Filter Frame=== | ||
| + | {{#Widget:Vimeo|id=93374332|width=533|height=395}} | ||
[[Category:Edit object]] | [[Category:Edit object]] | ||
| − | |||
Latest revision as of 19:00, 31 July 2014
Free transform는 하나 혹은 두 개의 점을 조작하여 작업물이나 항목의 크기, 비율, 각도를 자유롭게 한꺼번에 변경하는 패턴이다. 크기나 각도에 제약이 없으며, 손의 움직임에 따라 직관적으로 이미지가 변화하기 때문에 작업이 간단하다.
Two fingers 형태는 하나의 그림이나 사진, 도장, 텍스트를 수정할 때 사용되며 두 개의 손가락이나 손이 접촉한 두 개의 점을 대각선으로 하는 사각형을 기본 형태로 한다. 크기, 비율, 각도 뿐 아니라 위치까지도 자유롭게 변경이 가능하며 직관적인 변경이 가능하다. Control pointer 형태는 중심이 한 점에 고정된 상태에서 하나의 꼭지점을 조절점으로 하여 조절점의 위치에 따라 크기와 각도 변경이 자유롭다. 단, 이 경우 비율 변경은 불가능하며 위치는 조절점 대신 이미지 전체를 잡고 drag하는 형태 등으로 변경이 가능하다.
Contents
With this pattern, we can solve...
항목을 확대 및 축소하거나, 그 크기와 비율, 각도를 모두 변경하고자 할 때 활용된다. Free transform을 통해 대형 모니터에서 작은 화면들을 조절할 때, 사진이나 그림 편집 앱이나 메모 앱 등에서 이미 존재하는 이미지를 사용자가 원하는대로 구성할 수 있다.
- Free transform을 활용할 때 two fingers 의 경우 테두리가 조절 가능한 것처럼 보이는 GUI를 가지고 있거나, control pointers의 경우 한 꼭지점이 테두리보다 조금 큰 원이나 다른 도형으로 되어 있는 등 어떤 형태로 작동이 가능한지 직관적인 구성으로 파악할 수 있어야 한다.
- Free transform의 경우 직접적으로 하나나 두 개의 점을 조작하는 방식이기 때문에 제스처보다는 터치에 국한되어 활용된다.
- 크기만 변경해주는 경우는 Object zoom in/out, 각도만 변경되는 경우는 Rotate object, 여러 장의 사진으로 구성된 꼴라쥬에서 각각의 사진의 비율을 맞추는 경우는 Change proportion에 해당된다. Rotate object의 경우는 90도 각도로만 변경 가능한 경우가 아니라면, 주로 Free transform 패턴이 활용된다.
Example : iOS_Real Diary
Free transform with two fingers
iOS_Clocks
Hanzon_Digital video kiosk
- #00:35-#00:38
""
LG전자_대형 터치모니터
- #00:51-#00:57
""
Sky TV event_Multi touch table
- #00:22-#00:24
Free transform with control pointer
iOS_Real Diary
iOS_Filter Frame