طراحی سایت به طور کلی دارای دو بخش Front-end و Back-end می باشد. در قسمت Front-end سایت آن چیزی که توسط کاربر در مرورگر اینترنتی قابل مشاهده است المان های بصری و طرح بندی بسیار با اهمیت می باشد و نقش مهمی را در کلیک کردن کاربر یا درگیر تعامل شدن وی با سایت را دارد. برای توسعه Front-end می توان از کدنویسی در یک برنامه ویرایشگر ساده سود برد و یا می توانید از امکانات ابزارهای حرفه ایی تر استفاده کنید. در این مقاله از دارکوب می خواهم به معرفی امکانات، قدرت و ضعف فتوشاپ در توسعه وب سایت بپردازم. اگرچه فتوشاپ برای توسعه وب سایت شهرت ندارد و شاید مورد علاقه برخی از طراحان و پاسخ دهنده برخی نیاز های توسعه نباشد با این حال این برنامه قدرتمند از شرکت Adobe قسمت های از کار توسعه Front-end سایت را برای طراحان ساده و سریع تر کرده است.
مقدمه ایی به فتوشاپ
فتوشاپ برای طراحی لوگو و پوستر و ویرایش عکس توسعه داده شد. اما توانایی آن به حوزه توسعه وب سایت نیز ادامه پیدا کرد. و امروز برخی توسعه دهندگان می توانند از فتوشاپ برای توسعه مدل (mock-up) طرح بندی (layout) وب سایت و حتی تولید کد از طراحی استفاده کنند.
شرکت ادوب در واقع برای نظر عموم توجه کرده و سعی نموده تا قدمی در زمینه توسعه وب با کمک ابزار فتوشاپ بردارد. بدین جهت آن ها چندین ابزار را در جهت توسعه وب بهبود داده اند.
شکی نیست که طراح حرفه ایی می تواند با استفاده از یک ویرایشگر متن ساده مانند Notepad یک صفحه وب سایت زیبا را توسعه دهد. اما از سوی دیگر فتوشاپ پر از ابزار ها، ترفند ها و میان بر ها برای توسعه وب است. طبق تجربه فتوشاپ این امکان را فراهم می کند که طراح سایت پیش از مرحله کد نویسی 100% مدل را فراهم کند و امروز ابزاری ضروری از توسعه، طراحی و بهینه سازی وب است.
طراحی سایت بطور مداوم در حال تغییر بوده اما فتوشاپ تا حدی کلاسیک باقی مانده است. طراحان وب سایت از فتوشاپ برای ایجاد پایه UI، گرافیک وب و قاب سیمی و ظاهر دکمه ها استفاده می کنند. همچنین برای بهبود گرافیک، رنگ، تصاویر و ترکیب آن ها به توسعه دهنده وب کمک می کند.
فتوشاپ با امکان ارائه کدهای CSS از تصاویر و طراحی ها، نمونه سازی و غیره می تواند در فرایند طراحی Front-end به کمک توسعه دهنده گان وب سایت بیاید. خیلی کار ها با کد نویسی ممکن است اما در فتوشاپ سرعت و راحتی کار است که به کمک طراح می آید.
چرا فتوشاپ
طراحان وب می توانند از برنامه های مختلفی برای انجام کار استفاده کنند. مثلا برخی از طراحان با استفاده ازAdobe Illustrator (AI) و حتی Adobe InDesign برای نمایش بصری سایت به مشتری و توسعه دهنده گان وب استفاده می کنند.
برای راحت سازی طراحی و انتقال آن به HTML شاید فتوشاپ بهترین باشد و پس از آن Illustrator و InDesign قرار می گیرند. منظور این نیست که InDesign برنامه خوبی نیست. اما این برنامه برای محصولات چاپی توسعه داده شده است و به نظر نمی آید که در توسعه وب سایت نقشی داشته باشد.
من از Illustrator استفاده کردم و سعی نمودم که در امکانات ارائه شده در آن به دنبال چیزی برای راحت کردن کار هایم بیابم، اما کاربرد آن زیاد هم طول نکشید چون این نرم افزار چیزی کم دارد که فتوشاپ آن را دارد. و آن پیکسل است. البته که در Illustrator هم از پیکسل استفاده شده است اما تفاوتی در این دو نرم افزار است. وقتی که یک طراح می خواهد یک Front-end را توسعه دهد از سیستم پیکسل استفاده می کند روشی مرسوم در بین طراحان. اما در Illustrator شما هیچ وقت نمی توانید درک خوبی از پیکسل داشته باشید. شاید عجیب باشد اما با زوم کردن متوجه تفاوت فتوشاپ و Illustrator خواهید شد. در فتوشاپ در هر حالتی مقیاس و پیکسل مشخص هستند. اما در استفاده از Illustrator با استفاده از “one pixel rule” شما حس می کنید بجای یک پیکسل دو پیکسل دارید. در مجموع وقتی در این دو نرم افزار دقیق می شوید متوجه تفاوت آن ها در مدیریت پیکسل خواهید شد.
با استفاده از Smart Object و قرار دادن Element ها در یک طراحی Global بسیاری از طراحان هدر ها، footer ها و سایر اجزا را جدا از هم نگه می دارند. اگر یک مشتری بخواهد که تغییری در یکی از این قسمت ها بدهد آن وقت شما باید آن را فقط در یک قسمت اعمال کنید. این یکی از خصوصیات عالی فتوشاپ در طراحی است.
فتوشاپ کار را در جهت دیگر نیز بسیار راحت کرده است. با اینکه CSS طراحی را آسان کرده است اما با این حال شما برای خطوط مورب و بعد دادن به تصویر با کمک فتوشاپ بسیار راحت تر هستید. و اینجاست که باز استفاده از مقیاس پیکسل به شما در طراحی و محاسبه و ابعاد یک طرح بندی HTML به کمک شما می آید و یک انتقال آسان به HTML را فراهم می کند.
راحتی تنظیم رزولوشن
وقتی شما با ابزارهای طراحی تمپلیت های حرفه ایی وب سایت کار می کنید، بسیار مهم است که یک طراحی دقیق داشته باشید. فتوشاپ ابزاری است که به شما انواع مقیاس های مختلف را با استفاده از سیستم برداری ارائه می دهد. این به شما کمک که می کند تصویری از نمایشگر ها با سایز و کیفیت های متفاوت داشته باشید. از همه مهم تر این است که این ابزار برای شما امکان طراحی واکنش گرا یا Responsive را ممکن می سازد.
فرمت های مختلف
فتوشاپ در بهینه سازی تصاویر در فرمت های مختلف به شما کمک می کند. این ابزار از فرمت های SVG، PNG، GIF و JPG و غیره پشتیبانی می کند. این برنامه همچنین برای ذخیره کردن به فرمت های مختلف دارای خروجی های متنوع پیش فرض نیز می باشد.
تنوع فونت
فونت در ایجاد جذابیت محتوا و خوانایی آن بسیار کارا است. این ابزار شگفت انگیز دارای یک کتابخانه از آیکون ها و فونت است که واقعا در طراحی محتوا کمک می کند. پس شما مجبور نیستید که نگران سایز و حالت فونت ها و محو
...
