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