소개

안녕하세요 여러분, 오늘 우리는 목업/템플릿을 만들고 사용하여 프로필 아이콘/사진을 다양한 크기로 시각화하는 방법을 볼 것입니다. 설계 과정에서 프로파일을 최적화하기 위한 원칙 또는 지침을 따릅니다. 마지막으로 소셜 미디어, 포럼, 채팅, 메신저 앱 등과 같은 다양한 플랫폼에서 사용할 수 있도록 이미지를 내보내는 방법입니다. 시작하겠습니다.

 

...

 

 

참고: 이 튜토리얼에 사용된 이미지는 튜토리얼 작성자가 디자인, 생성 또는 제작한 것입니다. Clip Studio Paint, Clip Studio 및 CELSYS의 로고는 해당 소유자의 것입니다.

 

 

1. 플랫폼 및 크기 탐색

첫 번째 단계는 프로필 이미지를 업로드할 여러 플랫폼 또는 플랫폼을 탐색하는 것입니다. 소셜 미디어, 채팅, 메신저 앱 또는 사용하려는 모든 것이 될 수 있습니다.

 

사용 중인 기기에서 스크린샷을 찍습니다. 바로 가기 또는 다른 방법을 사용하여 다른 플랫폼의 레이아웃을 캡처할 수 있습니다.

 

윈도우.

Windows+Shift+S 또는 Print-Screen(키) 누르기

 

맥.

Shift+Command+3 또는 Shift+Command+4(캡처 영역의 경우)를 누릅니다.

 

아이패드.

상단 버튼 + 볼륨 또는 홈 버튼을 누릅니다. 또한 애플 펜슬로 왼쪽 하단 모서리에서 위로 스와이프할 수도 있습니다.

 

삼성 태블릿.

전원 + 볼륨 작게 또는 홈 버튼(동시에)을 누릅니다. 화면을 가로질러 Palm Swipe를 사용할 수도 있습니다. 또는 S 펜으로 에어 커맨드 메뉴.

 

Clip Studio Paint에서 스크린샷을 열고 직사각형 선택 도구와 정보 팔레트를 사용하여 프로필에 사용된 크기를 검토하십시오. 정보 팔레트가 보이지 않으면 창 > 정보로 이동하십시오. 가로는 H, 세로는 V로 표시되는 너비와 높이를 확인할 수 있습니다.

 

프로필이 사용되는 모든 크기, 댓글, 로그인-로그아웃, 사용자 이름 등을 기록해 두십시오. 프로필 사진/아이콘을 시각화하기 위해 목업/템플릿을 만들기 위해 나중에 크기 번호를 검토할 수 있습니다.

 

다음은 크기 번호가 있는 내 목록입니다.

 

로그인 / 로그인 32x32 픽셀

대형 프로필 220x220픽셀

사용자 이름 120x120픽셀

댓글 50x50픽셀

아이콘 24x24픽셀

 

 

이 튜토리얼에서는 Windows PC에서 찍은 스크린샷을 기반으로 사용자 정의 크기를 사용할 것입니다. 이들은 Twitter, Instagram, YouTube, Facebook 등과 같은 다양한 플랫폼에서 사용되는 가장 일반적인 프로필 크기에 가깝거나 그 사이입니다. 그러나 이러한 크기는 절대적이지 않으며 사용 중인 장치의 화면에 맞게 변경될 수 있습니다.

 

 

2. 프로필의 종류

로고 또는 기호, 개인 또는 회사 이름, 풍경에서 애완 동물까지의 사진, 디지털 및 전통적인 일러스트레이션, 픽셀 아트 등과 같은 다양한 유형의 프로필 이미지를 찾을 수 있습니다.

 

이 튜토리얼의 뒷부분에서 우리는 3개의 예시를 보고 디자인 과정에서 내린 결정을 설명할 것입니다. (a) 하나는 픽셀 아트용이고 다른 하나는 사진용(b)이지만 평평하거나 스캔한 일러스트레이션에 동일한 팁을 사용할 수 있습니다. 그리고 (c) 이름 로고에 대한 것입니다.

 

참고: 이 예에서는 프로세스에 초점을 맞추고 도구의 세부 사항에 대해 설명하지 않거나 프로필 이미지를 만드는 방법을 단계별로 설명하지만 대신 작은 원에서 더 잘 보이도록 최적화하는 방법에 대해 설명합니다. 5가지 원칙 또는 지침을 따르는 사각형.

 

 

3. 프로필 사진/아이콘의 5가지 디자인 원칙 또는 가이드

나는 프로필 사진이나 아이콘을 디자인할 때 5가지 원칙이나 지침을 사용하려고 합니다. 단순성, 대비, 인식 가능, 확장성 및 자르기 모양이 있습니다. 그들에 대해 간략히 살펴보겠습니다.

 

단순함

 

너무 많은 세부 사항을 피하십시오. 세부 사항은 큰 크기에서 멋지게 보일 수 있지만 작은 크기에서는 보고 이해하기 어려울 수 있습니다.

 

 

대비

 

프로필 이미지를 더 쉽게 인지할 수 있습니다. 밝은 값 대 어두운 값 또는 보색/반대 색상을 사용할 수 있습니다. 플랫폼의 배경을 유리하게 사용할 수도 있습니다.

 

 

확장성

 

프로필 이미지가 다양한 크기에 맞춰질 수 있는지 확인하세요. 이미지의 단순성과 대비는 이 프로세스를 훨씬 쉽게 만듭니다.

 

 

인식 가능

 

모양이나 실루엣을 사용하여 다양한 축척에서 이미지를 알아볼 수 있도록 만들 수 있습니다. 색상을 사용하거나 프로필 사진/아이콘과 색상을 연관시킬 수도 있습니다.

 

 

자르기 모양

 

플랫폼 레이아웃의 모양(원, 사각형)에 따라 잘릴 것임을 알고 구성을 만들고 이미지를 정렬합니다. 의도하지 않은 작물을 피하십시오. 디자인에 자르기 모양을 사용하거나 통합할 수도 있습니다.

 

 

다음: 다음 장에서는 프로필을 디자인할 때 이 5가지 원칙을 쉽게 확인하기 위해 목업/템플릿을 만들고 사용하는 방법을 살펴보겠습니다. 그 후 우리는 내가 따르려고 하는 디자인 프로세스를 검토하고 몇 가지 예를 확인할 것입니다.

 

 

4. 프로필 목업/템플릿 (단계별 + 무료 다운로드)

이 장에서는 CLIP STUDIO PAINT에서 파일 개체를 사용하여 목업을 만드는 기본 단계를 볼 것입니다.

 

그러나 아래 링크에서 사용할 준비가 된 모형을 사용 방법과 할 수 있는 것과 할 수 없는 것에 대한 PDF와 함께 다운로드할 수 있습니다. 요약하면 사용할 수 있지만 라이센스, 배포 또는 판매하지 마십시오. 그런 다음 계속하거나 다음 장인 다중 Windows 설정에서 파일 개체 업데이트로 이동할 수 있습니다.

 

참고: 이러한 모형/템플릿을 호출하더라도. Clip Studio Paint에서 새 문서를 만들 때 나타나는 템플릿이 아니라 .clip 파일 문서입니다.

 

 

무료 모형/템플릿 다운로드 링크:

 

1000x1000px 캔버스를 사용하여 프로필용 목업/템플릿을 다운로드합니다.

 

56x56 픽셀 캔버스를 사용하여 픽셀 아트 프로필용 목업/템플릿을 다운로드합니다.

 

4.1 1:1 프로필 문서 만들기

새 프로필을 처음부터 만들거나 적용할지 여부. 우리는 모든 플랫폼에서 표준인 1:1 종횡비로 작업할 것입니다.

 

1. 일러스트레이션, 사진 또는 이름 로고를 사용하는 프로필의 경우. 새 문서를 만들고 사전 설정에서 '정사각형(1000 x 1000px)'을 선택합니다. 프로필 문서의 이름을 지정하고 Clip Studio Paint .clip 파일로 저장합니다. 이렇게 하면 파일 개체로 사용할 수 있습니다. 그러나 원하는 경우 .psd 파일을 사용하여 파일 개체를 만들 수도 있습니다.

 

2. 픽셀 아트 프로필의 경우 작은 캔버스 크기를 사용하여 사각형을 표시할 수 있습니다. 56x56px의 중간 크기를 만들 것입니다. 그러나 더 큰 픽셀의 경우 16x16, 24x24와 같은 더 작은 크기를 시도할 수도 있습니다. 또는 64x64px 이상의 더 큰 캔버스를 사용하여 세부 정보를 추가하세요. 그런 다음 나중에 파일 개체로 사용할 수 있도록 파일을 Clip Studio Paint 파일(.clip)로 저장합니다.

 

4.2 파일 객체가 있는 목업/템플릿

 

문서 생성 및 저장

 

소셜 미디어, 채팅, 메신저 앱 또는 기타 플랫폼을 사용할 때와 유사한 방식으로 프로필 사진/아이콘을 다양한 크기로 시각화하기 위해 720x1080 픽셀의 새 문서를 만들 것입니다. 어두운 테마를 시뮬레이션하려면 용지의 색상을 짙은 회색이나 검정색으로 변경할 수 있습니다.

 

그런 다음 이전에 만든 프로필 사진/아이콘 파일과 동일한 위치에 문서를 저장합니다.

 

 

파일 개체로 프로필 가져오기

 

이제 프로필 사진/아이콘 또는 픽셀 아트의 .clip 파일을 방금 만든 문서로 가져옵니다.

 

(1) 파일 > 가져오기 > 파일 객체 생성에서… 파일 객체로 사용할 파일을 선택하고 열기(2)를 클릭합니다.

 

방금 만든 파일 개체에 대한 메시지(3)가 표시됩니다. 그러면 파일 개체가 옆에 링크된 파일 아이콘과 함께 레이어 팔레트에 나타납니다(4).

 

 

그리드를 사용하여 크기 조정

 

사용할 플랫폼 및 사이트의 스크린샷에서 프로필에 사용된 크기를 확인하거나 이 자습서에 사용된 사용자 정의 크기 목록을 검토하십시오.

 

 

로그인 / 로그인 32x32 픽셀

대형 프로필 220x220픽셀

사용자 이름 120x120픽셀

댓글 50x50픽셀

아이콘 24x24픽셀

 

 

그런 다음 보기 > 그리드/눈금자 막대 설정으로 이동하여 분할 수를 1로 변경하고 간격을 프로필에 사용된 크기 중 하나(예: 100px)와 일치시킵니다. 그리고 View > Grid에서 그리드를 보이게 합니다.

 

이제 개체 도구(단축키 O)를 사용하여 모서리에서 끌어 파일 개체의 크기를 조정하고(1) 그리드의 사각형 중 하나와 정렬합니다(2).

 

(3) 정보 팔레트에서 크기를 다시 확인할 수 있습니다. 레이어 팔레트에서 Ctrl 키를 누른 채 축소판(4)을 클릭하거나 > 레이어에서 선택 > 선택 만들기를 마우스 오른쪽 버튼으로 클릭합니다.

 

 

중요한:

(1) 도구 속성 팔레트에서 [보간 방법]을 높은 정확도(평균 색상)로 변경합니다. 이 방법은 1000x1000px 프로필 및 픽셀 아트에서 작동합니다. 옵션이 표시되지 않으면 렌치 아이콘을 클릭하고 옆에 있는 눈(2)을 클릭하여 하위 도구 세부 정보 팔레트에서 옵션을 표시합니다.

 

 

 

자르기 모양

 

 

이제 아래의 빈 레이어에 있고 그리드에 맞추기가 활성화되어 있습니다(CTRL+3). 타원 도구로 1x1 원을 그립니다.

 

 

파일 개체를 원 위에 정렬하고(1) 레이어 팔레트에서 파일 개체를 선택하고 [아래 레이어로 클리핑] 아이콘(2)을 클릭합니다. 이것은 다른 플랫폼에서 사용되는 타원형 자르기를 에뮬레이트합니다.

 

그런 다음 그리드의 크기를 다시 변경하여 다른 프로필 크기와 일치시킵니다. 로그인(1), 큰 프로필(2), 사용자 이름(3), 댓글(4) 및 아이콘(5)에 사용된 모든 크기를 완료할 때까지 각각에 대해 프로세스를 반복합니다.

 

 

밝고 어두운 테마를 만들 수 있습니다. 그리고 타원형 및 둥근 직사각형 자르기를 만들어 프로필이 다른 사이트와 플랫폼에서 어떻게 보일지 미리 봅니다.

 

 

5. 다중 Windows 설정에서 파일 개체 업데이트

창 문서 열기 및 재정렬

 

 

위의 모형을 다운로드한 경우. 프로필 사진(또는 프로필 픽셀 아트) 파일과 목컵/템플릿 중 하나(프로필 - 원 또는 프로필 - 사각형)를 열거나 CLIP STUDIO PAINT로 드래그합니다.

 

또는 동일한 위치 폴더에 생성하여 저장한 파일을 엽니다.

 

그런 다음 (1)을 클릭하고 캔버스 중 하나의 탭을 끌어 왼쪽이나 오른쪽으로 고정하고 빨간색 오버레이가 표시되면 놓습니다(2).

 

이제 두 문서를 동시에 볼 수 있습니다. 네비게이터 팔레트에서 1 x 1 프로필 캔버스에 대해 네비게이터에 맞춤을 사용할 수 있습니다. 이 기능은 특히 픽셀 아트에 정말 유용할 수 있습니다.

 

파일 객체 저장 및 업데이트

 

 

이제 프로필 파일에 무엇이든 그리거나, 칠하거나, 쓰고 작업을 저장하십시오. 목업 파일에서 자동으로 업데이트되어야 합니다.

 

목업/템플릿 캔버스에 있는 경우. 레이어 > 파일 개체 > 모든 파일 개체 업데이트로 이동할 수도 있습니다.

 

이 설정을 통해 프로필 사진/아이콘에 대해 작업하고 프로세스에서 '프로필에 대한 5가지 디자인 원칙 또는 가이드'를 확인할 수 있습니다. 프로필 이미지를 사용할 플랫폼과 유사한 레이아웃으로 다양한 크기를 시각화하는 여러 단계를 동시에 저장할 수 있습니다.

 

 

6. 디자인 프로세스(프로필 아이콘/그림)

이 장에서 우리는 설계 과정에서 취해진 결정을 설명하기 위해 프로파일에 대한 '5가지 원칙 또는 지침'을 사용할 것입니다. 간단함, 대비, 확장성, 인식 가능, 자르기 모양이 있습니다.

 

 

6.1 프로세스 단계

우리가 따를 디자인 프로세스의 단계는 집중, 식별, 개선, 이중 확인 및 반복입니다.

 

1. 하나의 원칙에 집중하십시오(위에서 언급한 5가지 중).

2. 프로필 이미지에서 문제 또는 문제를 식별합니다.

3. 개선하고 다양한 접근 방식과 솔루션을 시도합니다. 검토하고 필요한 경우 계속 개선하십시오.

4. 목업 및 내보내기를 사용하여 이미지의 확장성을 다시 확인하거나...

5. 반복합니다. 다른 원칙에 집중하고 과정을 반복하십시오.

 

 

6.2 프로필 예

이제 위에서 언급한 단계에 따라 세 가지 다른 예를 살펴보겠습니다. 우리는 이전 장에서 했던 것처럼 도구 세부 사항을 자세히 다루지 않고 프로세스에 집중할 것입니다. 각 예제에 사용된 도구 및 기술에 대한 자세한 내용이 포함된 자습서 또는 팁이 필요한 경우 의견에 알려주십시오.

 

a) 픽셀 아트의 예

시작하기 위해 3D 모델을 기반으로 앤티앨리어싱이 없는 실루엣을 만들었습니다. 그리고 모양이 (1) 머리로 인식할 수 있는지 확인합니다. 그런 다음 (2) 단순성에 대해 6개 값의 감소 회색 팔레트를 사용하여 앤티앨리어싱 없이 페인팅합니다.

 

그 후, 나는 피사체 얼굴에서 개선하고 더 많은 (3) 대비를 얻기 위해 색채 원에서 반대 색상을 사용하여 그라디언트 맵으로 색상을 추가했습니다. 더 작은 프로필 크기에서는 머리가 너무 크고 비율이 약간 맞지 않게 보였습니다. 그래서 뒤쪽에 디더링 그라디언트를 추가하여 시각적 인식을 피하거나 줄이고 (4) 확장성을 개선했습니다.

 

 

 

참고: 더 작은 캔버스와 더 적은 색상 또는 값을 사용하여 픽셀 아트의 단순성을 향상시킬 수 있습니다. 그러나 세부 사항을 줄이고 이미지를 더 스타일화합니다. 그런 다음 필요한 경우 이미지를 개선하고 내보낼 수 있도록 다른 솔루션을 다시 확인하고 탐색할 수 있습니다.

 

 

b) 사진/일러스트 예시

언뜻 보기에 이미지에 프로필로 사용하려면 (1) 대비가 더 필요하다는 것을 알았습니다. 그래서 선택을 하고 배경에서 피사체(매)를 잘라냈습니다. 1000x1000px 프로필 캔버스에 붙여넣고 (2) 피사체(새)의 머리 부분이 잘리지 않도록 중앙에 배치합니다.

 

그런 다음 배경에 그라디언트 레이어를 추가하여 더 많은 (3) 대비를 만들었습니다. (4) 대비를 개선하기 위해 조정 레이어, 밝기/대비, 톤 곡선 및 그라디언트 맵을 사용했습니다. 피사체(매)와 배경 사이에 반대 또는 보색을 사용하려고 합니다.

 

그 후 플랫폼에서 가장 많이 사용되는 작물의 모양을 통합하기 위해 원(5)을 추가하기로 결정했습니다. 이것은 또한 다른 평면과 깊이감을 만드는 데 도움이 되었습니다. 피사체(매)를 원과 배경에서 분리하려면 실루엣을 유지하려고 노력합니다(6) 인식 가능. 나는 그 사이에 미묘한 그림자를 추가했습니다. 마지막으로 프로필(7) 확장성(Scalability)의 작은 크기를 다시 확인합니다.

 

 

 

참고: 이 팁을 적용하고 사람, 애완 동물, 사물 등의 사진과 함께 사용할 수 있습니다. 평평하게 하거나 스캔한 그림에 적용할 수도 있습니다. 먼저 복사본을 만들고 원본 또는 소스 파일에서 직접 작업하지 마십시오.

 

 

c) 이름 로고 예

이 가상의 개인 로고 이름에서. 작은 크기에서 읽기에는 이름이 조금 길어 보인다는 것을 알 수 있습니다. (1) 확장성. 그래서 이 경우에는 (2) 단순성에 'a'만 사용하기로 결정했습니다.

 

그런 다음 댓글과 아이콘 크기에 대해 '''가 약간 작게 보입니다. 그래서 더 작은 크기에 적응하기 위해 '확장성'을 더 크게 만들었습니다. (3) 확장성. 마지막으로 두 버전의 로고와 연결될 녹색 색상을 선택하여 아이콘과 전체 이름 로고를 인식할 수 있게 만듭니다.

 

 

참고: 항상 하나의 문자 또는 하나의 평면 색상을 사용할 필요는 없습니다. 다양한 접근 방식이나 솔루션을 시도하고 자신과 프로필에 가장 적합한 것이 무엇인지 확인할 수 있습니다. 작은 크기에서도 이미지를 인식할 수 있는지 확인하십시오. 예를 들어 글꼴이 너무 밝거나 얇은 경우 동일한 패밀리 글꼴에서 굵게 옵션을 시도하거나 동일한 색상의 테두리 효과를 추가할 수 있습니다.

 

 

...

 

 

7. 플랫폼용 프로필 내보내기

프로필 사진/아이콘을 내보내기 전에 이미지 크기를 조정해야 하는 경우와 플랫폼에서 지원하는 형식에 대해 알아보겠습니다.

 

 

 

이미지 크기 조정

 

1000x1000px의 이미지 크기는 모든 소셜 미디어, 메신저 앱 또는 포럼에 충분해야 합니다. 그러나 모든 플랫폼에서 프로필 이미지의 최소 또는 최대 크기를 권장할 수 있습니다. 400픽셀만 필요할 때 이미지가 2048픽셀처럼 더 큰 경우. 또는 픽셀 아트의 경우 더 작습니다. 항상 먼저 이미지 크기를 직접 조정하고 플랫폼 방식에 의존하여 이미지 크기를 조정하지 마십시오.

 

중요 참고 사항: 두 경우 모두 항상 먼저 복사본을 만들고 원본이나 소스 파일이 아닌 복사본의 크기를 조정하십시오.

 

 

 

2048 이상의 큰 이미지의 경우 편집 > 이미지 해상도 변경으로 이동하는 것이 좋습니다. 그리고 보간 방법으로 높은 정확도(평균 색상)를 선택합니다. 그런 다음 픽셀 단위로 정확한 크기를 입력하고 OK를 누를 수 있습니다.

 

 

픽셀 아트 이미지의 경우 편집 > 이미지 해상도 변경으로 이동하는 것이 좋습니다. 그리고 Hard edge(최근접 이웃) 방법을 선택합니다. 권장 사항에 가까운 크기가 될 때까지 척도 번호를 변경할 수 있습니다. 또는 정확한 크기를 입력하고 정사각형이 원본과 복사본에서 동일하게 보이는지 확인하십시오.

 

 

형식

 

프로필 이미지의 가장 일반적인 형식은 PNG(Portable Network Graphics)와 JPEG 또는 JPG(Joint Photographic Experts Group)입니다.

 

 

PNG 파일은 주로 로고, 픽셀 아트, 아이콘, 그래픽 일러스트레이션 및 평면 또는 일반 색상 및 그래픽과 함께 사용됩니다. 또는 투명도가 있는 이미지가 필요한 경우. PNG 파일은 품질이 더 좋은 경향이 있지만 더 큰 파일 크기를 생성할 수 있습니다.

 

 

JPEG 파일은 사진과 함께 널리 사용되며 파일 크기를 많이 압축할 수 있습니다. 그러나 너무 많이 압축하면 이미지 품질이 떨어질 수 있습니다. 이 형식을 그림, 일러스트레이션 및 기타 그래픽과 함께 사용할 수 있습니다. 그러나 픽셀 아트, 깨끗한 로고 및 아이콘과 함께 사용하는 것은 권장하지 않습니다. 또한 JPG 파일은 투명도를 지원하지 않습니다.

 

 

가능하면 PNG를 사용하거나 품질이 80% 이상인 JPEG를 사용하는 것이 좋습니다. Facebook과 같은 일부 플랫폼은 이미지를 업로드하면 이미지 품질을 훨씬 더 압축할 수 있습니다.

 

 

내보내기(단일 레이어)

 

이미지를 내보내려면 파일 > 내보내기(단일 레이어)로 이동하고 원하는 형식을 선택합니다.

 

이제 표현 색상으로 RGB 색상(1)을 선택합니다. (2) 스케일 비율을 100%로 유지합니다. 나머지는 기본값으로 두고 확인을 누릅니다. (3) 미리보기를 확인하고 확인을 다시 클릭합니다.

 

JPEG 파일의 경우 품질을 80 이상으로 유지하고 ICC 프로파일을 포함시키십시오. 그런 다음 확인을 누릅니다.

 

프로필 크기를 변경하는 경우 이미지 크기를 조정하기 전에 복사본을 저장해야 합니다. 원본 또는 원본 문서의 크기를 변경하지 마십시오. 문서의 크기를 쉽게 인식할 수 있도록 파일 이름에 치수를 추가할 수도 있습니다.

 

 

추가 정보: Facebook 또는 Telegram과 같은 일부 플랫폼은 Android 또는 iOS의 모바일 장치에서 업로드할 때 애니메이션 gif 파일 또는 MP4 동영상 파일을 지원할 수 있습니다. 이러한 유형의 파일에 대한 예를 보지 못하더라도 애니메이션 프로필을 디자인하기 위해 본 팁, 프로세스 및 원칙을 언제든지 적용할 수 있습니다.

 

 

요약

요약하자면 프로필 사진이나 아이콘을 동시에 다양한 크기로 시각화하기 위해 목업/템플릿을 만들고 사용하는 방법을 살펴보았습니다. 또한 설계 과정에서 프로파일을 만들고 최적화하는 데 도움이 될 수 있는 원칙이나 지침을 보았습니다. 마지막으로 소셜 플랫폼, 메신저 앱, 채팅 포럼 등에 대한 프로필을 내보내기 위해 이미지 크기를 조정하는 시기와 방법입니다.

 

따라서 자신의 워크플로에서 사용할 수 있는 유용한 정보를 찾으셨기를 바랍니다. 기사를 읽어주신 모든 분들께 감사드립니다. 에드가 "See you"라고 말하는 것입니다.