Photoshop에서 Sketch로 전환해야하는 이유

지난 1 ~ 2 년 동안 Bohemian Coding의 Sketch 앱은 Photoshop에 대한 '더 나은'대안으로 영광스러운 인터넷에서 추진력을 얻었습니다. 이러한 많은 찬사는 웹 및 인터페이스 디자인 커뮤니티에서 나왔습니다. 나와 같은 사람이라면 항상 새로운 도구와 기존 워크 플로에 대한 더 나은 대안을 찾고 있습니다. 하지만 처음에는 20 년 된 포토샵 배턴을 넘겨 줄 생각 이었어요.

대부분의 경우 Photoshop이 트릭을 수행하고 충분히 잘 수행합니다. '왜 스위치?' 나는 생각했다. 포토샵 단축키는 제 두 번째 언어입니다. 특정 효과 또는 작업을 수행하는 데 더 이상 비슷한 일을 여러 번 반복했기 때문에 더 이상 많은 두뇌 능력이 필요하지 않습니다. 이 늙은 개는 Sketch가 새로운 학교의 멋진 아이들을위한 것이라고 생각했습니다.

Sketch를 둘러싼 수다쟁이가 커지면서 마침내 호기심이 제게 최선을 다했습니다. Sketch가 내 동료들 사이에서 불을 붙인 이유를 직접 확인해야했습니다. 새로운 프로젝트를 시작하려고 할 때 나는 그 순간이 옳다고 결정했습니다. 내가하려고한다면 일주일 동안 내 모든 것을 드리고 싶었습니다.

저는 포토샵을 종료하고 Sketch의 30 일 평가판을 다운로드 한 다음 부양 장치없이 깊은 곳으로 뛰어 들었습니다. 과장된 내용이 무엇인지 파악할 수있을만큼 머리를 물 위로 유지하기를 희망했습니다. Sketch를 탐색 할 생각이라면이 접근 방식을 권장합니다.

2 ~ 3 일 만에 나는 확신했다. 다시 한 번, 저는 소프트웨어를 공개하는 것에 대해 열정적으로 느꼈고 즉시 혜택을 얻었습니다. 나는 새로운 인터페이스를 배우는 것이 편 해졌다. Photoshop과의 겹침은 충분했습니다. 나는 사랑에 빠졌다. '예!' 나는 생각했다.

이 기사에서는 Sketch의 몇 가지 핵심 기능을 다루고 Photoshop에 해당하는 기능과 비교합니다. 울타리에 서 있거나 Photoshop에 대한 더 나은 (그리고 훨씬 저렴한) 대안을 찾거나 증가하는 인기에 대해 궁금하다면 계속 읽으십시오.

안녕 친구

Sketch는 Mac 전용으로 제작되었습니다. Apple의 소프트웨어, 특히 Keynote를 사용해 본 적이 있다면 UI가 유사하다는 것을 알 수 있습니다.

Sketch는 Mac 전용으로 제작되었습니다. Apple의 소프트웨어, 특히 Keynote를 사용해 본 적이 있다면 UI가 유사하다는 것을 알 수 있습니다.

Sketch는 Mac OS X 전용이며 Bohemian Coding의 FAQ 섹션에서 보면 Windows 및 Linux 지원을 고려하지도 않습니다. 이것은 오랜 Mac 사용자에게 좋습니다. OS X의 생산성 앱 (Pages, Keynote, Numbers)에 익숙하거나 Apple에서 제공하는 단종 된 오래된 소프트웨어 (iWeb을보고 있습니다)를 사용해 본 적이 있다면 바로 다음과 같은 느낌이들 것입니다. 더 성숙한 수염을 기른 ​​오랜 친구.

Keynote를 사용하기 시작했을 때와 마찬가지로 Sketch에서 가장 먼저 수행 한 작업은 상단 도구 모음을 사용자 정의하는 것이 었습니다. 간단히 마우스 오른쪽 버튼을 클릭하고 가능한 한 많은 항목을 그 위에 던지기 만하면됩니다.

키보드 단축키

Photoshop에는 항상 툴바가 있지만 Sketch의 일부 도구는 처음에는 약간 숨겨져 있습니다.

Photoshop에는 항상 툴바가 있지만 Sketch의 일부 도구는 처음에는 약간 숨겨져 있습니다.

많은 친구들과 트위터 사람들로부터받은 조언은 가능한 한 빨리 지름길을 배우라는 것이 었습니다. 그러나 도구 모음에있는 도구의 시각적 안내는 Sketch의 기능과 다양한 작업을 처리하는 방법을 더 잘 이해하는 데 도움이되었습니다. 대부분의 도구는 Photoshop과 비슷하지만 이제는 다른 위치에 있습니다. Sketch의 경우보다 통합 된 영역입니다.

Photoshop에서 전환하는 데 도움이되도록 OS X에서 사용자 정의 키보드 단축키를 만들어 자주 사용하는 키보드 단축키를 가져 왔습니다.이 프로세스에 익숙하지 않다면 마음에들 준비를하십시오. Mac의 시스템 환경 설정에서 바로 수행하는 것은 매우 쉽습니다. 또한 다음은 익숙해 질 수있는 편리한 스케치 바로 가기 목록입니다. sketchshortcuts.com .

나만의 아트 스타일을 개발하는 방법

초점에 초점

오해하지 마세요 : Photoshop은 웹 사이트 및 UI 모형 작업을 완료하고 잘 수행합니다. 그것은 또한 다른 많은 것들을 잘 수행합니다. 모든 사람을위한 도구가 될 것입니다. 그리고 그거 알아? 괜찮아. 그러나 한 가지 문제는 웹 및 사용자 인터페이스 디자인을위한 앱으로서의 초점이 부족하다는 것입니다.

Sketch의 초점은 특히 웹 사이트, 인터페이스 및 아이콘을 디자인하는 것입니다. Photoshop과 비교할 때 Sketch의 메뉴는 제거되어 보입니다. 신선한 공기의 좋은 호흡. 웹으로 번역 할 필요가없는 혼란 속에서 더 이상 싸우지 않아도됩니다. Sketch의 도구와 가치는 일반적으로 CSS와 브라우저로 쉽게 변환되는 것에 있습니다.

예 : 레이아웃 설정 만들기 및 사용자 지정 (예 : 그리드 만들기). Sketch에서 미리 정의 된 필드를 사용하면 그리드의 전체 너비, 거터, 열 및 행을 사용자 지정할 수 있습니다. 항상 반응 형 그리드로 작업하는 사람으로서 저는 새 프로젝트를 시작하기 전에 항상 이러한 설정에 있습니다.

대지 사전 설정

웹과 UI에 대한 Sketch의 강조점을 보여주는 또 다른 기능은 사전 설정 템플릿과 아트 보드 사전 설정입니다. 그리고 이것에 대해 감사합니다.

새로운 iOS 앱 프로젝트를 시작한다고 가정 해 보겠습니다. Photoshop에서 익숙한 것처럼 새 프로젝트를 만들거나 파일> 템플릿에서 새로 만들기에서 Sketch가 제공하는 'iOS UI 디자인'템플릿을 선택할 수 있습니다. 여기서의 장점은 Sketch가 먼저 iPhone 앱을 빠르게 조롱하고 기본 iOS 키보드를 모형으로 드래그 할 수있는 iOS UI 키트를 제공한다는 것입니다.

최근에 작업중인 예약 앱의지도보기를 조롱하고있었습니다. 별도의 파일을 열거 나 iOS지도 모형을 찾을 필요가 없었습니다. 내 Elements 페이지로 전환하고 복사하여 붙여 넣었습니다.

완벽한 크기

180px 버튼에 20 픽셀을 추가해야합니까? 180 + 20을 입력하세요.

180px 버튼에 20 픽셀을 추가해야합니까? 180 + 20을 입력하세요.

Photoshop과 마찬가지로 Sketch의 Inspector를 사용하면 아트 보드에서 정확한 크기와 위치를 정의 할 수 있습니다. 그러나 Sketch에는 Size 및 Position Inspector에 대한 비밀이 있습니다. 수학을 이해합니다! 더하기, 빼기, 곱하기 및 나누기뿐만 아니라 백분율도 있습니다.

버튼을 왼쪽으로 20 픽셀 이동 하시겠습니까? 필드에 '-20'만 추가하면됩니다. 전체 아트 보드의 절반을 채우는 이미지를 원하십니까? 너비 필드에 '50 % '를 입력하기 만하면됩니다. 훌륭한!

하나의 프로젝트, 하나의 파일

Sketch는 하나의 문서에 모든 페이지를 저장한다는 점에서 Photoshop과 다르지만 둘 다 유사한 방식으로 레이어링, 그룹화 및 구성을 처리합니다.

Sketch는 하나의 문서에 모든 페이지를 저장한다는 점에서 Photoshop과 다르지만 둘 다 유사한 방식으로 레이어링, 그룹화 및 구성을 처리합니다.

Photoshop에서 내 프로젝트와 파일 구조는 다음과 같습니다.

BigTimeClient 폴더
– BigTimeClient_landing-page.psd
– BigTimeClient_about-page.psd
– BigTimeClient_contact-page.psd

Sketch는 일을 조금 다르게 처리합니다. 하나의 Sketch 파일에는 하나의 문서에있는 모든 페이지와 아트 보드가 들어 있습니다. 처음에는 Mac의 성능이 저하 될까 걱정했지만 이후 약 30 개의 화면으로 iOS 앱을 설계했으며 심각한 성능 문제는 발생하지 않았습니다.

이 접근 방식의 주요 이점은 모든 화면에 나란히 액세스하고 볼 수 있으므로 변경하고 비교하기가 훨씬 쉽다는 것입니다. 다양한 반응 형 중단 점을 조롱하고 있다면 절대적으로 좋아할 것입니다.

최근 Photoshop에서는 여러 아트 보드 버전을 도입했습니다. 그러나 Sketch에서는 모든 아트 보드를 하나의 문서 내 페이지로 구성 할 수 있으므로이 기능을 훨씬 더 강력하게 만들 수 있습니다. 그렇지 않으면 두 응용 프로그램의 여러 대지가 매우 유사하게 작동합니다.

Sketch의 레이어 팔레트는 다양한 방식으로 Photoshop을 모방하기 때문에 처음 앱을 열었을 때 수준의 편안함을 가져 왔습니다. Photoshop과 마찬가지로 여기에서 프로젝트 전체에서 그룹 (폴더) 및 요소를보고, 이름을 바꾸고, 검색 할 수 있습니다.

하나의 파일로 모두 적합

Photoshop에서는 일반적으로 3 개 이상의 파일 자산을 만듭니다. 하나는 @ 1x 용이고 다른 하나는 @ 2x 용이고 다른 하나는 @ 3x 용입니다. 그것들을 따로 저장하는 것은 지루했습니다. 벡터 객체와 요소로 100 % 작업하지 않는 한 이것은 고통 스러웠습니다. Sketch에는 앱에 래스터 화 된 도구 나 요소가 하나도 없습니다. 당연히 하나를 드래그하지 않는 한.

Photoshop에서 iOS 앱 디자인 프로젝트를 만들 때 화면에서 훨씬 더 큰 크기로 디자인하고 iPhone에서 미러링 앱인 Skala Preview를 통해 테스트했습니다.

Sketch를 사용하면 Retina 장치 및 자산으로 작업 할 때의 작업 흐름이 크게 변경되고 개선되었습니다. 이제 표준 장치 크기로 디자인합니다. Sketch에서는 기본적으로 모든 것이 벡터이므로 데스크탑에서 아트 보드를 비정상적으로 크게 만드는 것에 대해 걱정할 필요가 없으므로 미러링을 통해 작업을 미리 볼 수 있습니다 (이제 Sketch Mirror를 통해). 이제 데스크톱에서 모바일로 작업하는 것이 더 자연스럽게 느껴집니다.

또한 다양한 크기의 요소를 저장하는 것은 내보내기 버튼을 클릭하고 원하는만큼 크기와 파일 형식을 추가하는 것만큼이나 간단합니다. 내보내기 버튼을 사용하면 더 많은 제어가 가능하지만 레이어와 그룹을 데스크탑으로 드래그 앤 드롭하여 저장할 수도 있습니다. 이것은 내가 가장 좋아하는 Sketch 기능 중 하나이자 가장 큰 시간 절약 기능 중 하나입니다.

스마트에서 상징으로

Photoshop의 고급 개체 및 연결된 고급 개체는 매우 편리하고 강력합니다. 특히 반복적 인 요소를 많이 활용하는 앱과 인터페이스를 디자인 할 때 자주 사용했습니다.

익숙하지 않은 경우 빠른 사용 사례가 있습니다. 모바일 중단 점 내비게이션을 설계하고 있으며 변경해야 할 사항이 있음을 깨달았을 때 워크 플로에 이미 15 개 화면이 있습니다. 연결된 고급 개체로 작업하지 않았다면 모든 파일을 수동으로 열고 각 파일을 변경해야합니다. 연결된 고급 개체를 사용하면 하나의 요소를 변경할 수 있으며 모든 요소가 자동으로 변경됩니다. 엄청난 시간 절약!

인생의 여정에 어울리는 색

Creative Cloud 라이브러리

Creative Cloud Libraries는 개인적으로 좋아하는 것입니다. 하나의 Photoshop 문서에서 다른 문서로 개체 또는 레이어에 쉽게 액세스, 드래그 앤 드롭

Creative Cloud Libraries는 개인적으로 좋아하는 것입니다. 하나의 Photoshop 문서에서 다른 문서로 개체 또는 레이어에 쉽게 액세스, 드래그 앤 드롭

Photoshop에서 제가 가장 좋아하는 또 다른 기능 중 하나는이 프로그램에서 상당히 새로운 기능으로 Creative Cloud Libraries입니다. 자주 사용하는 에셋을 자체 라이브러리 패널로 드래그하기 만하면 프로젝트의 다른 영역으로 드래그 앤 드롭 할 때 쉽게 액세스 할 수 있습니다. CC Libraries에 대해 더 자세히 읽고 싶다면 여기 .

기호

스케치 심볼은 Photoshop의 연결된 고급 개체와 비슷하지만 좀 더 사용자 정의가 가능하고 강력합니다.

스케치 심볼은 Photoshop의 연결된 고급 개체와 비슷하지만 좀 더 사용자 정의가 가능하고 강력합니다.

Photoshop의 Linked Smart Objects 및 Libraries가 Sketch와 관련이있는 것은 무엇입니까? 음, Sketch에는 Symbols라는 작고 큰 것이 있습니다. 저는 Linked Smart Objects and Libraries의 사랑의 자식이라고 생각합니다.

Symbols를 사용하면 페이지와 아트 보드에서 자산 또는 그룹을 재사용 할 수 있습니다. 심볼을 변경하면 핫 디그 티 도그가 모든 곳에서 변경됩니다! 예를 들어 목록의 자산 및 / 또는 텍스트를 조정하는 경우 공간 정렬도 기억합니다. 텍스트의 단어조차 변경됩니다.

다른 페이지에서 자산을 재사용 할 수 있으며 변경 사항은

다른 페이지에서 자산을 재사용 할 수 있으며 변경 사항은

그리고 여기 제가 말한 핫 소스의 추가 대시가 있습니다 : '기호에서 텍스트 값 제외'. 예를 들어, 반복되지만 텍스트가 다른 버튼 스타일을 생각해보십시오. 전체적으로 버튼 스타일을 변경하고 싶지만 텍스트는 유지 하시겠습니까? 문제 없어요. 추가 '모든 인스턴스 변경'옵션이 없습니다. 마법!

자동으로 업데이트되는 요소 그룹 외에도 레이어 및 텍스트의 스타일을 정의하는 즐거움을 누릴 수 있습니다. 예를 들어 GT Walsheim의 H1 태그 (크기 48 및 그림자 포함)를 정의하면 모든 인스턴스가 전체적으로 업데이트됩니다. 다시 마법처럼!

인쇄 할 때 Photoshop CC 2017이 충돌 함

물건 만들기

Photoshop에서 사용자 인터페이스, 앱 및 웹 사이트를 디자인 할 때 일반적으로 모양을 사용하여 다양한 요소를 만들었습니다. Sketch에서도 비슷한 근거를 찾을 수 있습니다. Shapes는 직사각형에서 버튼을 만들고, 이미지 채우기로 큰 직사각형을 채우거나 마스킹하고, 구분선을 그리는 등 대부분의 시간을 보내는 곳입니다.

Photoshop은 벡터 및 비 벡터 모양과 패스를 만드는 다양한 방법을 제공합니다. 그러나 Sketch는 확장 성을 중심으로 구축되었습니다. 모든 것이 벡터 기반이며 모양은 즉석에서 쉽게 조정할 수 있습니다.

예를 들어 돌아가서 '반지름'옵션을 선택하기 만하면 직사각형 버튼에 모서리 반경을 추가 할 수 있습니다. 사진으로 모든 모양을 채우고 비파괴적인 방식으로 크기를 조정할 수도 있습니다. 반응 형 이미지의 크기와 크기를 테스트 할 때 유용합니다.

도형 내에서 이미지를 마스킹 할 때 '마스크로 사용'옵션을 사용하지 않는 것이 개인적인 팁입니다. 대신 '이미지 채우기'는 대부분의 경우 훨씬 더 많은 유연성을 제공합니다.

Photoshop과 Sketch의 모양 조합 사이에는 공통점이 있습니다. 개인적으로 Sketch (또는 그 문제에 대한 소프트웨어)에서 사용자 지정 아이콘을 만들지는 않지만 여기저기서 고유 한 모양이 필요합니다. 그러나 아이콘 디자이너가이 기능을 자주 사용한다고 생각합니다.

스케치를 넘어서

더 많은 그래픽 디자인 용도로 Photoshop에 대한 저렴한 대안을 찾고 있다면 Affinity Designer를 사용해보십시오.

더 많은 그래픽 디자인 용도로 Photoshop에 대한 저렴한 대안을 찾고 있다면 Affinity Designer를 사용해보십시오.

여기서는 Photoshop에서 이동할 때 몇 가지 기능, 차이점 및 친숙 함을 다루었습니다. Sketch는 UI와 사이트를 디자인하는 데있어 더 좋고 더 세밀하게 조정 된 워크 플로를 향한 큰 도약처럼 느껴집니다. 그래도 Photoshop이나 Affinity Designer와 같은 '사진관'애플리케이션이 필요하지 않습니다. Sketch의 힘은 웹 및 사용자 인터페이스 디자인을위한 앱으로서의 초점에 있습니다. 그 이상도 이하도 아닌.

Photoshop에서 Sketch 로의 학습 곡선은 충분히 빠릅니다. 앱 내에서 약 90 %의 편안함을 얻는 데 3 일 반이 걸렸고, 99 %가 사물을 파악할 수 있다는 느낌이 들기까지는 3 주가 걸렸습니다. 내 사이트에서 내 경험에 대해 더 많이 읽을 수 있습니다. 내 여정을 라이브 블로그에 올린 곳 .

Sketch의 사용자 기반이 빠르게 증가하고 있습니다. 플러그인 커뮤니티는 인상적이며 Sketch의 기능을 효과적으로 확장합니다. 매우 합리적인 가격에 새로운 도구를 찾고 있다면 Sketch는 훌륭한 옵션입니다. 제 생각에는 현재 UI 작업에 가장 적합한 선택입니다. 나는 그것의 미래가 기대된다.

: 브라이언 호프

Brian Hoff는 웹 및 모바일 플랫폼과 제품에 중점을 둔 필라델피아 기반 부티크 디지털 대행사 인 Brian Hoff Design의 창립자이자 크리에이티브 디렉터입니다. 이 기사는 원래 273 호에 게시되었습니다. 넷 매거진 .

마음에 드 셨나요? 읽어보세요!