周末陪著朋友去看了一下家電(電視、洗衣機等),通過店里面的家電標價簽來快速瀏覽商品的價格。今天就針對這個家電標價簽來給使用標簽批量生成軟件給大家分享一下制作的步驟。
小提示:
一般使用標簽批量生成軟件生成的可變數據標簽,都是通過數據類型數據庫導入的方式進行批量生成的。在本文中因為制作的是家電標價簽的模板,上面顯示的文字內容都是固定不變的,所使用的數據類型是手動輸入的方式進行操作的。
設置家電標價簽尺寸
打開事先在電腦(win10系統)上面安裝好的標簽批量生成軟件,點擊新建,選擇打印機,紙質選擇“自定義大小”,寬100mm*高70 mm,1行1列,并在“畫布”中選擇背景顏色,“勾選”打印背景,“文檔設置”右側可以預覽出設置的標簽紙張效果;
插入公司LOGO
點擊左側工具欄中“插入位圖圖片”的圖標,鼠標雙擊圖片,打開其數據源窗口,點擊左側“+”,在手動輸入窗口下方點擊坐下瀏覽,根據路徑選擇對應的圖片添加,保留圖片路徑,點擊確認;
繪制普通文本
點擊左側工具欄“A”圖標,繪制一個普通文本,雙擊普通文本打開“圖形屬性”,在“數據源”中修改默認數據,手動添加“美的專賣店”,并在“圖形屬性”中的“文字”里面設置文字排版參數信息;家電標價簽上其余固定不變的文字內容也都是這樣添加。如下圖:
繪制圓角矩形
點擊“繪制矩形”,并在畫布上“繪制矩形”,鼠標右鍵點擊“矩形”-“圖形屬性”-“填充”類型實心-“背景色”白色,線條粗細選擇“0”-圓角填寫為3,點擊確定;
繪制矩形的操作步驟同上。繪制直線的添加操作步驟可以參考文章:如何在條碼軟件中繪制直線并靈活設置參數;添加完成標價簽內容之后效果如下圖;
以上就是使用標簽批量生成軟件生成家電標價簽的制作步驟。在添加標價簽里面的內容時,可通過數據庫導入的方式批量生成,具體的操作步驟可以參考文章:條碼打印軟件如何篩選導入Excel表數據。
編輯導語:圖標設計是UI設計中不可缺少的元素,它看似簡單,但其實內含門道。本篇文章里,作者就對icon設計的相關知識和icon繪制方法做出經驗介紹。如果你對icon設計也想要有所了解的話,那就點進來看一下吧。
圖標是一種抽象的、跨語言的符號,是UI設計中最不可或缺的視覺元素,在設計中看似只占一個很小的區域,但是它卻是考驗設計師基本功的重要標準。
了解圖標相關的概念,以及正確繪制的方法,是入門 UI設計的必備條件。
不如,從這篇開始專注圖標設計相關的專業知識,逐步搭建一個完整的圖標知識庫。
經常有同學問圖標該設計多大,不同設備icon尺寸是多少,那第一篇就從圖標尺寸說起吧。
在界面圖標設計中最常用尺寸有:12×12、16×16、24×24、32×32、48×48等,這里的建議是以48px作為常規圖標的設計尺寸,因為iOS界面中的網格大小是4的倍數,蘋果規范要求最小點擊面積為44pt;安卓的網格是8的倍數,最小操作熱區為48dp。
另外,@2x下作圖要保證是4的倍數,這樣可以整除2,適配@1x的屏幕;@3x下作圖就需要是12的倍數了,這個數值可以整除2、3、4,適配@1x和@2x的屏幕。
那PC端呢?
到了桌面端后,因為屏幕分辨率的不同,沒有規定最小操作熱區。但受到文字落地方式(Chrome瀏覽器中限制最小的字體為12px)的限制,12px漸漸成為大家公認圖標操作熱區的最小值。16px、24px、32px都是PC端常見的圖標尺寸。
通常我們只需要選擇一個通用的尺寸來繪制,然后讓開發人員根據倍數調整可能需要的尺寸即可,這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。
不過當我們的圖標涉及一些復雜的細節時,還是需要根據尺寸大小單獨繪制。比如我們的系統圖標可能是24px,但是營銷圖標是80px,兩者的使用差別會很大,那么我們就需要為那些較大的尺寸添加一些細節。
這里建議從最大的尺寸開始,然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多,也能最大程度的保留圖標原始狀態。
接著來看各平臺自家的尺寸規范。
設計師設計時,通常只用設計一個App Store的圖標(1024px1024px),其他尺寸可用ios圖標生成器自動輸出一套,小尺寸圖標單獨微調下細節即可。
在蘋果給我們的這套資源中,有 Template-AppIcons-iOS 這個文件。
打開這個文件,用我們自己設計的圖標替換掉智能對象里的內容,就會生成我們自己的圖標,把背景隱藏,切出這些圖標即可。
這兩處的圖標大小一樣都是24x24pt,最大不超過28x28pt。
注:@2x和@3x在邏輯像素單位是一樣的,如果你使用如 Sketch、Adobe XD 等矢量工具設計,可以參照邏輯像素數值設計即可。
iOS 規范中 Tab欄一般有五個、四個、三個圖標的形式,寬度平分,icon尺寸約30x30pt(60px)。
蘋果給出了四種不同形狀標簽欄圖標的尺寸參考供大家設計時參考。其意義是讓不同外形的圖標看上去是差不多大的,保證圖標的平衡。
1)目標寬度和高度(圓形圖標)
2)目標寬度和高度(方形圖標)
3)目標寬度(寬圖標)
4)目標高度(高圖標)
iOS在這里所定義的尺寸并不是圖標文件最后輸出的尺寸,而是給設計師作圖時,針對不同圖標形狀的參考尺寸,目的是為了讓圖標的視覺大小看上去一致。
放在mipmap-*dpi下,文件名為ic_launcher.png。
keyline(關鍵線)形狀,以192x192dp為例:
相比iOS,Material Design對圖標尺寸有更詳細的規范。默認系統圖標尺寸為24x24dp,四周有2dp的活動區域。Keyline(關鍵線)形狀提供了針對圓形、正方形、垂直矩形、水平矩形的尺寸規范,以保證一致的視覺比例。
關于Keyline線畫法會在下一篇詳解,敬請關注。
切圖時不用帶圓角和陰影,Google Play 會以動態方式應用圓角遮蓋部分和陰影,確保所有應用/游戲圖標的設計保持一致。
圖標尺寸的規范主要是確保他們在物理尺寸上是一致的,至于視覺上怎么統一,還需要自己多去練習,這個后邊的文章中也會講到。
為特定的項目選擇特定的尺寸, 如果你為iOS或是Android設計圖標,在決定尺寸之前,你應該查看圖標規范,蘋果的HIG和安卓的Material Design都是你的設計指南。
另外,如果你是一個剛入行的UI設計師,建議開始從較大尺寸的圖標開始,比如64或96px,因為小尺寸的圖標難度更大(這包括像素對齊)。
OK,希望通過這篇文章的梳理,大家能對圖標的尺寸有更全面的認識,我們下期見。
下篇預告:圖標柵格及Keyline線畫法。
參考資料
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cn
https://material.io/design/iconography/system-icons.html#design-principles
作者:Fyin印跡;公眾號:印跡拾光
本文由 @Fyin印跡 原創發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議