㈠ web前端,一張圖片的實際尺寸為1334×662,屏幕解析度比這張圖片還高,前端如何設計鋪滿整個屏幕的
一般是這樣的,
假設屏幕和圖片寬度比 大於高度比 應該設置圖片高度為屏幕高度,然後寬度等比拉伸並且居中;
假設屏幕和圖片寬度比 小於高度比 應該設置圖片寬度為屏幕寬度,然後高度等比拉伸並且居中;
㈡ Photoshop CS6 保存web圖片時顯示的大小和保存後的實際大小不一樣
4.01K和4.82K相差很小啊,你說的有點誇張了,有點誤差是正常的,你知道有這樣的誤差即可,不必理會,忽略便是~~~
㈢ 網頁設計尺寸與PSWEB文件尺寸
網頁設計在初始要界定出網頁的尺寸大小。就像繪畫給出一塊畫版來。這樣才能方便設計。
網頁的尺寸受限於兩個因素:一個是顯示器屏幕。顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展。但目前也有為數不少的15寸顯示器。另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Friefox等。
高度:
高度是可以向下延展的,所以一般對高度不限制。 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。
寬度:
1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。
2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005
3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001
註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。
所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點。也方便做一些浮動層的設計。
如果是800的解析度一般都設成770。但也有設成760的。
這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右。
網頁設計標准尺寸:
1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間。就不會出現水平滾動條和垂直滾動條。
3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右
4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象。
頁面標准按800*600解析度製作,實際尺寸為778*434px
頁面長度原則上不超過3屏,寬度不超過1屏
每個標准頁面為A4幅面大小,即8.5X11英寸
全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px
另外120*90,120*60也是小圖標的標准尺寸
每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K
標准網頁廣告尺寸規格
一、120*120,這種廣告規格適用於產品或新聞照片展示。
二、120*60,這種廣告規格主要用於做LOGO使用。
三、120*90,主要應用於產品演示或大型LOGO。
四、125*125,這種規格適於表現照片效果的圖像廣告。
五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。
六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。
七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。
八、88*31,主要用於網頁鏈接,或網站小型LOGO。
廣告形式 像素大小 最大尺寸 備注
BUTTON 120*60(必須用gif) 7K
215*50(必須用gif) 7K
通欄 760*100 25K 靜態圖片或減少運動效果
430*50 15K
超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果
巨幅廣告 336*280 35K
585*120
豎邊廣告 130*300 25K
全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式
圖文混排 各頻道不同 15K
彈出窗口 400*300(盡量用gif) 40K
BANNER 468*60(盡量用gif) 18K
懸停按鈕 80*80(必須用gif) 7K
流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)
網頁中的廣告尺寸
1.首頁右上,尺寸120*60
2.首頁頂部通欄,尺寸468*60
3.首頁頂部通欄,尺寸760*60
4.首頁中部通欄,尺寸580*60
5.內頁頂部通欄,尺寸468*60
6.內頁頂部通欄,尺寸760*60
7.內頁左上,尺寸150*60或300*300
8.下載地址頁面,尺寸560*60或468*60
9.內頁底部通欄,尺寸760*60
10.左漂浮,尺寸80*80或100*100
11.右漂浮,尺寸80*80或100*100
㈣ 請教做網站的圖片大小,這個有標准嗎謝謝!
足夠清楚就行,沒有什麼大小限制。
教你一個圖片優化技巧,很簡單的。
存儲的時候使用「存儲為web所用格式」然後去試圖片在JPG和PNG格式下的清晰度及大小。
通常情況下,圖片清晰度差不多的,用KB相對小的那種格式存儲。
後面我會寫一篇「圖片快速優化技巧"這類的經驗,歡迎你關注我(經驗賬戶名:16大要素,裡面都是我自己寫的電腦實踐小常識),我會在裡面詳細介紹具體操作步驟的。
㈤ ps存儲為web格式圖片尺寸大小被限制,例如750*10000存出被限制650*10000
用切片工具切一下,WEB格式都是網頁上用的圖片,存成那麼大載入也慢,網上看的人會打不開。
㈥ ps儲存為web所用格式。怎麼圖像大小那裡被限制了,怎麼破除這個限制
點擊像素後面那小傢伙 就可以按照原尺寸保存!!
㈦ 為什麼網頁中的圖標常用16px,24px,32px 這些尺寸
提到圖標設計,似乎每個設計師都有話說,但是要做好圖標設計真的那麼容易么?今天這篇文章針對網頁設計領域的圖標設計進行了相對全面的梳理,從設計技巧到設計資源一應俱全,但願能幫上你! 圖標是每一個現代UI中不可或缺的組成部分,它們不僅能協助UI布局組織內容,而且輕量級的圖標融入界面也不會喧賓奪主。不僅手機和平板的APP UI中會大量用到各種圖標,而且iPod和智能手錶的界面中也是如此,這正是因為圖標具備快速直觀傳達信息的能力。 在網頁設計剛剛興起的時代,小圖標就已經被早期的網頁設計師和開發者投入使用了。這些圖案和標識通常是常見的、易於接受的、功能型的圖形(文件夾、列印機、滑鼠、箭頭等),在隨後的20多年間,這些圖標逐漸發展成約定俗成的一套圖形語言。在接下來的設計指南中,我想分享一些網頁設計中圖標使用的技巧,以及一些實用的免費圖標素材合集,希望你能喜歡! 圖標設計樣式 我們通常所說的“圖標設計”其實覆蓋了相當大的一個范圍。小到網頁中那些純色扁平小標識,大到PS和AI精雕細琢的擬物風APP圖標,都在圖標設計的范疇內。每個圖標設計項目都有著不同的設計需求和圖標風格,這些不同造就了圖標設計的差異化。 目前所流行的極簡風和扁平化設計,已經在全世界設計師中擁有了無數的擁簇。而之前一直不溫不火的線性圖標也已經成為了目前iOS系統的首選圖標,其他的移動操作系統也正在逐步跟進。從風格上來說,圖標並無對錯之分,只能說是各自選擇和偏向不一樣罷了。 在我看來,扁平化設計和擬物化設計之間的競爭對比,對於網頁設計而言是一件無比美妙的事情。這也對圖標設計產生了影響,許多藝術領域的概念被引入到圖標設計中來,比如光影變化,深度,等等。作為設計師的你如果更傾向於扁平化設計,那麼你需要學習創建紋理,控制陰影,讓你的設計看起來富有真實感。為此你需要進行大量的練習,但是這絕對是值得的。 企業品牌設計 雖然品牌設計看起來是顯而易見的事情,但是它依然值得一提,因為那些優秀的網站通常有著優秀得令人難以置信的品牌設計。一個優秀的圖標能向用戶傳達出品牌的理念和情感。當你為一個企業或者網站進行品牌設計的時候,品牌的圖標、吉祥物或者符號應該讓品牌和它的用戶之間形成獨特的情感聯系。 當然,你也可以為品牌設計一系列不同的圖標,每個圖標包含不同的效果,傳達不同的理念。圖標設計的可能性是如此之多,你甚至可以設計出以個圖標大合集,讓所有不同的圖標擁有相同的風格。由於每個圖標都是獨特的存在,但是風格又如此一致,當它們運用到網頁中的時候,可以讓整個網頁擁有獨特的氣質,足以從諸多設計中脫穎而出。 MailBakery 就是這樣一個典型的案例,它使用了個大圖來宣傳它們的服務。當游標移動到下方每一個圖標上的時候,上方的大圖內容會被替換成相應的圖片內容,這樣的圖標+圖片的組合在設計上保持著高度的一致性。 這些圖標所對應的圖片可以說是專門為網站定製的,但是這些圖標卻是某個免費圖標集的一部分。你可以在幾十個不同的網站上看到這些相同的圖標,也就是說,這些圖標作為潛在品牌設計的獨特性,已經被忽略掉了,他們其實可以做的更好。 也正是因此,我常常建議有報復的圖標設計師去學習為界面單獨定製成套的圖標集。對培養品牌、客戶以及項目而言,這都是更為長遠更有價值的事情。 導航鏈接 在過去,網頁上的圖標常常用作內容導航,也就是說,圖標的內容和含義,同圖標所指向的頁面內容/性質高度相關或者一致。今天,Facebook上的導航也遵循著同樣的原則。 雖然你不會一直遵循這樣的設計方式,但是有必要且值得了解它。下拉菜單鏈接通常非常實用,因為用戶會主動去了解每一個菜單的名稱。但是如果在橫向或者縱向上有十幾個導航鏈接的話,通過圖標來識別是比較可靠的方案。 視覺內容識別 在網頁設計中使用業內圖標最主要的原因是用來區分內容。圖標可以從視覺上更清晰地傳達信息,能夠平衡包含大量文本的布局,所以,如何通過一個簡單的圖標來准確傳達信息是設計師的必修課。 我最喜歡的案例就是GitHub的教學頁面。頁頭使用Github的吉祥物和粉筆黑板營造出教育的氛圍,當你向下滾動的時候,每個板塊都有單獨對應的圖標,為你說明這以塊是幹啥的。 值得注意的是,每個圖標都使用的是手繪的效果,雖然色彩不同,但是整體風格高度一致,明顯是統一設計的一整套圖標。更重要的是,每一個圖標都明確直觀地描述了它所在區塊的內容。文字內容足以描述清楚細節,但是圖標能高度概括地闡明信息。 你可以在 Glazed & Infused 的首頁看到類似的設計效果。文字小區塊詳細地描述了他們的服務、咖啡和禮品卡的信息,而頂部的手繪圖標則從視覺上闡明了內容的性質,更重要的是,這三個圖標迅速地抓住了用戶的眼球。 矢量背景 從重復平鋪背景到矢量對象,你可以用矢量圖形做很多事情。對網站背景的處理方式,已經遠不止於平鋪紋理那麼單一了。通過矢量圖形來創建覆蓋整個背景的場景已經很容易了。 矢量圖形可以很輕松地縮放,但是很難創造出逼真的效果。想製作出復雜樣式的矢量圖形並不容易,你需要通過大量的練習來熟悉在圖形上構建圖形的技巧,不過一旦學會還是蠻有趣的。在這里我們推薦一個好用的工具:Bota Iusti。 設計教程 跟蹤學習在線的設計教程是提高圖標設計技能的重要方式。想要精通設計技能沒有捷徑,唯有不斷學習,堅持練習。 雖然圖標設計是一個廣泛的領域,但是許多教程是可以舉一反三的,接下來提供的一系列教程非常實用,希望你能通過學習融入日常的設計中去。 16×16 px Icons Weather Line Icons Flat Social Icon Tab Bar Icons Bat Icon Gem Icons Water Pistol Mail Alert Notebook Almost Flat 免費圖標 40 Flat Icons Mini Icons Colorful Iconset Simple Flat Sport & Fitness Chat & Email Atitel Icons Tab Bar Icons Simple Lines Flatified Web Design Iconset iOS Settings Icon Colorful Switch Synthesizer Book App Icon
㈧ ps切片之後為什麼保存web%格式的時候圖像大小最高307,我要切的是620求大神解答
你不用管它。直接保存就好
如果不行,你需要切片,不會切片自己找
他縮小的尺寸不應該是這么大的!2MB多才是我們要保存的尺寸(所以他顯示2MB多就是沒有縮小你的尺寸,你直接保存即可。)
縮小後的尺寸應該在700kb左右(提示你尺寸在366左右。你取消重新保存,直接保存即可,)
如果還是不行,升級版本,我的是PS2017CC版本
㈨ web前端怎麼讓div大小剛好和圖片一樣大
在前端開發過程中,我們經常會遇到盒子大小跟圖片尺寸不匹配的情況,我們通常會通過以下幾種方式來解決。
1.通過採用裁剪圖片,根據div盒子設置的寬、高,來更改裁剪圖片的尺寸,使圖片適配div盒子。
2.設置div的具體寬高,圖片寬高分別設置為100%,代碼具體如下width:100%;height:100%。這種方式,也可以將圖片大小填充滿盒子。
3.如果圖片是網頁背景圖片,還可以通過設置div盒子內屬性background-size為cover,這種方式也可使圖片充滿盒子。
我們在實際運用中,可以根據不同情況來選擇不同圖片調整方式。