포트폴리오를 위한 디자인 작업의 애니메이션 GIF 스크린샷을 만드는 3가지 방법

최신 웹 디자인 프로젝트가 완료되면 이를 자랑하고 포트폴리오에 추가해야 합니다. 귀하의 웹사이트 방문자(및 잠재 고객!)는 귀하의 멋진 작업이 실제로 실행되는 것을 보고 싶어할 것입니다. 훌륭한 이미지가 핵심이며 디지털 공간에서는 프로젝트 기능을 설명하고 싶을 때가 있습니다. 애니메이션 스크린샷으로 과시하는 것이 완벽한 솔루션이 될 수 있습니다.

앱이나 웹 사이트의 작동 방식을 보여주는 멋지고 간단한 애니메이션 스크린샷을 보셨을 것입니다. 화면 캡처의 GIF는 사용자에게 특정 작업이 수행되는 방식에 대한 더 나은 아이디어를 제공하는 동시에 어떤 기능을 사용할 수 있는지 보여줍니다. 비디오는 확실히 선택 사항이며 웹에서 확실히 중요한 위치를 차지합니다. 심도 있는 제품 비디오 또는 사례 연구는 확실히 비디오 형식의 이점을 얻습니다. 그러나 애니메이션 스크린샷 GIF와 같이 더 간단하고 파일 크기를 고려한 선택이 원하는 것일 수 있습니다.

애니메이션 스크린샷이 포트폴리오에 중요한 이유

"GIF"로 발음하든 "JIF"로 발음하든, GIF는 단순히 재미있는 고양이와 영리한 태그라인이 있는 영화 클립 그 이상일 수 있음을 기억하는 것이 중요합니다. 프로젝트의 애니메이션 GIF는 눈길을 사로잡아야 하고 디자인 기능을 보여주기 위해 신중하게 계획해야 합니다. 인터페이스 요소에 애니메이션을 적용하는 것은 기능적이고 미학적인 목적이므로 GIF 파일은 이를 보여줍니다. 메뉴와 작업이 제공하는 옵션을 시연하는 것은 어떻습니까? 스크롤이 어떻게 작동하는지 보여주는 것은 어떻습니까? 기능을 표시하면 사용자가 앱이나 웹사이트가 어떻게 도움이 되는지 명확하게 알 수 있습니다.

GIF 제작 도구

GIF를 만드는 데 다음 도구 중 하나를 사용하는 것보다 열심히 일을 증명하는 더 좋은 방법은 없습니다. 아래의 예는 사용자가 옵션을 탭하고 더 자세한 내용을 본 다음 더 많은 콘텐츠를 보기 위해 스크롤할 때 어떻게 보이는지 보여줍니다.

참고 : 이 자습서에는 시각적 디자인 지침이 없습니다. 이 팁은 포트폴리오 프로젝트를 위한 웹사이트 또는 애플리케이션 디자인이 이미 완료되었다고 가정합니다.

Adobe Photoshop에서 애니메이션 GIF 스크린샷을 만드는 방법

제 생각에는 Adobe Photoshop과 Adobe After Effects가 작업에 가장 적합한 도구입니다. 둘 다 최종 제품에 대한 많은 제어를 허용합니다. 저는 개인적으로 GIF 화면 캡처를 만드는 데 Photoshop을 좋아합니다(대부분의 디자이너는 이에 매우 익숙합니다). 그래서 다음 예제는 그렇게 만들어집니다. 시작하자!

스크롤 기능 표시

이 디자인은 Adobe XD에서 수행되었지만 적절한 이름의 레이어와 함께 Photoshop으로 내보내졌습니다. 예제에는 목록 페이지에 대해 “MinTour Locations List”라는 레이어가 있고 세부 정보 페이지에 “Sculpture Garden Listing”이라는 레이어가 있으며 초기 스크롤 보기에서 벗어난 부분을 “Sculpture Garden Listing Overflow”라고 합니다.

1부

1. 타임라인 설정 및 위치 목록

타임라인 기능은 최종 제품에 대한 다양한 화면을 만드는 데 사용할 것입니다. 창 > 타임라인 으로 이동하여 타임라인 패널이 열려 있는지 확인합니다.

다음은 목록 페이지입니다. 사용자는 여기에서 시작하여 위치를 탭하고 세부 정보 페이지로 이동하여 스크롤하여 더 많은 세부 정보를 볼 수 있습니다.

이미 첫 번째 키프레임이 설정되어 있음을 알 수 있습니다. 키프레임에 올바른 보기가 표시되도록 올바른 레이어가 표시되는지 확인합니다.

선택 사항: 사용자가 탭하는 위치를 표시하려는 경우 점으로 표시되는 경우가 있습니다. 이렇게 하려면 점 영역이 있는 추가 프레임을 추가합니다.

2. 개별 위치 정보

레이어로 구성하는 기능은 큰 장점이며 화면 캡처 GIF를 만드는 동안 모든 것을 똑바로 유지하는 데 도움이 됩니다. 타임라인 패널의 옵션으로 이동하여 "새 프레임"을 선택합니다. 여기서도 마찬가지입니다. 올바른 레이어가 숨겨져 있거나 표시되어 있는지 확인하십시오. 이 경우 개별 목록을 표시해야 하므로 위치 목록 레이어가 숨겨집니다.

3. 개별 위치 상세 스크롤 내용

Sculpture Garden의 개별 목록 페이지에는 더 많은 콘텐츠가 있으므로 스크롤 영역이 사용자에게 표시되어야 합니다. 이것은 별도의 레이어에 있었기 때문에 이 오버플로 콘텐츠를 표시하기 위해 새 프레임을 만들었습니다.

4. 기간 선택

이것은 약간의 실험이 필요할 수 있지만 각 프레임의 지속 시간을 선택하는 것이 중요합니다. 사용자가 각 프레임을 볼 수 있는 충분한 시간을 갖기를 원하지만 다음 프레임을 보기 전에 너무 오래 기다릴 필요도 없습니다.

전체 애니메이션에 대해 총 5초 동안 각 프레임에 값을 입력했습니다.

5. 미리보기

현재까지 진행 상황을 살펴보는 것이 좋습니다. 타임라인 패널의 맨 아래 행에 재생 버튼이 있습니다. 무언가를 시도하고 개선할 수 있는 것이 있는지 확인하십시오.

(선택 사항) 트윈 컨트롤

물건이 올바르게 주문되었지만 약간 불안정한 것 같습니다. 스크린샷 애니메이션은 좀 더 부드럽게 보이도록 조정할 수 있습니다. 타임라인 옵션에는 "트윈" 옵션이 있습니다. 현재 프레임과 이전 프레임 사이에 자동으로 부드러운 애니메이션을 만들기 위해 더 많은 프레임이 자동으로 삽입될 수 있습니다.

목록에서 목록 오버플로에 이르기까지 Tween이 추가되어 스크롤 작업에 더 가깝습니다. 이러한 새 프레임은 0.05초의 매우 짧은 지속 시간을 갖도록 설정되었습니다(앱에서 스크롤은 상대적으로 빠르게 발생함).

Photoshop에서 이것이 계속 반복되게 하려면 "영원히"가 선택되어 있는지 확인하십시오. 루프의 개수가 설정되어 있으면 해당 값을 입력할 수 있습니다.

6. 화면캡쳐 GIF 저장하기 (화면흐름만)

이것을 애니메이션 화면 흐름으로 포함하려는 경우 저장이 마지막 단계가 될 것입니다. 이 때 스크린샷 애니메이션이 생성되며 올바른 GIF 형식으로 저장하기만 하면 됩니다. 정적 이미지를 저장하는 데 익숙할 수 있지만 일련의 이미지를 저장하는 것은 다릅니다. 파일 > 웹용으로 저장으로 이동하여 이 GIF 파일을 저장합니다.

여기에 GIF에 필요한 모든 설정이 표시됩니다. 색상 수에는 제한이 있으므로 내보내기 전에 최상의 상태를 얻을 수 있음을 기억하십시오. 256은 웹 사이트와 응용 프로그램의 색상 범위가 넓은 경향이 있기 때문에 가장 좋은 옵션일 가능성이 높지만 디자인에서 허용하는 경우 단순화할 수 있습니다(파일 크기를 작게 유지).

오른쪽 하단 모서리에 몇 가지 "애니메이션" 설정도 있습니다. 이것을 무한 반복하려면 Looping을 선택할 수 있습니다. 원하는 경우 설정된 횟수만큼 반복할 수도 있습니다. 원하는 위치에 저장하면 바로 사용할 수 있습니다!

2부: 장치에 표시되는 계층화된 화면

계속하기로 결정했다면 휴대폰에서 더 사실적으로 보이도록 레이어를 지정하는 데 몇 가지 추가 단계가 필요합니다. 타임라인 패널에서 "Flatten Frames Into Layers"를 선택합니다. 각 프레임은 평면 레이어로 변환되어 26개 프레임이 됩니다(26개의 레이어가 있음).

저장되면 전화 이미지를 파일에 추가해야 합니다. 이를 수용하려면 이미지 크기를 약간 조정해야 합니다.

1. 애니메이션 스크린샷의 캔버스 크기 조정

배경 이미지는 1300 X 920이므로 정확히 맞게 캔버스 크기를 조정해야 합니다. 이미지 > 캔버스 크기 로 이동하여 올바른 치수를 입력합니다.

2. 전화 화면에 배치할 레이어 준비

다음으로, 애니메이션이 맨 위에 레이어될 수 있도록 배경 이미지에 대한 새 레이어를 만듭니다. 여기에서 "모두 선택" 프레임 레이어가 유용할 것입니다.

3. 더블 체크 프레임

프레임이 계획한 대로 유지되는지 확인하는 좋은 시간입니다. 타임라인 패널에서 애니메이션을 재생하면 시퀀스가 ​​애니메이션된 것을 볼 수 있습니다.

4. 화면 기울이기

모든 화면 레이어가 선택되어 균일하게 유지되도록 한 번에 모두 기울어질 수 있도록 하는 것이 중요합니다. 편집 > 변형 > 기울이기 에서 이 작업이 수행됩니다.

약간의 실험이 필요하지만 모서리가 화면의 경계와 일직선이 되도록 조정하여 화면이 애니메이션으로 조명되는 것처럼 보이게 합니다.

5. 이미지 조정 및 GIF 화면 캡처 저장

이제 조정을 할 때입니다. 저장하기 전에 색상, 대비 또는 기타 최종 수정을 완료해야 합니다. 애니메이션 저장은 1부, 6단계에서 수행한 것과 동일합니다.

이 예에서는 배경의 채도를 낮추고 대비를 높여 애니메이션을 정말 돋보이게 했습니다. 이제 실제 장치에 있는 것 같습니다!

기피

Photoshop이 선호하는 도구가 아닌 경우 Giphy라는 무료 도구가 있습니다. (전문적인 용도 외에도 재미있는 GIF를 많이 만들 수 있습니다!)

"슬라이드쇼"를 선택하면 애니메이션 스크린샷을 만드는 데 좋은 옵션입니다. 이를 사용하려면 화면의 개별 파일을 저장해야 합니다. 그런 다음 정지 이미지를 끌어다 놓으면 프로세스가 시작됩니다.

파일이 업로드되면 "슬라이드쇼 만들기"를 선택합니다. 이미지 합치기가 완료되면 파일을 다운로드할 수 있습니다. 그것만큼 간단합니다!

녹음

이 앱은 매우 간단합니다. 컴퓨터 화면에서 발생하는 작업을 기록하고 기록을 Recordit.io 웹사이트에 업로드하고 GIF 다운로드 옵션과 함께 공유 가능한 링크를 만듭니다.

Recordit이 컴퓨터에 설치되면 아이콘이 작업 표시줄에 나타납니다. 선택하면 화면에서 녹화하려는 영역으로 드래그하여 선택할 수 있습니다. Adobe XD에서 미리 보기 모드로 전환하고 시연을 위해 프로토타입을 사용할 수 있었을 때 이것은 완벽했습니다.

포함할 영역을 선택하면 녹음 버튼이 나타납니다. "녹화"를 누르면 Recordit은 사용자가 생성한 경계 내에서 화면에서 발생하는 모든 것을 기록합니다. 녹음이 끝나면 "중지"를 선택하기만 하면 됩니다.

몇 초가 걸리지만 녹음이 중지되면 Recordit.io 사이트에서 호스팅되는 녹음으로 이동하는 링크가 포함된 팝업이 표시됩니다.

화면 캡처의 애니메이션 GIF는 사용자 흐름과 디자인 프로젝트의 작동 방식을 보여주는 좋은 방법입니다. 비디오도 그 자리에 있지만 GIF는 매우 빠르게 만들 수 있고 온라인 포트폴리오에 쉽게 추가할 수 있습니다.

무료 워크시트: 대상 고객 및 고객 페르소나

콘텐츠를 관련성 있고 매력적으로 유지하는 데 도움이 되는 실행 가능한 가이드를 찾고 계십니까? 이 3페이지 대화형 PDF는 청중을 찾고, 콘텐츠를 감사하고, 비즈니스 성장을 위한 게임 계획을 세우는 데 도움이 됩니다.

이 기사가 마음에 들면 다음 항목도 즐길 수 있습니다.

• CSS로 SVG 애니메이션을 만드는 방법
• WordPress 비디오 갤러리를 만드는 방법
• WordPress 사이트의 접근성을 높이기 위해 건너뛰기 링크를 사용하는 방법