Adobe Fireworks 線框圖資源和教程

已發表: 2015-11-07

Adobe Fireworks 是網頁設計師中最受歡迎的線框圖和原型設計應用程序之一。 與任何其他圖形編輯器相比,使用 Fireworks 進行原型設計的原因有很多,但我們不會在這篇文章中討論它們(也許你可以試試這個:Adobe Fireworks 對抗 Photoshop 和 Illustrator 的案例)。

這篇文章將提供一個全面的起點和參考,供任何想要邁出 Fireworks 第一步但不太確定從哪裡開始的設計師。

我們承諾,一旦您開始使用 Fireworks 進行線框圖製作,您將永遠不會回頭。

Adobe 的 Fireworks 線框圖教程和資源

使用 Fireworks 創建符合標準的網頁設計 →
本文展示瞭如何使用 CSS 導出功能的增強功能,以便您可以創建符合標準的設計。

為 CSS 和圖像導出設置 Fireworks 網頁設計模型 →
本文首先列出了在準備 Fireworks Web 設計模型以訪問 Web 時可以幫助您的關鍵工具。 然後詳細回顧每個工具並提供一些示例。 本文繼續介紹一個簡單的網站設計模型示例(提供了 PNG 文件)。 最後,本文回顧並幫助您快速優化導出的 CSS/HTML 代碼。

使用 Fireworks CS4 設計網站應用程序 →
本教程向您展示了在 Adob​​e Fireworks 中創建網站應用程序的過程——從繪製原始頁面設計草圖到開發線框,再到創建最終設計。 本文將介紹所有基本工具和說明,以幫助您立即開始在 Fireworks 中創建網站和設計。

Fireworks 中預建的 CSS 模板 →
本文介紹瞭如何使用提供的示例 PNG 模板來確保充分利用 Fireworks 中的 CSS 導出功能。

在 Fireworks 中創建交互式原型 →
煙花提示和技巧視頻。 在本集中,您將學習如何創建交互式原型。

煙花線框圖教程

Fireworks:PDF 中的交互式原型

本教程解釋瞭如何直接從 Fireworks 生成 PDF 格式的交互式原型。 這種原型對於與客戶進行佈局批准或只是為了使設計開發團隊之間的溝通更容易非常有用。

在 Fireworks 中構建促銷 iPhone 應用程序網站線框

本教程涵蓋了在 Fireworks 中為 iPhone 應用程序網站創建線框的設計過程。 對於那些不熟悉 Fireworks 的人來說,這將是一個很好的起點,可以使用它來為您的網頁設計項目線框。 本教程是多部分系列的第一部分。

使用 Fireworks 創建基本線框

本教程教您如何使用 Fireworks 構建自己的線框。 它涵蓋了線框中必要的 Web 元素和頁面鏈接的基礎知識。 本教程中構建的網站並不花哨,但它的簡單性讓用戶專注於我的攝影。

煙花線框圖視頻教程

Fireworks 中的原型製作 (1 of 3)

在本視頻中,您將學習如何在簡單網站的原型設計中構建帶有狀態、菜單和子菜單的導航欄。

Fireworks 中的原型製作 (2 of 3)

在本視頻中,您將了解如何在創建網站原型時鏈接頁面。

Fireworks 中的原型製作 (3​​ of 3)

在本視頻中,您將學習如何創建交換圖像或不相交翻轉並添加交互性。

煙花線框圖資源和模板

橙色命令

Orange Commands 是 Fireworks 的大量命令集合,它使網頁設計師的生活更輕鬆,工作流程更快。 Orange Commands 是免費和開源的。

Fireworks 迷你網絡線框圖套件

Fireworks 迷你網絡線框圖工具包為您提供了網絡線框圖的基本形狀。 對於其他所有內容,您都可以使用原生 Fireworks,因為 Fireworks 本身就是用於原型設計和線框圖製作的絕佳工具。 該文件是 Fireworks 原生的 PNG 格式,這意味著您可以在 Fireworks 中編輯和調整所有形狀的大小。

線框庫符號

這是一組豐富的(意味著它們具有您可以在符號屬性中更改的項目)符號。 這套應該看起來像手繪線框項目。 配色方案旨在看起來像藍圖墨水。

Fireworks 常用庫模板

Fireworks 的可下載模板工具包。 該套件採用通用庫格式。

黑白公司網站模板

設計用於公司網站的線框模板。 設計是簡單的黑白相間。

Android 的煙花模板

Android 的 Fireworks 模板。 Android 用戶界面元素已重繪為矢量圖像。 在文件夾中,元素大多根據 Android 詞彙表進行標記。

用於菸花的 BlackBerry 樣機模板

BlackBerry 的 Fireworks 模板。 該模板是為分辨率為 640×480 的 BlackBerry 設備製作的,但由於所有 UI 元素都是矢量圖像,因此可以輕鬆調整其大小。

煙花手勢庫

觸摸手勢參考指南是一套獨特的資源,供從事基於觸摸的用戶界面的軟件設計人員和開發人員使用。 此處為 Fireworks 重新創建了一組手勢作為豐富的符號。

有用的煙花資源

網頁版 →
Webportio 是 Fireworks 的圖形資源。 所有圖形文件都具有良好的結構,因此易於瀏覽。 這些藝術品是基於矢量的,可以根據您的需要輕鬆定制。 所有文件都是免費提供的,可用於非商業或商業用途。

煙花區 →
Fireworks Zone 是 Fireworks 愛好者的資源,包含教程、文章、鏈接庫、命令、樣式、紋理、圖案、自動形狀。 據該網站稱,它是網絡上最大、更新最頻繁的 Fireworks 網站之一。

延伸閱讀

線框圖:提示、工具和技術 →
兩篇文章,介紹了一些可用於線框圖的相關工具、技術和技巧。 兩篇文章中的第一篇概述了這些工具,而下一篇文章介紹了一些技巧和技巧,以使您的線框圖過程更加順暢。

你用煙花做線框嗎?

交給你:你用 Fireworks 做線框圖嗎? 如果是這樣,請隨時在下面的評論部分分享您最喜歡的教程、資源和/或模板。