Önce PS'de yapıyorsun aynı tasarımı sonra üst kısmı başlık arkaplanı dahil kesiyorsun resmi ve mesela ornek .divUst gibi div acıp arkaplana kestiğin resmi atıyorsun.

Sonra tam ortadan 1px uzunluğunda soldan sağa arkaplan kesip onu da misal .divOrta gibi bir div acıp arkaplan yapıyorsun.

En alt kısım için de o yuvarlanmış köşeleri de bir kaç pixel uzunluğunda soldan sağa kesiyorsun .divAlt diye div açıp arkaplan yaparsın.

İçerik kısmına yani orta dive gelip içinde yeni divler oluşturacaksın (küçük kare işte). Gerisi süslemeye kalıyor font özellikleri, icon vs.

Bunları yaparken float, width, height, margin vs. kullanman gerekecek kullanacağını varsayıyorum