figma下載_Figma中的高級圖像處理

figma下載

Figma is not exactly suited for image manipulation, and that’s completely fine. While it does provide an ample amount of tools that let you apply some basic changes to your raster images, for anything more complex you need to look someplace else. Unless of course you’re really stubborn, like me, and enjoy doing things the hard way.

Figma并不完全適合于圖像處理,這完全可以。 盡管它確實提供了大量工具,可讓您對柵格圖像進行一些基本更改,但對于更復雜的事情,則需要在其他地方查找。 除非您當然像我一樣頑固,并且喜歡用艱辛的方式做事。

基礎 (The basics)

Now let’s quickly cover the basics of what you can do. First, you have the set of slider controls anyone who’s modified a photo on their phone should be familiar with.

現在,讓我們快速介紹您可以做什么的基礎知識。 首先,您擁有一組滑塊控件,任何在手機上修改過照片的人都應該熟悉。

Basic image modification sliders in Figma and their effects

Figma also provides you with the blend mode feature, used to determine how two layers interact with each other. Well known to those of us who have used Photoshop or similar apps in the past. Blend modes are a great feature, but using them properly may require a lot of practice and experimentation.

Figma還為您提供了混合模式功能,該功能用于確定兩個圖層之間如何交互。 在過去使用過Photoshop或類似應用程序的我們當中眾所周知。 混合模式是一個很棒的功能,但是正確使用它們可能需要大量的實踐和實驗。

Dark gray, red, blue and light gray layers over an image with different blend mode settings

You also get to choose how an image behaves when it’s resized, or rather when its bounding area is resized. This should make the most sense to those who are not afraid to dabble in CSS.

您還可以選擇調整圖像大小或調整其邊界區域時的行為。 對于那些不怕涉足CSS的人來說,這應該是最有意義的。

The default option for an image is to fill its bounding area. What this means is that when it’s scaled up or down and the image no longer fits the bounding area, some of its parts will get cropped away or rather hidden from view.

圖像的默認選項是填充其邊界區域。 這意味著當放大或縮小圖像且圖像不再適合邊界區域時,其某些部分將被裁剪掉或從視圖中隱藏。

The second option is fit. The image always remains in full view and is centered inside the bounding area. If the bounding area is too wide or too tall, you’ll get some empty space on the sides of an image.

第二種選擇是合適的。 圖像始終保持全屏狀態,并且位于邊界區域的中央。 如果邊界區域太寬或太高,您將在圖像的側面獲得一些空白區域。

Image settings popup in Figma and some of the available controls described

Crop seems a little janky, I rarely use it. When you choose crop from the menu, you get these handles that allow you to specify the bounding area. Even though the X, Y, W & H properties change accordingly when you manipulate the bounding area with your mouse, you can’t use them to define its exact size or location. As soon as you click either of those controls you get kicked out of the crop mode. Thankfully snapping still works. You have to be careful after using crop mode, as the image will lose its aspect ratio (as shown in the example below) when the bounding area is resized without the shift key being pressed.

作物看起來有些枯燥,我很少使用。 從菜單中選擇“裁剪”時,將獲得這些手柄,可用于指定邊界區域。 即使使用鼠標操作邊界區域時,X,Y,W和H屬性也會發生相應變化,但您無法使用它們來定義其確切大小或位置。 單擊這些控件中的任何一個,就可以立即退出裁剪模式。 值得慶幸的是,捕捉仍然有效。 使用裁切模式后,請務必小心,因為在未按Shift鍵的情況下調整邊界區域的大小時,圖像將失去其長寬比(如下例所示)。

Using tile for the first time brings the image to its original aspect ratio and size. If the bounding area’s smaller then the original image, you won’t see the effect of tiling. You can modify the size of the tile by setting its size in percentages or grabbing the side of a tile and moving it around. The tiles always retain the aspect ratio of the original image. This is a great tool for generating pattern backgrounds.

第一次使用圖塊使圖像達到其原始縱橫比和大小。 如果邊界區域小于原始圖像,則看不到平鋪效果。 您可以通過以下方式修改圖塊的大小:以百分比設置其大小,或抓住圖塊的側面并四處移動。 這些圖塊始終保留原始圖像的縱橫比。 這是生成圖案背景的好工具。

Fill, fit, crop and tile settings and their effects

All of these changes can be reversed, although there’s no quick way to bring back an image to its original size and properties. You could delete the modified image and reimport it, but that’d be way too easy. What any self-respecting Figma aficionado should do is set the image to tile. That’ll make the image pop back to its original size (or if you’ve been using tile before on the image, just set the tile size to 100%) and aspect ratio. Now resize the bounding box to fit the image’s frame and there you go.

盡管沒有快速的方法可以將圖像恢復到其原始大小和屬性,但所有這些更改都可以撤消。 您可以刪除修改后的圖像并重新導入它,但這太簡單了。 任何自重的Figma愛好者都應該將圖像設置為平鋪。 這將使圖像彈回其原始大小(或者如果您以前在圖像上使用平鋪,只需將平鋪大小設置為100%)和寬高比即可。 現在,調整邊界框的大小以適合圖像的框架,然后就可以了。

填充層堆疊 (Fill layer stacking)

Now that we’ve got all the obvious stuff out of the way, it’s time to move on to the fun parts. One of the coolest and less known features is the ability to stack fill layers of an object. It’s kind of like nesting layers inside an object or even a separate system of layers that behaves pretty much as the normal layers do.

既然我們已經排除了所有明顯的問題,現在是時候繼續介紹有趣的部分了。 最酷和鮮為人知的功能之一是能夠堆疊對象的填充層。 這有點像在對象內部嵌套圖層,甚至像單獨的圖層系統一樣,其行為都與普通圖層類似。

Adding new property or setting layers to fill, stroke, effect and export in Figma

You can have multiple fill layers, stroke layers, effect layers or export settings. Since we’re talking about image modification, we’re going to be talking about fill exclusively. Clicking the + button more than once keeps adding additional fill layers. The default type setting for the second fill layer, regardless of what kind of fill layer is set as the first one, is gradient.

您可以具有多個填充層,筆觸層,效果層或導出設置。 由于我們在談論圖像修改,因此我們將專門討論填充。 多次單擊+按鈕將繼續添加其他填充層。 無論將哪種填充層設置為第一填充層,第二填充層的默認類型設置都是漸變。

This is really cool because you can exercise greater control over your imported images while keeping your regular layer structure clean. Normally you’d need to put the image object in a frame and have the effects in a separate object, all of them appropriately constrained. By stacking fill layers you keep all your effect layers inside one single object and you don’t need to worry about constraints.

這真的很酷,因為您可以對導入的圖像進行更大的控制,同時保持常規圖層結構的清潔。 通常,您需要將圖像對象放在一個框架中,并將效果放在一個單獨的對象中,所有這些都應適當地加以約束。 通過堆疊填充層,您可以將所有效果層保留在一個對象中,而不必擔心約束。

Grabbable area of fill layers

Just as with normal layers, you can change the stack order of your fill layers. All you have to do is grab one and move it to wherever you like. The tricky part is actually grabbing one. The example on the left (above) highlights the entire area of a single fill layer in the Fill panel and from left to right you’ve got four controls that let you set fill type and color, opacity or remove the layer. Everything that isn’t a control is grabbable (highlighted on the right) and allows you to move the layer around. Knowing all that you can go all kinds of crazy with overlay tints, gradients and blend modes to receive many satisfying or unsatisfying effects, but there’s more.

與普通圖層一樣,您可以更改填充圖層的堆疊順序。 您所要做的就是抓住其中一個并將其移至您喜歡的任何位置。 棘手的部分實際上是搶一把。 左側的示例(上方)在“填充”面板中突出顯示了單個填充圖層的整個區域,從左到右,您具有四個控件,可用于設置填充類型和顏色,不透明度或刪除圖層。 并非控件的所有內容均可抓取(在右側突出顯示),并允許您四處移動圖層。 知道了所有這些之后,您就可以通過疊加色調,漸變和混合模式來瘋狂進行各種操作,以獲得許多令人滿意或不令人滿意的效果,但是還有更多。

Once you have a fill layer selected you can copy it, but only through keyboard shortcuts. There’s no right click menu for this layer system in case you’re wondering. Since you’re copying a property rather than an object, you need to select an object or a set of objects in order to be able to paste your fill layer into. And this is actually pretty awesome, because it lets you copy a fill layer from an imported image and paste it into any object that accepts fill layers. It could be a circle (if you’re creating, say, an avatar) or it could be text. This action doesn’t overwrite any preexisting layers — it gets added as the topmost layer of an object.

一旦選擇了填充層,就可以復制它,但是只能通過鍵盤快捷鍵進行復制。 如果您想知道,此圖層系統沒有右鍵單擊菜單。 由于要復制屬性而不是對象,因此需要選擇一個對象或一組對象才能將填充層粘貼到其中。 這實際上非常棒,因為它使您可以從導入的圖像復制填充層并將其粘貼到任何接受填充層的對象中。 它可以是一個圓圈(如果您要創建一個頭像),也可以是文本。 此操作不會覆蓋任何先前存在的層,而是將其添加為對象的最頂層。

How copying fill layers can help you create avatars

This is different than using the more fleshed out method of copying properties of an object. When you’re doing that you’re copying a set of different properties — could be a lot of them. Using my method you can be very particular about choosing the properties you want to copy between two objects.

這與使用更加充實的對象屬性復制方法不同。 當您這樣做時,您正在復制一組不同的屬性-其中可能有很多。 使用我的方法,您在選擇要在兩個對象之間復制的屬性時可能會非常特別。

圖片作為樣式 (Images as styles)

Some of the features I’ve described seem so obscure and unintuitive to use, it almost makes me questions their intendedness. As I’ve mentioned before, you could achieve the same effects by using the normal system of layers, masks, and constraints, though I often find myself preferring the fill stacking method. One of the reasons for that is that you can turn a combination of fill layers that includes an image into a color style for your design system. Once you’re ready setting up your layer stack, just add it to your color styles and it’s now ready to be applied to any object that accepts colors. So yeah, nothing’s stopping you from using it as a stroke layer now.

我所描述的某些功能使用起來似乎晦澀難懂且不直觀,幾乎使我懷疑它們的用途。 如前所述,盡管我經常發現自己更喜歡填充堆積方法,但是通過使用常規的圖層,蒙版和約束系統也可以達到相同的效果。 原因之一是可以將包含圖像的填充層組合轉換為設計系統的顏色樣式。 準備好設置圖層堆棧后,只需將其添加到顏色樣式中,即可將其應用于接受顏色的任何對象。 是的,沒有什么阻止您現在將其用作筆觸圖層。

I hope that this newly acquired knowledge will have you switching back to Photoshop a little less now. Good luck.

我希望這些新獲得的知識能使您現在切換回Photoshop的時間有所減少。 祝好運。

翻譯自: https://uxdesign.cc/advanced-image-manipulation-in-figma-e1a0468c4982

figma下載

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274897.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274897.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274897.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

ToString格式化

在很多對象顯示為字符串的時候都會使用到ToString中的格式化,由于以前沒怎么注意到這個問題,想總結一下各個基礎結構對象的格式化,以便后備之用!!!Int.ToString(format): 格式字符串采用以下形式&#xff1…

xml學習4-dtd

1、DTD元素的定義 <?xml version"1.0" encoding"gb2312"?> <!--*表示0或者多個 表示至少要有一個 ?表示0個或者一個 內容模型 |表示只能包含分隔開中的一個 ,表示序列 下面是DTD元素的聲明 #PCDATA 表示字符數據 EMPTY表示 空元素…

指針和指針的指針_網絡上的iPad指針

指針和指針的指針a week ago I saw a new IPad Pointer presentation and was very excited about what they did. It was very interesting to see how they design different pointer modes and attention to details. Here is the presentation:一周前&#xff0c;我看到了一…

Vue 是如何用 Rollup 打包的?

大家好&#xff0c;我是若川。持續組織了6個月源碼共讀活動&#xff0c;感興趣的可以點此加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列Rollu…

leetcode 207課程表

class Solution { public:bool canFinish(int numCourses, vector<vector<int>>& prerequisites) {//驗證是否為DAG&#xff0c;每次驗證指向的是否已經存在于當前圖中//建圖vector<int> indegree(numCourses,0);//入度vector<vector<int>> …

2012-04-12

一.JS 中的return Return false&#xff1a;相當于一個終止符,用來阻止提交表單或繼續執行下面的代碼&#xff0c;只在當前函數有效&#xff0c;不會影響其他外部函數的執行 Eg: function a(){if(true) return false;} Function test{a();b();c();} //a方法中的return false 不…

sketch怎么傳到ps_2020年從Sketch移植到Figma的詳細指南

sketch怎么傳到psAs we’re locked up in our homes due to COVID-19 pandemic, many of us are working remotely and Figma is a go-to tool for designers for the same.由于COVID-19流行病使我們被關在家里&#xff0c;我們中的許多人都在遠程工作&#xff0c;而Figma是設計…

還沒搭建過Vue3.x項目?幾行代碼搞定~

大家好&#xff0c;我是若川。持續組織了6個月源碼共讀活動&#xff0c;感興趣的可以點此加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列相信現…

mysql 常用命令 匯總

參考閱讀 摘要 權限 允許公網訪問列操作 修改列名mysql 修改列屬性其他 登錄設置自動補全與utf-8編碼其他一次添加多條記錄修改表名字允許公網訪問 1,修改表,登錄mysql數據庫,切換到mysql數據庫,使用sql語句查看"select host,user from user ;" mysql -u root -pvmwa…

一步步創建 邊欄 Gadget(二)

相信使用上篇中創建的邊欄Gadget之后&#xff0c;大家會很郁悶。難道視頻窗口就那么小嗎&#xff1f;看起來真費勁。我能通過該Gadget看著一部電視劇。而不能夠定制自己需要的或者想要看的電視劇。 在上一篇一步步創建 邊欄 Gadget&#xff08;一&#xff09;中&#xff0c;我們…

tableau 自定義圖表_一種新的十六進制美國地圖布局的案例-Tableau中的自定義圖表

tableau 自定義圖表For whatever reason, 無論出于什么原因 maps are cool. Even though the earth has mostly been the same since those 地圖很酷 。 即使自Pangaea days, we humans make and remake maps constantly. It might be that old maps remind us of how things …

2022,前端工具鏈十年盤點

大家好&#xff0c;我是若川。持續組織了6個月源碼共讀活動&#xff0c;感興趣的可以點此加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列2021 …

var result = ![] == []; console.log(result); // 結果是?為什么?

相等操作符會對操作值進行隱式轉換后進行比較&#xff0c;如果一個操作值為布爾值&#xff0c;則在比較之前先將其轉換為數值&#xff0c;這里 ![] 一定是布爾值了。 http://www.csser.com/board/4f3f516e38a5ebc9780004d3轉載于:https://www.cnblogs.com/anjey/archive/2012/0…

講講volatile的作用

講講volatile的作用 講講volatile的作用254推薦一個定義為volatile的變量是說這變量可能會被意想不到地改變&#xff0c;這樣&#xff0c;編譯器就不會去假設這個變量的值了。精確地說就是&#xff0c;優化器在用到這個變量時必須每次都小心地重新讀取這個變量的值&#xff0c;…

書籍排版學習心得_為什么排版是您可以學習的最佳技能

書籍排版學習心得重點 (Top highlight)I was introduced to design in a serpentine fashion. I don’t have any formal training. Instead, I’ve learned everything through the Web, books, and by interacting with designers daily.我被介紹為蛇形設計。 我沒有任何正規…

javascript專題:如何構建自己的js庫

首先看看這個&#xff1a; (function(){ //運行的代碼 })(); 紅色括號里面是一個匿名函數&#xff0c;紅色括號是分割&#xff0c;表示里面的函數是一個部分&#xff0c;綠色的括號表示一個運算符&#xff0c;表示紅色括號里面的函數要運行。 相當于定義完一個匿名函數后讓它直…

若川的 2021 年度總結,彈指之間

1前言從2014年開始&#xff0c;每一年都會寫年度總結&#xff0c;已經堅持了7個年頭。7年的光陰就是彈指之間&#xff0c;轉瞬即逝。正如孔子所說&#xff1a;逝者如斯夫&#xff0c;不舍晝夜。回顧2014&#xff0c;約定2015&#xff08;QQ空間日志&#xff09;2015年總結&…

線框圖用什么軟件_為什么要在線框中著色?

線框圖用什么軟件I was recently involved in a debate around why some wireframes (which were definitely not UI screens) were not 100% greyscale. This got me thinking — when is it ok to use colour in wireframes, and when is it going to cause you problems fur…

Linux 內核

Linux 內核是一個龐大而復雜的操作系統的核心&#xff0c;不過盡管龐大&#xff0c;但是卻采用子系統和分層的概念很好地進行了組織。通過本專題&#xff0c;我們可以學習 Linux 的分層架構、內核配置和編譯、內核性能調試和 Linux 2.6 中的許多提升功能。Linux 內核組成 Linux…

給asterisk寫app供CLI調用

環境&#xff1a;CentOS6.2 Asterisk 1.8.7.1 一、添加源文件 復制app_verbose.c為app_testApp.c 復制app_verbose.exports為app_testApp.exports 主要是修改一些標識&#xff0c;編譯不會出錯就行&#xff0c;這里列出我進行的主要修改。 1、添加頭文件 #include "aster…