首頁 > 科技週邊 > IT業界 > 在草圖應用程序3中使用基本圖像編輯3

在草圖應用程序3中使用基本圖像編輯3

Lisa Kudrow
發布: 2025-02-20 11:19:10
原創
379 人瀏覽過

Getting to Grips with Basic Image Editing in Sketch App 3

Sketch App 3 的圖像編輯功能:簡易而非萬能

Sketch App 3 雖然不如 Photoshop 功能全面,但它提供了一種簡單的位圖圖像編輯方式,包括飽和度、亮度、對比度、高斯模糊、混合模式、裁剪和魔術棒工具等功能。然而,它並不適合進行複雜的圖像調整、濾鏡和操作。

Sketch App 的非破壞性圖像編輯是其一大優勢,允許快速測試多個創意和變體。亮度、高斯模糊和混合模式等關鍵功能可有效用於創建現代網頁設計,無需打開 Photoshop。

雖然 Sketch App 3 存在局限性,但一旦理解其用途,掌握其圖像編輯功能就非常簡單。對於更高級的照片編輯,可能仍然需要專用照片編輯軟件。

Getting to Grips with Basic Image Editing in Sketch App 3

我最近一直在談論 Sketch App。我總是提到它是一款出色的移動應用程序和用戶界面設計師工具。

我也說過,我認為將 Sketch 與 Photoshop 進行比較是愚蠢的,因為它是一款照片編輯工具。

但事實是,Photoshop 已經變得如此多功能,以至於我們將其與幾乎所有其他設計工具進行比較——Sketch 3 也不例外。

實際上,Sketch 更類似於 Adobe Fireworks,這對開發者 (Bohemian Coding) 來說是幸運的,因為 Fireworks 已經不再開發了。幸運的時機,直覺的商業策略;無論你稱之為什麽,Sketch App 都填補了一個空白,而且它做得很好。

如果你在過去兩年裡一直住在火星上,這裡有一些關於這件事的背景故事。 Sketch App 目前處於 3.2 版 (穩定版),你可以從 Bohemian Coding 以 99 美元的單次付費購買。

儘管它只適用於 Mac OS X,但它席捲了設計行業。

那麼我們不能用 Sketch 編輯圖像嗎?

呃,差不多吧

實際上……你可以,但不要指望進行複雜的圖像調整、濾鏡和操作。相反,你應該期待的是你能想像到的最簡單的位圖圖像編輯形式,例如這些功能:

  • 飽和度
  • 亮度
  • 對比度
  • 高斯模糊
  • 混合模式
  • 裁剪
  • 魔術棒

即使是魔術棒工具,我覺得也過於復雜了。在用戶界面設計的情況下,我從未理解它存在的原因。

然而,許多其他功能使我們能夠針對當前趨勢進行設計。攝影和“大圖像”是目前最流行的,無論我們使用的是高對比度、有影響力的圖像還是模糊的背景。將大圖像混合到純色或“超級漸變”背景中也是一個主要趨勢。

但這適用於網頁設計,即使那樣,將這些事情在 Photoshop 中完成並將最終位圖複製到 Sketch 中也可能是一種本能習慣。

當然,如果你想操縱你狗的頭,並創建一個帶有激光眼的狗/青蛙混合體,那麼Photoshop 絕對是你的最佳選擇,但是如果你堅持使用單個應用程序,你的工作流程將以及時的方式輸出更好、非破壞性的結果。如果你熱衷於學習更多關於非破壞性設計的知識,你應該觀看在 Sketch 中創建插圖並將其導出為 SVG(如下),這是我們 Sketch 用戶界面設計課程的一部分。

加載播放器……讓我們從顏色調整開始。

顏色調整

首先將位圖圖像複製到畫布上——一系列自定義選項將立即出現在右側;Sketch App 將此區域稱為“檢查器”,我們在這裡調整和設置圖層的樣式。

首先,選中標有“顏色調整”的框。在這裡,我們將能夠調整圖像的亮度、飽和度和對比度,但為了這個簡短的教程,我們將飽和度降低到零。

Getting to Grips with Basic Image Editing in Sketch App 3

混合模式

按“R”鍵啟動矩形形狀,並將其直接繪製在圖像頂部。 Sketch 的自動對齊吸附功能應該使這變得輕而易舉,但你可以在檢查器中仔細檢查尺寸。在那裡,取消選中邊框並選擇填充→線性漸變,然後使用鍵盤快捷鍵Cmd Alt Down重新排列你的兩個圖層。

切換回圖像(現在應該在頂部),將不透明度更改為“25%”,並將混合模式更改為“柔光”——這就是我們如何使用混合模式來創建色彩鮮豔但微妙的網站背景。

提示:混合模式實際上適用於各種圖層,而不僅僅是圖像

Getting to Grips with Basic Image Editing in Sketch App 3

高斯模糊

不透明度恢復到“100%”。相反,我們將使背景模糊,這是現代網頁設計中的常見趨勢,它允許在具有大型圖像啟動屏幕的網站上更好地關注排版。選中“高斯模糊”框,並將其調高到 50 像素。

你應該幾乎立即註意到模糊超過了我們方框的尺寸——我們可以通過應用蒙版來解決這個問題。右鍵單擊左側圖層側邊欄中的矩形,然後單擊“用作蒙版”。

請注意,所有這些更改都是非破壞性的;我們可以快速測試多個創意(顏色、模糊、強度等),這些變化永遠不會是最終的。

Getting to Grips with Basic Image Editing in Sketch App 3

裁剪(最佳方法)

現在選擇矩形並嘗試調整其大小,或者你可以使用檢查器來聲明新的尺寸。由於圖像被蒙版,它永遠不會超過我們矩形的邊界,這是迄今為止完成裁剪的最佳方法,因為我們不僅可以聲明特定尺寸,而且我們也沒有對圖像造成任何破壞性損害。

Getting to Grips with Basic Image Editing in Sketch App 3

裁剪(所謂的方法)

在這個階段,使用CMD Z撤消我們到目前為止所做的一切,可能會有用;你的畫布上只剩下你的原始圖像。如果雙擊圖像,你將可以訪問一系列更具破壞性的操作,例如裁剪反轉

你首先需要進行選擇,你可以使用選擇魔術棒來完成。魔術棒按預期工作,但它不像 Photoshop 那樣具有相同的容差控制,並且基本的選擇不提供任何吸附功能或標尺——你必須完全依賴你自己的直覺和鼠標控制。除了裁剪反轉之外,你還可以選擇填充矢量化你所做的選擇。

Getting to Grips with Basic Image Editing in Sketch App 3

結論

我的最終結論是,我們仍然應該使用 Photoshop 來完成複雜或破壞性的圖像編輯任務。

Sketch App 根本沒有提供足夠的靈活性來有效地使用這些工具。但是,我們確實學習了一些簡單的技巧,可以避免在涉及位圖圖像時不得不打開 Photoshop,對於那些使用 Photoshop 多年的人來說,這很快就會成為一種習慣。

當你理解 Sketch App 3 的用途及其局限性時,在 Sketch App 3 中成為圖像編輯大師很容易。

我在文章開頭提到的功能,亮度高斯模糊混合模式(僅舉幾例),現在甚至可以用CSS 濾鏡在現代網頁設計中實現。這可能是為什麼這些圖像編輯功能運行完美,而其他一些功能運行效率較低的原因。

Sketch App 圖像編輯常見問題解答

(此處省略了原文中的FAQ部分,因為該部分內容與圖像偽原創要求不符,且篇幅較長。如有需要,可以單獨提出FAQ部分的偽原創請求。)

以上是在草圖應用程序3中使用基本圖像編輯3的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板