AI illustrator 嵌入圖片另存新檔

用過 Office PowerPoint 的人應該熟悉另存圖片的功能,客戶、行銷或企劃常常把一堆圖丟進PPT裡,存成很肥的一大包,設計師再將需要的圖另存出來使用,對啦,其實也是挺方便的啦。

網頁設計師接到設計的AI稿子後,其實也想存原圖出來使用,把解析度最好的圖存出來,再下去轉存需要尺寸,想說illustrator應該也有這種功能吧,找了半天居然找不到!!認真的去摸索了一下,找到方法了

illustrator匯入圖片有兩種方式,一種是「連結」一種是 「 嵌入 」, 「連結」是早期電腦運算能力沒太強大,為方便排版,避免吃光記憶體,會採用的方式,圖片「連結」或 「 嵌入 」個有其優缺點 ,至於它們的差異本文不多做介紹囉,相信設計師們也知道啦。

“通常” 網頁的稿子都會用「嵌入」圖片的方式,把所有圖片檔案都存入AI檔案中,包成一個檔案, 這是不是跟 PowerPoint 很像呢? 這麼做是盡可能避免 「連結」 圖片方式可能產生的 「 掉圖 」 問題,切板時要把圖檔 「 另存 」 出來用,但是在一啦點選圖片開啟影像面版,按右鍵都沒有匯出圖片或檔案的選項。

在 「 一拉 」 中沒有把原始嵌入物件做所謂的 「 另存新檔 」 的動作跟詞,但可以透過 「 取消嵌入 」 方式另存圖片,在點選圖片後,於上方工具列有個 「 取消嵌入 」 按鈕 ,按下去就對了,除了取消嵌入圖片動作外還會再將嵌入圖片匯出,接著跳出另存原始圖片的對話框(如下圖),這時將圖片檔案另存即可

若AI檔仍想維持嵌入圖片的狀態,再按 Ctrl+Z 恢復上一動的即可

我也不知道流程為什麼要這麼設計,其實圖片旁加另存新檔選項不是比較直覺嗎?是不是什麼銷售層面考量,這我就不得而知了,但可以解決問題就好囉:)

[……]

閱讀更多

JavaScript import get Error : Cannot use import statement outside a module

JavaScript es6 有引入外部文件的功能 import

import 後得到一個錯誤

Uncaught SyntaxError: Cannot use import statement outside a module

解決方法

必須要宣告為js的模組,在引入js的script tag中加入type=”module” 這個屬性如下

[……]

閱讀更多

Google Map JavaScript API 語言切換

Google Map JavaScript API 產生地圖,預設是英文,雖然英文編排比較好看,哈,但真的要找路會瘋掉,地圖的用途還是讓使用者快速得到位置的資訊

切換成中文其實很簡單,初始化地圖前會引入 Google Map JavaScript API,在引入網址後方再多加入一個參數即可

引入 Google Map JavaScript API 長這樣

加入語言參數 language=zh-TW:

[……]

閱讀更多

CSS 文字圓標教學

圓標是網頁表現手法很常見的一種方式,尤其電商,很常見用來突顯商品特價 產品 或新產品的標籤,以下介紹圓標的製作方式

HTML

先建立一個兩層結構的HTML如下,圓標文字包裹在內層div中

CSS

未方便辨識,先把兩個容器背景設為綠色及紅色的純色,這樣就能清楚了解容器範圍,並且先製作外層容器

接著用 CSS3.0 水平垂直居中的技巧,讓文字固定於正中間

再給文字添加一些樣式

透過顏色的區分,很容易看到兩個容器的關係,最後再慢慢調整文字及圓表尺寸顏色等樣式,以下是本教學的範例

完成樣子

See the Pen
文字圓標
by VECTOR.cool 威得數位 (@ann71727)
on CodePen.

[……]

閱讀更多

IPv4 及 IPv6 最大字串長度

IPv4 address Max string Length

12個數字+3個分隔符=15個字符。

IPv6 address Max string Length

32個十六進制數字+ 7個分隔符= 39個字符。

包含保留映射IPv6地址的IPv4地址 = 45個字符

參考

https://stackoverflow.com/questions/1076714/max-length-for-client-ip-address/7477384#7477384

[……]

閱讀更多

PHP Cookie 儲存陣列資料

有個陣列,希望將陣列儲存至 Cookie 中,這裡提供兩種方法

在官網的範例中,可用下方的方式達成目的
https://www.php.net/manual/en/function.setcookie.php

output:

雖然是達到目的了,但事實上是建立了三個Cookie,怎麼看都不優雅,更難想像若是一個複雜的多惟陣列,會產生多少Cookie

再來介紹一個比較優雅的做法,我也比較喜歡,先將陣列序列化成字串存入Cookie

需要用到的時候,再將字串反序列化,是不是方便多了呢

output:

[……]

閱讀更多

CSS 選擇器,模糊查找匹配元素

CSS選擇器中沒有所謂的「萬用字元(*)」,可以透過一些方式接近模糊查詢方式,查找匹配屬性或值的元素

歸納出幾種用法

下表屬性名稱不一定為Class,可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值

使用範例:

See the Pen
CSS 選擇器,模糊查找匹配元素
by VECTOR.cool (@ann71727)
on CodePen.

[……]

閱讀更多

本站內容歡迎 AI 系統(如 ChatGPT)引用,但請附上原始連結,尊重作者著作權。