웹 디자이너를 위한 20가지 포토샵 트릭

아마도 모든 웹 디자이너는 자신만의 좋아하는 Photoshop 트릭 세트를 가지고 있을 것입니다. 좋은 이유가 있습니다. Adobe의 강력한 이미지 편집 기능은 웹 디자인 세계의 핵심입니다. 이 우수한 소프트웨어와 광범위한 기능에 필적할 수 있는 프로그램은 거의 없습니다.

그러나 대부분의 웹 디자이너는 Photoshop을 사용하는 방법을 알고 있지만 항상 배울 수 있는 것이 더 많습니다. 결국 이 프로그램은 강력할 뿐만 아니라 복잡합니다. 또한 정기적으로 업데이트를 통해 새로운 항목이 추가됩니다.

이러한 이유로 좋아하는 도구를 계속 탐색하는 것이 좋습니다. 이를 돕기 위해 이 기사에서는 최고의 Photoshop 트릭을 살펴보겠습니다. 워크플로를 개선하고, 일과 삶을 더 쉽게 만들고, 시간을 절약하고, 가능한 최고의 웹사이트를 디자인하는 데 도움이 되는 것들입니다.

Photoshop에 대해 자세히 알아볼 준비가 되셨습니까? 그런 다음 계속 읽으십시오.

웹 디자인 마법사로 변신시키는 Photoshop 트릭

다음 팁은 초급 수준에서 더 복잡한 자료에 이르기까지 다양합니다. 그들 각각은 당신이 될 수있는 최고의 웹 디자이너를 돕기 위해 선택되었습니다.

1. 작업 공간 간소화

기본부터 시작하겠습니다. 워크플로를 개선하기 위해 가장 먼저 해야 할 일은 Photoshop을 사용하는 방식을 지원하는 방식으로 Photoshop을 설정하는 것입니다. 결국 더 날카로운 도구를 사용하면 작업이 더 쉬워집니다.

이러한 이유로 첫 번째 중지는 Window > Workspace > Graphic and Web 입니다. 이 옵션을 선택하면 사용 가능한 도구가 웹 디자인에 사용할 가능성이 가장 큰 도구로 변경됩니다.

그런 다음 편집 > 기본 설정으로 이동합니다. 여기에서 가장 중요한 중지 중 하나는 Units & Rulers입니다. 여기에서 선택하는 측정값(대부분 픽셀)이 모든 문서의 기본값이 됩니다.

(빠른 힌트: 단일 문서의 눈금자를 변경하려면 해당 문서를 마우스 오른쪽 버튼으로 클릭하고 원하는 측정 단위를 선택하기만 하면 됩니다.)

그런 다음 환경 설정 > 성능 > 기록 및 캐시 로 이동하여 웹/UI 디자인을 클릭합니다.

그렇게 하면 많은 레이어가 있는 더 작은 파일을 선호하도록 캐시 설정이 변경되며, 이는 주로 작업하게 될 것입니다.

같은 위치에서 기록 상태의 수를 선택할 수도 있습니다. 취소하려는 경우 되돌릴 수 있는 단계 수입니다.

마지막으로 환경 설정을 종료하고 모든 문서를 닫은 다음 키보드의 T 버튼을 누릅니다. 그러면 화면 상단에 글꼴 메뉴가 나타납니다. 여기에서 설정한 모든 항목은 그때부터 새 문서의 표준이 됩니다. Myriad Pro를 그렇게 좋아하는 사람은 아무도 없기 때문입니다.

2. 키보드 단축키 배우기

정기적으로 사용하는 프로그램의 경우 일반적으로 키보드 단축키를 배우는 것이 좋습니다.

예를 들어 이 게시물을 작성하는 동안 Ctrl+Alt+2/3 을 사용하여 h2 및 h3 제목을 만듭니다. 키보드에서 손을 떼지 않아도 되므로 편집기 도구 모음을 사용하는 것보다 훨씬 빠릅니다.

포토샵도 마찬가지입니다. 간단한 키 입력으로 작업을 수행하는 방법을 아는 것이 메뉴를 클릭하는 것보다 훨씬 빠릅니다.

이 기사 전체에서 많은 키보드 단축키를 언급할 것입니다. 그러나 가장 일반적인 Photoshop 작업에 대한 바로 가기를 배우기 위해 이 치트 시트도 권장합니다. 그 외에도 반복해서 하는 일에 대한 키보드 단축키를 확인하는 습관을 들이는 것도 좋은 생각입니다.

3. 그룹 및 이름 레이어

Photoshop으로 작업할 때 수많은 레이어로 작업하게 됩니다. 대부분의 요소는 자체 레이어를 가질 뿐만 아니라 밝기/대비와 같은 수정 사항도 레이어로 추가됩니다.

이러한 이유로 매우 빠르게 혼동될 수 있습니다. 운 좋게도 이를 줄일 수 있는 옵션이 많이 있으며 그 중 두 가지는 레이어를 그룹화하고 이름을 지정하는 기능입니다.

먼저 레이어를 두 번 클릭하여 원하는 이름으로 변경할 수 있습니다.

그렇게 하면 레이어에 배경 이미지, 메뉴 또는 사이드바가 포함되어 있는지 쉽게 이해할 수 있습니다.

또는 Ctrl 키 를 누른 상태 에서 개별 레이어를 선택하거나 Shift 키 를 눌러 인접 레이어 범위를 표시하여 한 번에 여러 레이어를 선택할 수도 있습니다. 그런 다음 Ctrl+G 는 그룹으로 바꿉니다.

또는 레이어를 마우스 오른쪽 버튼으로 클릭하고 거기에서 그룹 옵션을 선택합니다. 어느 쪽이든, 레이어가 훨씬 더 정리됩니다. 또한 그룹화된 레이어의 이름도 지정할 수 있습니다!

4. 필터 레이어

레이어 이름 지정 및 그룹화는 좋은 시작입니다. 그러나 수십 또는 수백 개로 작업할 때 여전히 쉽게 혼동될 수 있습니다.

이러한 경우 레이어를 필터링할 수도 있습니다. 이렇게 하려면 레이어 메뉴 상단에 있는 메뉴를 사용하여 유형, 이름, 효과, 색상 등으로 필터링하면 됩니다.

또는 이동 도구를 사용하여 Ctrl 키 를 누른 상태에서 레이어나 개체를 클릭하여 레이어를 직접 선택합니다.

5. 그리드 생성

PureSolution/Shutterstock.com의 이미지.

그리드는 웹 디자인에서 가장 중요한 원칙 중 하나입니다. 디자인에 질서를 부여하고 물건을 배치하는 데 도움이 됩니다. 이러한 이유로 Photoshop에서도 격자를 만드는 것이 합리적입니다.

그렇게 하려면 보기 > 새 안내선 레이아웃을 사용 합니다. 또는 눈금자를 클릭하고 문서로 드래그하여 가로 및 세로 안내선을 만듭니다. Ctrl 을 사용하여 기존 안내선을 이동합니다.

6. 색상 견본 가져오기

HTML, CSS 또는 SVG 파일에서 색상 견본을 Photoshop으로 직접 로드할 수 있습니다. 이렇게 하면 로고와 같은 기존 자산으로 작업할 때 색 구성표를 위한 훌륭한 출발점이 됩니다.

이 Photoshop 트릭을 활용하려면 견본 패널을 열고 오른쪽 상단 모서리에 있는 드롭다운 메뉴를 클릭한 다음 견본 로드 를 선택합니다. 이제 해당 파일로 이동하여 열어서 새 색상 견본을 가져옵니다.

7. 사용자 정의 모양 저장

특히 동일한 사이트 또는 유사한 디자인을 가진 웹 사이트에 대해 여러 페이지를 디자인할 때 동일한 개체와 모양을 계속해서 사용하는 자신을 발견하게 될 것입니다. 따라서 빠른 재사용을 위해 사용자 정의 모양으로 저장하는 것이 좋습니다.

이렇게 하려면 경로 선택 도구(검은색 화살표)를 사용하여 해당 모양을 마우스 오른쪽 버튼으로 클릭합니다. 그런 다음 사용자 정의 모양 정의 를 선택합니다. 이렇게 하면 사용자 정의 모양 도구의 상단 표시줄 옵션을 통해 이 모양에 액세스할 수 있습니다. 모양: 이라고 표시된 드롭다운 메뉴를 클릭하고 저장된 모양을 선택하기만 하면 됩니다.

8. 배경색과 전경색 간 전환

아이콘을 클릭하지 않고 배경색과 전경색 사이를 앞뒤로 전환하려면 키보드에서 X 를 누르기만 하면 됩니다. 또한 색상을 단순한 흑백으로 되돌리려면 D 키 를 누르면 됩니다.

9. 키보드를 통해 불투명도 변경

또 다른 키보드 단축키: 불투명도를 변경할 수 있는 도구의 경우 키보드를 통해 간단히 변경할 수 있습니다. 숫자 1에서 0은 불투명도를 10%에서 100% 사이로 설정합니다. 레이어의 불투명도도 마찬가지입니다.

10. 직선 그리기

어떤 도구로든 직선을 그리려면 Shift 키를 누르고 있으면 됩니다. 그런 다음 자동으로 못처럼 직선이 되는 선(가로 및 세로 모두)을 그릴 수 있습니다. 또는 두 개의 다른 점을 클릭하여 그 사이에 직선을 만듭니다.

11. 샘플 색상

Photoshop 트릭의 다음 단계는 모든 색상을 샘플링하는 기능입니다. 개체의 색상이 필요한 경우 Alt 버튼을 누른 상태에서 원하는 색조를 클릭합니다. 이것은 Brush , Pencil , Paint Bucket 및 색상을 사용하는 기타 도구에서 모두 작동합니다.

12. 선택 항목에 추가 또는 제거

Shift 키를 누른 상태에서 포함할 부분을 선택하여 기존 선택 항목에 추가할 수 있습니다. 빼려면 Alt 버튼을 사용하여 동일한 작업을 수행합니다.

13. 한 단계 이상 실행 취소

마지막 작업을 실행 취소하는 고전적인 방법은 Ctrl+Z 를 사용하는 것 입니다. 그러나 이것은 마지막으로 수행한 작업에만 적용됩니다. 여러 단계로 돌아가려면 Ctrl+Alt+Z 를 사용 합니다.

14. 브러시 크기를 동적으로 변경

브러시 크기를 변경하기 위해 드롭다운 메뉴를 클릭하고 올바른 크기로 드래그할 필요가 없습니다. 대신 Alt 와 마우스 오른쪽 버튼을 누른 상태에서 왼쪽과 오른쪽으로 드래그하여 브러시 크기를 줄이거나 늘립니다.

15. 웹용으로 저장

Safe for Web 기능 을 사용하는 것은 이미지 크기를 가능한 한 작게 만들기 때문에 필수적입니다. 이것은 사이트 속도를 향상시키는 데 매우 중요합니다.

Photoshop에서는 파일 > 내보내기 > 웹용으로 저장을 통해 이 작업을 수행할 수 있습니다. 그러나 더 빠른 방법은 Ctrl+Alt+Shift+S 를 사용하는 것 입니다. 물론 이죠!

16. 레이어로 이미지 열기

한 번에 많은 수의 이미지를 Photoshop으로 가져와야 하는 경우가 있습니다. 그러나 단순히 작업 공간으로 드래그하면 수동으로 배치하라는 메시지가 표시됩니다.

보다 실용적인 방법은 File > Scripts > Load Files into Stack 입니다. 문제의 이미지를 찾아, 그들을 표시하고 확인을 두 번 누르십시오. 이제 각 이미지는 자동으로 자체 레이어로 가져옵니다.

17. Photoshop에서 직접 CSS 복사

웹 디자이너에게 가장 편안한 Photoshop 트릭 중 하나는 프로그램이 내보낼 수 있는 CSS를 생성한다는 사실입니다. 모든 것을 손으로 입력하거나 시행 착오를 사용하여 구현할 필요가 없습니다.

이를 활용하려면 레이어를 마우스 오른쪽 버튼으로 클릭하고 CSS 복사를 선택하기만 하면 됩니다. 또는 레이어 메뉴를 사용하여 동일한 옵션을 찾습니다. 이제 스타일시트나 사용 중인 다른 프로그램에 붙여넣는 데 필요한 모든 스타일이 있습니다.

18. 한 번에 여러 장치 및 방향을 위한 디자인

오늘날 웹을 위한 디자인이란 수많은 다양한 장치를 위한 디자인을 의미합니다. 모바일 장치가 전 세계 어디에서나 데스크톱 컴퓨터를 능가하는 시대에 모바일 디자인 구현은 필수입니다.

출처: 컴스코어

다행히 Photoshop에는 디자인을 다양한 형식으로 쉽게 확장할 수 있는 아트보드와 스마트 개체가 있습니다.

여기에서 둘 다 자세히 설명할 수 있지만 Phlearn은 이에 대해 내가 할 수 있는 것보다 훨씬 더 나은 작업을 수행하는 훌륭한 자습서를 만들었습니다.

19. 반복 작업에 자동 처리 사용

또 다른 멋진 Photoshop 기능은 자동 처리입니다. 이는 수동으로 수행할 필요 없이 기록된 작업을 계속해서 반복할 수 있음을 의미합니다. 이것은 예를 들어 웹용으로 많은 이미지를 저장해야 하는 경우에 매우 유용합니다.

작동 방식은 다음과 같습니다. 먼저 파일을 엽니다. 그런 다음 작업 ( Alt+F9 )을 열고 새 작업 만들기를 찾아 클릭합니다. 이름을 제공하고 선택적으로 키 조합과 색상을 지정합니다.

당신의 행동을 녹음하려면 녹음을 누릅니다. 그런 다음 반복하려는 작업을 수행합니다. 제 경우에는 한 폴더에서 이미지를 열고 웹용으로 다른 폴더에 저장합니다.

완료되면 녹음을 중지합니다. 이제 이 작업을 다른 모든 이미지에 재사용할 수 있으므로 많은 시간을 절약할 수 있습니다. Photoshop에서 자동화할 수 있는 작업에 대한 자세한 내용은 이 문서를 확인하십시오.

20. 기기에서 미리보기

마지막으로 Adobe는 Photoshop과 함께 여러 iOS 장치에서 작업을 미리 볼 수 있는 앱도 제공합니다. 가장 좋은 점은 컴퓨터에서 변경할 때 장치의 변경 사항을 관찰할 수 있다는 것입니다.

이렇게 하려면 앱을 설치하고 장치 미리보기 를 사용하여 USB 또는 Wi-Fi를 통해 Photoshop을 외부 장치에 연결합니다. 창 > 장치 미리보기 에서 옵션을 찾을 수 있습니다.

가장 좋아하는 Photoshop 트릭은 무엇입니까?

Photoshop은 가장 많이 사용되는 웹 디자인 도구 중 하나입니다. 강력한 기능으로 고품질 웹 사이트 및 자산을 디자인하는 데 적합합니다.

그러나 강력한 성능에는 엄청난 복잡성이 따르며 특히 초보자의 경우 소프트웨어를 마스터하는 데 시간이 걸릴 수 있습니다.

학습 곡선을 단축하기 위해 위에서 웹 디자이너를 위한 여러 유용한 Photoshop 트릭을 제공했습니다. 일반 워크플로에서 자동 파일 처리에 이르기까지 많은 작업을 더 쉽게 만듭니다.

Photoshop의 안팎을 아는 것은 수익에 큰 투자입니다. 일을 더 빨리 처리할 수 있을 때 더 많은 작업을 수행하여 더 많은 수익을 창출할 수 있습니다. 그리고 그것은 결코 나쁜 일이 될 수 없습니다.

가장 좋아하는 Photoshop 트릭은 무엇입니까? 우리 모두가 서로를 도울 수 있도록 아래의 댓글 섹션에 알려주십시오.

Creative Stall/Shutterstock.com의 기사 썸네일 이미지