適應網頁的Photoshop佈局

我有一個photoshop模板，我想要轉換成一個網站。我已經調整了容器的寬度，字體大小和內容，但問題在於html頁面看起來不像photoshop模板，特別是在文本對齊方面。是否有一些CSS規則可以遵循Web佈局（文本流）看起來與photoshop模板相同？適應網頁的Photoshop佈局

2011-07-27 Fuxi

請記住，您「適應」並不總是「轉換」。有些東西，比如固定的高度和寬度，在網絡上並不實用，就像在Photoshop中交互性不實用一樣。祝你好運！ :) – willoller

是的，說得好。 – Joonas

下面是不同的東西相當不錯的列表，你可以利用CSS的文本

自定義字體是一件棘手的事情，但在文本外觀的因素/ 流。我想說的是，如果你有時間，或者如果你真的需要......使用它們，否則標準字體是一件好事。

文字斷字是一個因素，但還挺屬於同一類別的自定義字體..如果你有時間或者如果你真的需要......那就去做吧。（jQuery插件的是在那裏）

如果youre與設計師的工作，我會說，你應該討論的自定義字體部分和斷字部分與設計師（或者可能是客戶端，以及如果他已經看到佈局主張或者他是否堅持一些關於文本流的東西），然後去尋找間距和縮進，線條高度等等或者任何適合你的順序。

如果它的工作的事情..它可能不是.. idk。

我還喜歡什麼Willoller說，但是我的繼承人版吧：

的確是這樣，它不總是寫在石頭上，你將不得不就像他們被賦予複製所有內容100％你在一個佈局圖像。

這是由於幾件事情：有時設計師可能不會考慮關於文本平面和平面的事情。我的意思是一般。就像，他們只是放置文字，以顯示文字來到這裏，而不會考慮太多的大小或顏色，或它有連字符或它有陰影..或其他的東西。

有時，設計師可能甚至不知道有一些限制或事情或多或少難以進入互聯網。（自定義字體，連字符，文字陰影，也許是我忘了的東西）

另外，有些東西在Web瀏覽器中看起來不一樣（並且在所有瀏覽器中都一樣），例如它可能在您的佈局圖像中像Anti-aliasing一樣，當你使用photoshop進行佈局時，這與文本非常相似，並且使文本看起來更柔和。

使它成爲你對文本的解釋，不會爲小細節和更大的細節通常可以談判而流汗。

編輯：此外，我想指出的是，它並不一定是好事去瘋搶所有的文字，因爲它是在設計中。

可讀性是很重要的因素，有時設計師考慮一下，有時不（有時他們真的不注重文字都像我前面提到的。）

有網站，他們使用超spacy線的高度和/或者大號字母間隔，我很感謝你和再見。

編輯2：以前寫在凌晨4點左右。必須清理一下。

2011-07-28 00:04:03 Joonas

在不同的操作系統和瀏覽器中，文本的各種屬性看起來會有所不同 - 這是要記住的一件事。也就是說，可以使用「字母間距」（http://www.htmlref.com/reference/appb/css_letter-spacing.htm）和「字間距」（http://www.htmlref.com/reference/appb/css_word-spacing.htm）來獲得一些控制權。請謹慎使用「text-align：justify」（http://www.htmlref.com/reference/appb/css_text-align.htm）。實際上，請謹慎使用所有這些內容 - 查看清除關閉的Windows的外觀，您可能會感到震驚。

我傾向於讓瀏覽器做他們的事情，而不是過度地用文本控制，但這取決於您需要多少瀏覽器支持。

2011-07-27 23:54:49

這是一個真正的手動過程。文本在設計中永遠不會與瀏覽器完全相同。你只需要看看設計和瀏覽器，並調整值以儘可能地接近它們。

2011-10-12 14:09:39 Adamantus

我傾向於使用.psd文件作爲寬鬆的模板，而不是將它們翻譯成HTML和CSS時的完全適合。在確切的字體匹配上掛起很容易（並且通常選擇字體配對是出於某種原因）。但是，站點呈現的更好，可讀性更強，易於使用，這與查看.psd完全相同，並且在每個瀏覽器中完全相同。

這可能意味着該網站在Chrome瀏覽器中的效果與在Firefox或Opera中的效果略有不同（並且忘記了IE6），並且它們都不會與.psd完全相同。只要精心設計，優雅地降低價值併爲遊客提供價值，細微差別就不那麼重要。

2012-11-09 19:34:06 illbzo1

回答