طراحی سایت به طور کلی دارای دو بخش Front-end و Back-end می باشد. در قسمت Front-end سایت آن چیزی که توسط کاربر در مرورگر اینترنتی قابل مشاهده است المان های بصری و طرح بندی بسیار با اهمیت می باشد و نقش مهمی را در کلیک کردن کاربر یا درگیر تعامل شدن وی با سایت را دارد. برای توسعه Front-end می توان از کدنویسی در یک برنامه ویرایشگر ساده سود برد و یا می توانید از امکانات ابزارهای حرفه ایی تر استفاده کنید. در این مقاله از دارکوب می خواهم به معرفی امکانات، قدرت و ضعف فتوشاپ در توسعه وب سایت بپردازم. اگرچه فتوشاپ برای توسعه وب سایت شهرت ندارد و شاید مورد علاقه برخی از طراحان و پاسخ دهنده برخی نیاز های توسعه نباشد با این حال این برنامه قدرتمند از شرکت Adobe قسمت های از کار توسعه Front-end سایت را برای طراحان ساده و سریع تر کرده است.
فتوشاپ برای طراحی لوگو و پوستر و ویرایش عکس توسعه داده شد. اما توانایی آن به حوزه توسعه وب سایت نیز ادامه پیدا کرد. و امروز برخی توسعه دهندگان می توانند از فتوشاپ برای توسعه مدل (mock-up) طرح بندی (layout) وب سایت و حتی تولید کد از طراحی استفاده کنند. شرکت ادوب در واقع برای نظر عموم توجه کرده و سعی نموده تا قدمی در زمینه توسعه وب با کمک ابزار فتوشاپ بردارد. بدین جهت آن ها چندین ابزار را در جهت توسعه وب بهبود داده اند. شکی نیست که طراح حرفه ایی می تواند با استفاده از یک ویرایشگر متن ساده مانند Notepad یک صفحه وب سایت زیبا را توسعه دهد. اما از سوی دیگر فتوشاپ پر از ابزار ها، ترفند ها و میان بر ها برای توسعه وب است.
طبق تجربه فتوشاپ این امکان را فراهم می کند که طراح سایت پیش از مرحله کد نویسی ۱۰۰% مدل را فراهم کند و امروز ابزاری ضروری از توسعه، طراحی و بهینه سازی وب است. طراحی سایت بطور مداوم در حال تغییر بوده اما فتوشاپ تا حدی کلاسیک باقی مانده است. طراحان وب سایت از فتوشاپ برای ایجاد پایه UI، گرافیک وب و قاب سیمی و ظاهر دکمه ها استفاده می کنند. همچنین برای بهبود گرافیک، رنگ، تصاویر و ترکیب آن ها به توسعه دهنده وب کمک می کند. فتوشاپ با امکان ارائه کدهای CSS از تصاویر و طراحی ها، نمونه سازی و غیره می تواند در فرایند طراحی Front-end به کمک توسعه دهنده گان وب سایت بیاید. خیلی کار ها با کد نویسی ممکن است اما در فتوشاپ سرعت و راحتی کار است که به کمک طراح می آید.