웹 프론트엔드 PS 튜토리얼 教你如何从Photoshop迁移到Sketch

教你如何从Photoshop迁移到Sketch

Jun 01, 2016 pm 02:28 PM
photoshop sketch

教大家如何从Photoshop迁移到Sketch,教程比较实用,适合新手来学习,推荐过来,一起来学习吧

   据某团队透露,自全司上下都配备Macbook后,设计部的同事们纷纷将Photoshop换成Sketch,改变过程折腾了相当一段时间,于是留下此文,教你如何从Photoshop迁移到Sketch,那些正准备转移阵地的同学,节省时间就从这篇开始咯。

  @Teambition :Sketch可以说是Photoshop最佳替代,而且比起Photoshop,它更侧重于用户界面的设计。虽然目前Sketch素材还是太少,不过我正在着手解决这个问题。

  备注:通过分析甚至是重复使用他人的作品可以取得进步,然后开始创作你自己的作品。在学习的时候,重新想像正试图解决的问题。学习他们的技巧,并它融入到自己的设计思考中去。

教你如何从Photoshop迁移到Sketch

  可以到BohemianCoding下载试用版。如果因为需要付费而错过了这款应用,那是得不偿失,特别是它还不贵,价格只有Photoshop的1/10。它能让你的设计变得更加高效,一旦用上你绝对会爱上它。

  迁移:我的图标(My Icons)

  作为一个用户界面设计师,图标是唯一一种不必每次都从头开始的组件。图标被存储为SVG格式,这是是一种广泛被使用的矢量格式,已经被越来越多地被用于css中,代替那种特定分辨率的内嵌图片。

教你如何从Photoshop迁移到Sketch

  从图标集(Icon Sets )开始

  有免费和付费的两种。付费版也不贵,非常适合入门级别的设计师。以下是我个人使用的SVG图标集列表:

  Pixicon by Jackie Trananh ($5)

  Symbolicons ($35)

  Glyphicon ($59)

  Entypo (Free)

  Batch by Adam Whitcroft (Free)

  PSD图标集( PSD Icon Sets):

  Brankic1979 (Free)

  IconSweets2 ($8)

  Broccoli by Visual Idiot (Free)

  如何从Photoshop导出形状到Sketch中

  如果你有Photoshop格式的图标集,那么这个导出的流程会稍微复杂一些。除了Photoshop之外,还需要使用到Illustrator:

  1,在Photoshop中,选择所有的Photoshop形状层 ( Shape Layers )和合并形状(Merge Shapes)。

教你如何从Photoshop迁移到Sketch

  2,文件(File)——>导出(Export)——>路径到 Illustrator(Paths to Illustrator),保存为.ai格式

教你如何从Photoshop迁移到Sketch

  3,在Illustrator中,打开以上的文件,选择所有形状,设置为黑色。

  4,文件——>保存为SVG格式

教你如何从Photoshop迁移到Sketch

  5,导入SVG文件到Sketch中,进行编辑。

  迁移:我的图案

  除非你是一个纯粹的扁平设计师,否则你会需要在设计中使用到图案材质。你的客户可能也会要求。 Sketch有躁点预设,但是如果你有更高的要求,你可以在把Photoshop的图案文件保存为单独的图案文件,然后导入到Sketch的图案文件库。没有迁移工具。可以试试Subtle Patterns,一个图案网站。

教你如何从Photoshop迁移到Sketch

  如何迁移PSD文件?

  设计师应该避免回头看自己的旧作,所以,这其实是一次从头开始的机会。Sketch是100%矢量软件,所以没法导入带有大量位图效果的PSD文件。从我个人使用Fireworks的经验来看,整个流程也不是完美的。许多样式都出错了。甚至是字体看起来也特别丑。

教你如何从Photoshop迁移到Sketch

  不过,用Sketch重现Photoshop设计非常简单。画图形、上颜色,应用Photoshop类似的阴影效果即可。图标和样式部分是最困难也是最重要的一部分。作为一名设计师,应该专注设计基础(设计原则、简洁的设计元素、像素完美等等),不要依赖那些使用特定软件实现的效果,比如样式、滤镜、动作。

教你如何从Photoshop迁移到Sketch

  Sketch虽然很新,但是很多出色的设计师已经开始分享Sketch文件了。坦白的说,自定义Sketch甚至比PSD更简单。:)

  Sketch iOS Kit by Marcelo Marfil

  Safari and iOS6 Template by Benjamin De Cock

  Navigation Bars

  iOS Message UI by Ben Breckler

教你如何从Photoshop迁移到Sketch

  我也分享一下我自己的文件

  通常我是不会分享我的设计文件的,但是,既然它能帮助新用户更快上手Sketch,那么我就破例一次吧。

  Pinterest Concept

  iPhone(Phone image by Paul Flavius Nechita)

  Dribbble Concept

教你如何从Photoshop迁移到Sketch

  Marcelo Marfil还制作了一系列视频:《如何创作一个自定义的Sketch UI》

  结语

  除非你像我一样,已经使用了3个月以上的Sketch,要不然你可能还是会回去用Photoshop,编辑老的PSD等需求,或者图片编辑、图片绘制、等重的图片设计工作。然而,我们需要知道的是,有一种Photoshop的替代品,它可以完全专注于用户界面设计。一种集结了Photoshop、Illustrator和Omnigraffle等优势、可以匹敌Adobe的工具。

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

수정: Windows 11, 10에서 캡처 도구 알림이 누락됨 수정: Windows 11, 10에서 캡처 도구 알림이 누락됨 May 16, 2023 pm 06:34 PM

Snip&Sketch는 뛰어난 Windows 스크린샷 도구입니다. Microsoft는 이 도구를 사용자에게 거의 필수 불가결하게 만들기 위해 수많은 새로운 멋진 기능과 바로 가기를 추가했습니다. 그러나 스크린샷을 찍은 후 알림 패널에 미리보기 알림이 표시되지 않는 문제를 발견했을 수 있습니다! 문제의 원인이 될 수 있는 이유는 다양합니다. 따라서 더 이상 시간을 낭비할 필요 없이 다음 해결 방법에 따라 빠른 해결 방법을 찾으세요. 수정 1 – 알림 설정 확인 Snip & Sketch 알림 설정을 차단했을 수 있습니다. 1. 설정을 열어야 합니다. 따라서 Windows 키 + I 키를 동시에 누르세요. 2. 이제 왼쪽 창에서 "시스템"으로 이동합니다. 3. 오른쪽에서 모든 옵션을 클릭하세요.

영구 무료 photoshopcs5 일련 번호는 무엇입니까? 영구 무료 photoshopcs5 일련 번호는 무엇입니까? Jul 06, 2023 am 10:00 AM

영구 무료 photoshopcs5 일련 번호는 다음과 같습니다: 1. 1330-1440-1602-3671-9749-7897; 2. 1330-1191-2998-6712-2520-5424; 4. 1330-1570-9599-9499-8092-8237 5. 1330-1028-1662-3206-1688-5114 등

해결 방법: Photoshop에서 작동하지 않는 키보드 단축키 수정 해결 방법: Photoshop에서 작동하지 않는 키보드 단축키 수정 Sep 22, 2023 pm 03:17 PM

Adobe Photoshop은 온라인 커뮤니티에서 매일 사랑받고 사용되는 디지털 디자인의 업계 표준입니다. 그러나 키보드 단축키가 더듬거리거나 완전히 실패하면 Windows 11에서 프로젝트 속도나 전반적인 생산성이 크게 저하될 수 있습니다. 숙련된 디자이너이건 아니면 그냥 사진 편집에 손을 대고 있건 관계없이 이러한 결함은 Photoshop 및 Photoshop CC의 사소한 성가심 그 이상입니다. 먼저 사용자 정의 또는 기본 단축키가 작동하지 않는 일반적인 이유를 살펴보겠습니다. 내 단축키가 Photoshop에서 작동하지 않는 이유는 무엇입니까? 작업 영역 설정 사용자 정의: 경우에 따라 작업 영역 설정을 조정하거나 전환하면 키보드 단축키가 재설정될 수 있습니다. 고정 키: 이 접근성 기능

이것이 바로 Win11 Snipping Tool을 사용하는 이유입니다. Win10 Snip & Sketch는 현재 이상적이지 않습니다. 이것이 바로 Win11 Snipping Tool을 사용하는 이유입니다. Win10 Snip & Sketch는 현재 이상적이지 않습니다. Apr 17, 2023 pm 10:04 PM

이제 Windows 11 캡처 도구와 Windows 10 캡처 및 스케치 도구에는 잘린 이미지의 일부를 완전히 제거하는 대신 유지하는 결함이 있습니다. 잘못된 사람이 동일한 파일에 액세스하면 사용자, 특히 이러한 도구를 자주 사용하여 신용 카드, 노골적인 이미지, 문서 등과 같은 민감한 기밀 사진을 자르는 사용자에게 문제가 발생할 수 있습니다. "아크로팔립스"라고 불리는 이 취약점은 자르기 과정에서 삭제된 것으로 보이는 사진의 "잘린" 부분을 복구하는 데 사용될 수 있습니다. 전문가들은 구글 픽셀의 마크업 도구에서 이 사실을 처음 발견했고, 아크로팔립스 스크린샷을 통해 이를 복원했습니다.

Adobe Photoshop 공식 웹 버전 AI 생성 채우기 및 확장된 이미지 도구 생성 Adobe Photoshop 공식 웹 버전 AI 생성 채우기 및 확장된 이미지 도구 생성 Sep 29, 2023 pm 10:13 PM

Adobe의 Photoshop 웹 서비스(온라인 웹 버전)가 이제 일반 공급됩니다. 웹 버전의 Photoshop은 곧 AI 생성 채우기를 지원하고 최근 Photoshop 데스크톱 버전용으로 출시된 확장된 이미지 도구를 생성할 예정입니다. Adobe Firefly 생성 AI 모델을 기반으로 하는 이러한 기능은 상업적으로 사용 가능하며 사용자는 원본 이미지의 조명 조건과 원근을 일치시키면서 100개 이상의 언어로 된 텍스트 기반 설명을 사용하여 이미지를 빠르게 추가, 제거 또는 확장할 수 있습니다. 또한 Photoshop 웹 버전은 데스크톱 버전에서 가장 일반적으로 사용되는 많은 도구를 제공하지만 새로운 Photoshop 사용자에게 보다 "단순화된" 사용자 경험을 제공하기 위해 레이아웃이 새롭게 디자인되었습니다. 올해 초도 포함

흐릿한 스캔 문서를 처리하는 방법 흐릿한 스캔 문서를 처리하는 방법 Jan 05, 2021 pm 03:09 PM

처리 방법: 1. PS 소프트웨어에서 처리할 스캔 이미지를 엽니다. 2. 상단 도구 모음에서 "필터" - "선명화" - "스마트 선명화"를 클릭합니다. 3. 팝업 창에서 원하는 대로 선택합니다. 반경을 선명하게 하고 "확인"을 클릭하세요. 4. "파일" - "다른 이름으로 저장"을 클릭하고 파일로 저장하세요.

포토샵은 어느회사 소속인가요? 포토샵은 어느회사 소속인가요? Jul 20, 2022 am 11:47 AM

포토샵은 Adobe 소유입니다. Photoshop은 Adobe에서 개발하여 배포하는 이미지 처리 소프트웨어로 주로 픽셀로 구성된 디지털 이미지를 처리합니다. Adobe는 캘리포니아 산호세에 본사를 둔 미국 컴퓨터 소프트웨어 회사입니다. 주로 멀티미디어 제작 소프트웨어 개발에 종사하고 있으며 고객으로는 전 세계 기업, 지식 근로자, 창의적인 사람 및 디자이너, OEM 파트너 및 개발자가 있습니다.

포토샵을 개발한 회사는 어디일까요? 포토샵을 개발한 회사는 어디일까요? Jul 08, 2022 am 11:34 AM

Photoshop은 Adobe Systems에서 개발했으며, Photoshop은 주로 픽셀로 구성된 디지털 이미지를 처리하는 "Adobe Systems"에서 개발 및 배포하는 그래픽 처리 소프트웨어입니다. Adobe Systems는 캘리포니아주 산호세에 본사를 둔 미국의 다국적 컴퓨터 소프트웨어 회사입니다.

See all articles