طراحی سایت با فتوشاپ – طراحی قالب وبسایت با فتوشاپ

طراحی سایت با فتوشاپ ، طراحی سایت به طور کلی دارای دو بخش Front-end و Back-end می باشد. در قسمت Front-end سایت آن چیزی که توسط کاربر در مرورگر اینترنتی قابل مشاهده است المان های بصری و طرح بندی بسیار با اهمیت می باشد و نقش مهمی را در کلیک کردن کاربر یا درگیر تعامل شدن وی با سایت را دارد.

برای توسعه Front-end می توان از کد نویسی در یک برنامه ویرایشگر ساده سود برد و یا می توانید از امکانات ابزارهای حرفه ایی تر استفاده کنید. در این مقاله از ساخت سایت می خواهیم به معرفی امکانات، قدرت و ضعف فتوشاپ در توسعه وب سایت بپردازیم.

اگرچه فتوشاپ برای توسعه وب سایت شهرت ندارد و شاید مورد علاقه برخی از طراحان و پاسخ دهنده برخی نیاز های توسعه نباشد با این حال این برنامه قدرتمند از شرکت Adobe قسمت های از کار توسعه Front-end سایت را برای طراحان ساده و سریع تر کرده است.

چرا طراحی سایت با فتوشاپ

طراحان وب می توانند از برنامه های مختلفی برای انجام کار استفاده کنند. مثلا برخی از طراحان با استفاده ازAdobe Illustrator (AI) و حتی Adobe InDesign برای نمایش بصری سایت به مشتری و توسعه دهنده گان وب استفاده می کنند.

برای راحت سازی طراحی وبسایت با فتوشاپ و انتقال آن به HTML شاید فتوشاپ بهترین باشد و پس از آن Illustrator و InDesign قرار می گیرند. منظور این نیست که InDesign برنامه خوبی نیست. اما این برنامه برای محصولات چاپی توسعه داده شده است و به نظر نمی آید که در توسعه وب سایت نقشی داشته باشد.

من از Illustrator استفاده کردم و سعی نمودم که در امکانات ارائه شده در آن به دنبال چیزی برای راحت کردن کار هایم بیابم، اما کاربرد آن زیاد هم طول نکشید چون این نرم افزار چیزی کم دارد که فتوشاپ آن را دارد. و آن پیکسل است. البته که در Illustrator هم از پیکسل استفاده شده است اما تفاوتی در این دو نرم افزار است.

وقتی که یک طراح می خواهد یک Front-end را توسعه دهد از سیستم پیکسل استفاده می کند روشی مرسوم در بین طراحان. اما در Illustrator شما هیچ وقت نمی توانید درک خوبی از پیکسل داشته باشید. شاید عجیب باشد اما با زوم کردن متوجه تفاوت فتوشاپ و Illustrator خواهید شد. در فتوشاپ در هر حالتی مقیاس و پیکسل مشخص هستند.

اما در استفاده از ادوبی ایلاستریتر با استفاده از “one pixel rule” شما حس می کنید بجای یک پیکسل دو پیکسل دارید. در مجموع وقتی در این دو نرم افزار دقیق می شوید متوجه تفاوت آن ها در مدیریت پیکسل خواهید شد.

راحتی تنظیم رزولوشن

وقتی شما با ابزارهای طراحی تمپلیت های حرفه ایی وب سایت کار می کنید، بسیار مهم است که یک طراحی دقیق داشته باشید. فتوشاپ ابزاری است که به شما انواع مقیاس های مختلف را با استفاده از سیستم برداری ارائه می دهد. این به شما کمک که می کند تصویری از نمایشگر ها با سایز و کیفیت های متفاوت داشته باشید. از همه مهم تر این است که این ابزار برای شما امکان طراحی واکنش گرا یا Responsive را ممکن می سازد.

فرمت های مختلف

فتوشاپ در بهینه سازی تصاویر در فرمت های مختلف به شما کمک می کند. این ابزار از فرمت های SVG، PNG، GIF و JPG و غیره پشتیبانی می کند. این برنامه همچنین برای ذخیره کردن به فرمت های مختلف دارای خروجی های متنوع پیش فرض نیز می باشد.

تنوع فونت

فونت در ایجاد جذابیت محتوا و خوانایی آن بسیار کارا است. این ابزار شگفت انگیز دارای یک کتابخانه از آیکون ها و فونت است که واقعا در طراحی محتوا کمک می کند. پس شما مجبور نیستید که نگران سایز و حالت فونت ها و محو بودن آن ها باشید.

آسانی استفاده از Pixel Perfection

طراحی شبکه Grid هنوز هم در این روز ها بسیار پر طرفدار است شاید که انجام تغییر و ویژه سازی را برای طراح آسان تر کرده است. فتوشاپ نیز دارای یک امکان خلاقانه برای شبکه روان یا Fluid است که طراح را در جهت مطابق سازی و تغییر در این سیستم یاری می دهد.

این ویژگی برای شما فضاهای رنگی و واحد های پیکسلی، طراحی هایی با سایز ها و تنظیمات مختلف با کمک متد های Aligning New Objects to Pixel Grid ایجاد می کند.

مناسب برای طراحی Responsive و Wireframe

فتوشاپ برای طراحی کانسپت، طرح ساده Wireframe، المان های صفحه و آیکون ها بسیار مناسب است. و وقتی این طراحی با pixel-perfection انجام می شود طراحی رسپانسیو نیز ممکن می گردد. این کار باعث می شود که این ابزار نسبت به سایر ابزارهای موجود در بازار متنوع و با قدرت باشد. پیشرفت در این ابزار در طول زمان باعث شد که اولویت اول در انتخاب ها باشد.

کار راحت تر با Raster

هر زمان که شما در حال طراحی وب سایت هستید، Vector فتوشاپ واقعا به دلیل قابلیت انطباق آن بسیار عالی عمل می کند.

اما فقط تصاویر Vector کافی نیست، گاهی اوقات شما همچنین نیاز به تصاویر Raster Images در قالب طراحی حرفه ای وب سایت خود دارید که در ویرایش، ساخت فایل های PSD، پشتیبانی از ترکیب لایه ها و غیره کمک می کند. این محتوا را می توان به راحتی برای استفاده در وب بهینه سازی کرد.

مشابه همین، Retina Image نیز این روزها بسیار متداول هستند که به معنی چندین نسخه از هر تصویر، از تراکم دو برابر پیکسل است. که این امر می تواند به راحتی توسط Adobe Photoshop به راحتی حاصل شود.

صرفه جویی در زمان

فتوشاپ همچنین ابزارهای زیادی برای طراحی وب در اختیار شما قرار می دهد که در زمان شما بسیار صرفه جویی می شود. برخی از این امکانات عبارتند از fonts, graphic styles, global swatches, live shapes, dynamic buttons.

این امکانات به شما کمک می کنند که از تصاویر و کارهای هنری داینامیک چندین بار (در یک یا چند صفحه) استفاده کنید و در ضمن یکپارچگی کار را نیز حفظ نمایید. مثلا اگر از امکان 9-Slice Scaling استفاده نمایید و کار یا تصویر شما به 9 قسمت مختلف تقسیم شود، شما می توانید مقیاس و یا شبکه (Grid) را به صورت لایه و مستقل پیاده سازی نمایید.

متن و تصاویر اختصاصی

فتوشاپ با امکانات متنوع اش بهترین ابزار برای حفظ یکپارچگی کار شماست. این ابزار برای کار با متن دارای امکانات متفاوت و فراوانی برای حالات پاراگراف و کاراکتر ها در تصاویر گرافیکی می باشد. شما می توانید قسمت های مختلف طراحی سایت با فتوشاپ خود را خیلی سریع و راحت بدون آنکه نیز به ابزار دیگری داشته باشید انجام دهید.

اشکال زنده

فتوشاپ به شما امکان ایجاد و ویرایش تصاویر را به گونه ایی می دهد تا حس زنده بودن را ایجاد کند. یکی از این ویژگی های اشکال زنده لبه های گرد تصاویر است. شما می توانید این امکانات را برای یک تصویر و یا قالب کلی صفحه به کار برید. همچنین در Transform panel می توانید ویرایش های بیشتری را بر روی این ویژگی (Live Shape) انجام دهید.

Global Swatches

امکان دیگری که به شما در صرفه جویی در زمان کمک می کند استفاده از Global Swatches برای یک طراحی فوق العاده است. مثلا اگر شما رنگی را در فتوشاپ برای وب سایت ذخیره کنید شما می توانید از آن با این امکان در جای دیگر بهره ببرید. حتی شما می توانید با یک سوئیچ یک رنگ خاص را در سراسر طراحی تغییر دهید.

امکان یکپارچه سازی فریم ورک ها

یکپارچه سازی فریم ورک ها یعنی کار کردن با پلتفرم های مختلف می بایست یک امکان سهل در طراحی شما باشد، مانند سیستم شبکه در طراحی. اگر شما طراحی سایت را در یک سیستم بزرگ تر انجام می دهید مثلا بوت استرپ توییتر، شما می توانید ابزار ها و کامپوننت ها را به صورت اشتراکی در طراحی مورد استفاده قرار دهید.

امکان نمونه سازی تعاملی

اگر از فتوشاپ به عنوان ابزار اصلی برای طراحی فرم و قالب وب سایت استفاده می کنید شاید بد نباشد که به آن چند امکان تعاملی اولیه اضافه نمایید. شما با این کار می توانید تجربه کاربری UX های مختلف را بیازمایید و بدون نوشتن حتی یک خط کد این کار را انجام دهید. فتوشاپ دارای امکانات فراوانی برای Prototype سازی است. این امکانات به شما در طراحی Responsive، موبایل و فانکشن های مختلف کمک می کند.

آسانی استخراج کردن CSS

این امکان بسیار جذابی برای طراحی وب سایت است. شما با فتوشاپ می توانید کد های CSS را از تصاویر، متن و محتوا استخراج کرده و برای کد نویسی به یک ویرایشگر کد ببرید. این امکان برای توسعه دهنده گان Front-end در وب سایت بسیار با ارزش است. همچنین در کنار استخراج کد این برنامه به شما این امکان را می دهد که قسمت های مختلف طراحی وب سایت خود را که در فتوشاپ انجام شده را به صورت فایل های تصویری PNG نیز ذخیره و استفاده نمایید.

پلاگین های طراحی سایت با فتوشاپ

فتوشاپ خود دارای امکانات زیادی برای طراحی سایت است. با این حال مانند هر برنامه و تکنولوژی توسعه، دارای پلاگین ها و افزونه هایی است که با کمک آن می تواند یک یا چند کار طراحی خاص را راحت تر، سریع تر و یا با کیفیت تر انجام داد. در ادامه چند پلاگین رایگان که به شما در طراحی وب در فتوشاپ کمک می کند را معرفی می کنم. توجه داشته باشید بیشتر مقایسه های نرم افزار ها بدون در نظر گرفتن پلاگین ها انجام شده است. بنابراین اگر در برنامه ضعفی یافت کردید به سراغ پلاگینی بگردید که در آن سعی شده تا مشکل و محدودیت آن نرم افزار را حل کند.

HTML BLOCK

برخی می گویند که طراحی سایت و فتوشاپ زیاد با هم رابطه خوبی ندارند. اما این حرف درست نیست. اگر شما HTML BLOCK را برای فتوشاپ نصب نمایید این افزونه از موتور WebKit برای رندر HTML و CSS بطور ویژه ایی استفاده می کند. این پلاگین برای استفاده از فونت ها و داشتن یک دید زنده بلافاصله به صفحه وب به شما کمک می کند.

PAGE LAYERS

اگر شما طراحی در مرورگر اینترنتی را دوست دارید اما یک فایل فتوشاپ از کار خود می خواهید پس PAGE LAYERS را امتحان کنید. این افزونه می تواند که یک صفحه وب را به فایل فتوشاپ تبدیل نماید و به شما لایه های و المان های جداگانه نامگذاری شده را ارائه دهد. همچین این ابزار می تواند در طراحی دوباره یا بهبود طراحی موجود به شما کمک کند. این افزونه حتی نسخه ایی برای مک دارد که البته باید آن را خریداری کنید.

BJANGO ACTIONS

BJANGO ACTIONS یک افزونه متن باز است که حاوی اکشن ها و اسکریپ های آماده برای پروژه وب شما می باشد. علاوه بر این می تواند به شما برای موقعیت طرح در صفحه و قطعه بندی به طور موثرتری به شما کمک کند.

DITTO

این پلاگین طراحی سایت با فتوشاپ به شما این امکان را می دهد که از متغییر های برای المان های طراحی مانند رنگ، رشته های متنی، سایز ها و موقعیت ها و حتی وضوح استفاده نمایید. البته برای همه اجباری نیست که فایل PSD را ویرایش کنند ولی با این حال امن ترین روش است.

RENAMY

اگر شما چندین لایه در طراحی خود دارید اما نمی خواهید که آن را به طور دستی ویرایش کنید پس بهتر است که این پلاگین را نصب نمایید. این پلاگین طراحی سایت با فتوشاپ به شما اجازه می دهد که چندین لایه را انتخاب و نام آن ها را تغییر دهید آن هم فقط با یک کلیک. البته این پلاگین در ورژن رایگان دارای محدودیت پنج آیتم به طور همزمان است که در نسخه اصلی محدودیتی از این بابت وجود ندارد.

DUPLLLICATOR

این پلاگین طراحی سایت با فتوشاپ بهترین دوست شما در دسته بندی و قفل کردن لایه های طراحی است. شما تنها باید لایه ها و کپی ها را انتخاب کرده و فضای خالی را مشخص کنید. این پلاگین از ورژن Photoshop CC 2014 به بعد قابل استفاده است.

MAGIC WAND TRICKS

این پلاگین طراحی سایت با فتوشاپ که در اصل اضافه ایی به ابزار Magic Wand در درون فتوشاپ است، به شما امکانات بیشتری از حالت معمول می دهد. آیا می دانستید که این ابزار در ایجاد برش ها عالی است؟ همچنین می توانید لایه ها و گروه ها را به سرعت در مرکز قرار دهید و در کنار پنل هیستوگرام، حتی می توانید شمارش تعداد پیکسل ها را در انتخاب داشته باشید.