Rumah hujung hadapan web Tutorial 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的工具。

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Betulkan: Pemberitahuan Alat Snipping hilang dalam Windows 11, 10 Betulkan: Pemberitahuan Alat Snipping hilang dalam Windows 11, 10 May 16, 2023 pm 06:34 PM

Snip&Sketch ialah alat tangkapan skrin Windows yang sangat baik. Microsoft telah menambah banyak ciri dan pintasan hebat baharu untuk menjadikan alat ini hampir sangat diperlukan untuk pengguna. Walau bagaimanapun, anda mungkin menyedari masalah selepas mengambil tangkapan skrin, pemberitahuan pratonton tidak muncul dalam panel pemberitahuan! Terdapat banyak sebab yang boleh menjadi punca masalah. Jadi, tidak perlu membuang lebih banyak masa, ikuti sahaja penyelesaian ini untuk mencari penyelesaian yang cepat. Betulkan 1 – Semak tetapan pemberitahuan Anda mungkin telah menyekat tetapan pemberitahuan Snip & Sketch. 1. Anda perlu membuka tetapan. Jadi, tekan kekunci Windows + kekunci I serentak. 2. Sekarang, pergi ke "Sistem" dari anak tetingkap kiri. 3. Di sebelah kanan, klik Semua Pilihan

Apakah nombor bersiri photoshopcs5 percuma secara kekal? Apakah nombor bersiri photoshopcs5 percuma secara kekal? Jul 06, 2023 am 10:00 AM

Nombor bersiri photoshopcs5 secara kekal ialah: 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, dsb.

Penyelesaian: Betulkan pintasan papan kekunci tidak berfungsi dalam Photoshop Penyelesaian: Betulkan pintasan papan kekunci tidak berfungsi dalam Photoshop Sep 22, 2023 pm 03:17 PM

Adobe Photoshop ialah standard industri untuk reka bentuk digital, disukai dan digunakan setiap hari oleh komuniti dalam talian. Walau bagaimanapun, apabila pintasan papan kekunci gagap atau gagal sepenuhnya, ia boleh melambatkan sebarang projek atau produktiviti keseluruhan anda pada Windows 11 dengan ketara. Sama ada anda seorang pereka yang berpengalaman atau hanya berkecimpung dalam penyuntingan foto, gangguan ini lebih daripada gangguan kecil dalam Photoshop dan Photoshop CC. Mula-mula, mari kita lihat sebab biasa mengapa pintasan tersuai atau lalai berhenti berfungsi. Mengapa pintasan saya tidak berfungsi dalam Photoshop? Sesuaikan tetapan ruang kerja: Kadangkala, melaraskan atau bertukar antara tetapan ruang kerja boleh menetapkan semula pintasan papan kekunci. Kekunci Melekit: Ciri kebolehcapaian ini

Inilah sebabnya mengapa menggunakan Win11 Snipping Tool, Win10 Snip & Sketch tidak sesuai sekarang Inilah sebabnya mengapa menggunakan Win11 Snipping Tool, Win10 Snip & Sketch tidak sesuai sekarang Apr 17, 2023 pm 10:04 PM

Alat Snipping Windows 11 dan alat Snip & Sketch Windows 10 kini mempunyai kecacatan apabila ia mengekalkan bahagian imej anda yang dipotong dan bukannya mengalih keluarnya sepenuhnya. Jika fail yang sama diakses oleh orang yang salah, ini boleh menyebabkan masalah kepada pengguna, terutamanya mereka yang kerap menggunakan alat ini untuk memangkas foto sensitif dan sulit seperti kad kredit, imej eksplisit, dokumen, dll. Digelar "acropalypse", kerentanan itu boleh digunakan untuk memulihkan bahagian foto yang "dipangkas" yang kelihatan telah dialih keluar semasa proses pemangkasan. Pakar pertama kali menemui perkara ini dalam alat penanda Google Pixel, menggunakan pemulihan tangkapan skrin acropalypse

Adobe Photoshop versi web rasmi AI dijana mengisi dan menjana alat imej lanjutan Adobe Photoshop versi web rasmi AI dijana mengisi dan menjana alat imej lanjutan Sep 29, 2023 pm 10:13 PM

Perkhidmatan web Photoshop Adobe (versi web dalam talian) kini tersedia secara umum. Versi web Photoshop tidak lama lagi akan menyokong pengisian yang dijana AI dan menjana alat imej lanjutan, yang dikeluarkan baru-baru ini untuk versi desktop Photoshop. Dikuasakan oleh model AI generatif Adobe Firefly, ciri ini tersedia secara komersial dan membolehkan pengguna menambah, mengalih keluar atau mengembangkan imej dengan cepat menggunakan penerangan berasaskan teks dalam lebih daripada 100 bahasa sambil memadankan keadaan pencahayaan dan perspektif imej asal. Versi web Photoshop juga menyediakan banyak alat yang paling biasa digunakan daripada versi desktop, tetapi dengan reka letak yang direka bentuk semula untuk memberikan pengalaman pengguna yang lebih "ringkas" untuk pengguna Photoshop baharu. termasuk awal tahun ini

扫描出来的文件模糊怎么处理 扫描出来的文件模糊怎么处理 Jan 05, 2021 pm 03:09 PM

处理方法:1、在ps软件中打开要处理的扫描图片;2、点击顶部工具栏的“滤镜”-“锐化”-“智能锐化”;3、在弹出的窗口中,根据需求选择锐化半径,点击“确定”;4、点击“文件”-“储存为”,另存为一个文件即可。

Photoshop milik syarikat mana? Photoshop milik syarikat mana? Jul 20, 2022 am 11:47 AM

photoshop dimiliki oleh Adobe. Photoshop ialah perisian pemprosesan imej yang dibangunkan dan diedarkan oleh Adobe Ia terutamanya memproses imej digital yang terdiri daripada piksel. Adobe ialah sebuah syarikat perisian komputer Amerika yang beribu pejabat di San Jose, California Ia terlibat terutamanya dalam pembangunan perisian pengeluaran multimedia pelanggannya termasuk perusahaan, pekerja berpengetahuan, orang kreatif dan pereka, rakan kongsi OEM dan pembangun di seluruh dunia.

Syarikat manakah yang membangunkan photoshop? Syarikat manakah yang membangunkan photoshop? Jul 08, 2022 am 11:34 AM

Photoshop dibangunkan oleh Adobe Systems; Photoshop ialah perisian pemprosesan grafik yang dibangunkan dan diedarkan oleh "Adobe Systems", yang terutamanya memproses imej digital yang terdiri daripada piksel Adobe Systems ialah sebuah syarikat perisian komputer multinasional Amerika yang beribu pejabat di San Jose, California.

See all articles