זה כבר באמת תלוי בך.
קודם כל חשוב שתדע - אם אתה לא מעצב, אין ממש טעם שתשתמש בפוטושופ. אתרים פשוטים אפשר ליישם ישר ב-HTML ו-CSS בלי לחתוך עיצובים בפוטושופ.
אתה יכול, אם אתה רוצה, להכין קודם כל את העיצוב ורק אחר כך לעבוד על האתר, אבל באותה מידה אתה יכול להכין תבנית HTML "גנרית" ולעצב אותה ב-CSS רק אחרי שכל התכנים כבר הוכנסו.
לגבי "הכנסת" העיצוב לאתר, יש לך בגדול שתי אפשרויות:
1. להשתמש בכלי החיתוך המובנה בפוטושופ, להגדיר את כל האיזורים באתר, ואחר כך לשמור את התוצאה כאתר. האפשרות הזאת די בעייתית, כי היא יוצרת קוד מאוד מסובך ולא קריא (מה שגם יקשה על קידום האתר במנועי החיפוש).
2. להסתכל על העיצוב ולהבין איך החלקים שלו מתחברים, ואז לחלק את האיזורים לתגי HTML. לאחר מכן מסתכלים שוב בעיצוב ובודקים את כל הצבעים, הגרדיאנטים והאפקטים המיוחדים ומחליטים איך ליישם אותם באתר. יהיה די טיפשי, למשל, ליישם צבע רקע סטטי עם תמונת רקע ענקית. בחירה טובה יותר תהיה שימוש במאפיין צבע הרקע ב-CSS. גרדיאנט, לעומת זאת, יצריך תמונת רקע - זה פשוט מסורבל מדי "לחולל" אותו דינאמית עם CSS. האפשרות הזאת מן הסתם יותר מסובכת, אבל יוצרת קוד הרבה יותר קריא ופשוט.
אם לא הבנת חלק ממה שאמרתי, אל תדאג. תלמד HTML ו-CSS, ואתה תראה שזה כבר יבוא לבד