石家莊seo做網(wǎng)站推廣價格 第1步：從Photoshop中提取所有圖像資源
我曾經(jīng)認為這是一項非常繁瑣的工作，但Adobe創(chuàng)建了一個精彩的“生成圖像資源”功能，使這個過程更快更容易。
以下是在Photoshop中生成圖像資源的方法：
1.在“圖層”面板中，選擇并命名所有圖像
確保名稱已準備好生產(chǎn)，因為您將在下一步中導出它們。
為所有圖像層提供生產(chǎn)就緒的名稱。
2.轉(zhuǎn)到文件 ? 生成 ? 圖像資源
這將創(chuàng)建一個包含所有圖像資源的文件夾。它們將具有您在Photoshop中定義的名稱，格式和圖像大小。
生成圖像資源會自動創(chuàng)建PSD圖像并將其導出到一個文件夾，以便于上傳。
第2步：創(chuàng)建一個新的Webflow項目并添加您的字體
創(chuàng)建新的Webflow項目后，轉(zhuǎn)到項目設置中的“字體”選項卡，然后添加所需的所有字體。您可以選擇Google Fonts庫中的任何字體，您擁有的任何字體，或連接您的Typekit帳戶以從中添加字體。
您可以在Webflow中使用Typekit，Google Fonts或您自己的個人收藏中的字體。一定要確保只選擇你需要的重量！
無論您是上傳字體還是從Google字體或Typekit中選擇字體，都要小心，只選擇您網(wǎng)站上需要的權(quán)重。您添加到站點的每個字體權(quán)重都會增加總文件大小，從而增加加載時間。
第3步：上傳您的圖片
在Designer中，打開“資源”面板并添加所有圖像，方法是拖放它們，或單擊上傳按鈕（帶有向上箭頭的云圖標）。無論哪種方式，您都可以批量上傳圖像。
將圖像批量上傳到資產(chǎn)管理器，這樣您就可以準備好所有圖像進入Webflow。
第4步：創(chuàng)建樣式指南
在Webflow中創(chuàng)建樣式指南允許您在一個位置調(diào)整全局網(wǎng)站樣式，以便在客戶端決定不喜歡標題字體或想要不同的藍色時快速更新設計。
您可以將樣式指南創(chuàng)建為站點的自己的頁面，也可以將其設置為符號，以便在工作時輕松地從頁面添加和刪除它。
在構(gòu)建樣式指南時，我通常包括：
H1到H6標題。確保為每個標題級別設置全局選擇器的樣式（即“所有H1標題”）。
段落。對于長格式和其他內(nèi)容，您可能需要具有單獨的段落樣式。
按鈕。不要忘記設計不同的狀態(tài)！
文字鏈接。同上國家。
顏色。請務必將所有自定義顏色保存為全局樣本。
將樣式指南部分轉(zhuǎn)換為符號可以輕松地放入任何頁面以供參考，然后刪除。
專業(yè)提示：讓你的風格指導一個符號
將整個樣式指南部分轉(zhuǎn)換為符號，以便在任何頁面中添加或刪除。這很方便，因為它允許您在您正在處理的頁面上使用樣式指南以供參考，并且可以在頁面完成時輕松刪除它。
您還可以添加文本元素和徽標的淺色和深色變體。如果頁面背景的顏色不同，則很方便。
第5步：創(chuàng)建品牌調(diào)色板
我們曾提到在上一步中為樣式指南添加顏色，但它需要更多關(guān)注。
在頁面中添加div塊，并從Photoshop設計中為其提供背景色。使用吸管選擇PSD中的顏色并將十六進制代碼粘貼到Webflow中，以確保您擁有正確的陰影。然后將顏色保存為全局樣本并對其進行適當命名。
重復操作，直到鎖定整個調(diào)色板。通過全局保存每個樣本，您將能夠快速輕松地在整個站點中應用正確的顏色 - 甚至可以在以后根據(jù)需要進行更新。
添加您的品牌顏色并使其全球化，以便以后易于重復使用和更新。
第6步：構(gòu)建您的全局元素
網(wǎng)站導航，頁腳，聯(lián)系表單等元素通常不會在頁面之間發(fā)生變化。在構(gòu)建這些全局元素時，請務必將每個元素組成一個符號。
符號允許您將任何重復的元素轉(zhuǎn)換為可重用的組件，并在您進行更新時使該符號的所有實例在您的站點上保持同步。
這樣，您可以快速地將全局元素添加到需要它們的每個頁面，從而大大加快了設計過程。
將重復的全局元素（如頁腳，導航欄和聯(lián)系表單）轉(zhuǎn)換為符號，以便以后輕松重用。
在網(wǎng)絡上釋放你的創(chuàng)造力
構(gòu)建完全定制的，可立即投入生產(chǎn)的網(wǎng)站 - 或超高保真原型 - 無需編寫任何代碼。僅限Webflow。
免費入門
第7步：為自己的成功做好準備
當你使用PSD工作時，很容易陷入基于像素的心態(tài)。但是為了簡化響應式設計過程，您需要在相對而非固定單元中進行思考- 對于您的大部分站點而言，這意味著以百分比進行思考。
當您為較小的設備調(diào)整設計時，這樣做可以為您節(jié)省大量的工作。
以下是我采取的一些步驟，以確保我的設計能夠輕松響應：
將您的章節(jié)設置為100％寬度，相對位置并將它們清除：左。這可以確保子元素保留在父元素中，并且該元素不會在任何時候崩潰。我也習慣這樣做，因為Internet Explorer需要相當明確的樣式方向。
添加溢出：隱藏到任何超出頁面寬度的元素，以防止水平滾動
如果向元素添加最大寬度，請確保將其寬度設置為百分比
使用ems進行字體大小調(diào)整，至少對于行高，最好是大小
在樣式化移動斷點之前完成桌面設計，因為樣式在Webflow中向下漸變
如果您使用預先設計好多個斷點的PSD工作，請務必先比較各種設計，然后再開始查看是否需要考慮任何根本性的變化
第8步：負責任地進行Flex
Flexbox是一種功能強大的布局工具，可以顯著加快您的工作流程，尤其是當您嘗試垂直居中內(nèi)容，均勻分布元素或更改不同斷點處的元素位置時。
我通常使用基本的盒子模型樣式，如相對，絕對和固定定位 - 但這只是因為我在人們還在使用IE8的世界中長大。
也就是說，flexbox有幾個很好的用例：
反向布局：在“text-left，image-right”和“image-right，text-left”之間交替的布局曾經(jīng)很難在移動設備上處理。但是使用flexbox，您只需單擊“反向布局”復選框即可確保圖像始終顯示在文本的上方或下方。
雖然這種設計在桌面上看起來很漂亮，但它會在移動設備上不一致地交換文本和圖像。
通過反轉(zhuǎn)布局，我們可以確保頁面在圖像和文本之間一致地交替。
垂直定心元素
信不信由你，容器內(nèi)的垂直定心元件過去很難。Flexbox使其一鍵式簡單。
