تبدیل طرح گرافیکی به صفحه وب

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

پس با ما همراه شوید تا این ویژگی جدید را یاد بگیریم:

1ـ نصب آخرین نسخه فتوشاپ: برای شروع کار باید آخرین نسخه نرم‌افزار ادوب فتوشاپ را که با نام CC نامگذاری شده، دریافت کنید. البته می‌توانید با دریافت به روزرسانی نسخه CS6 نیز این ویژگی را به فتوشاپ خود اضافه کنید.

2ـ ایجاد یک سند جدید: فرم دوم ایجاد یک سند جدید است که این کار از گزینه New در منوی فایل یا فشار همزمان دکمه‌های Ctrl+N از صفحه کلید و تعریف پارامترهای مورد نیاز در پنجره New انجام می‌پذیرد. در این پنجره کافی است ابعاد سند خود را براساس واحد پیکسل برای عرض Width و ارتفاع height سند خود تعریف و رزولوشن 72 را برای آن انتخاب کنیم. دقت کنید حتما ابعاد بر حسب پیکسل و مقدار رزولوشن 72 تعریف شود تا حجم سند بیهوده زیاد نشود.

3ـ لایه‌بندی طرح: برای دسترسی به بهترین کدهای CSS بهتر است ابتدا براساس طرح کلی قالب خود، به تعداد بخش‌های مجزای قالب لایه‌هایی در فتوشاپ ایجاد کنیم. برای این منظور با مراجعه به پانل Layers و کلیک روی علامت Create New Layer (دومین آیکون از سمت راست و پایین) لایه جدید خود را ایجاد می‌کنیم. دقت کنید هنگام ایجاد کدهای CSSبرای هر لایه مجزا، یک کد CSS ایجاد می‌شود و جداسازی اجزای سایت در لایه‌های مجزا کمک شایانی به خوانایی کد‌های CSS خواهد کرد. در این کارگاه برای سهولت یادگیری فقط یک لایه ایجاد کرده و آن را تبدیل به صفحه وب می‌کنیم.

4ـ ایجاد لایه‌برداری: در طراحی صفحات وب هرچه از اجزای برداری بیشتر استفاده کنیم صرفه‌جویی بیشتری در اندازه فایل نهایی کرده‌ایم که در نتیجه سرعت بارگذاری بیشتری خواهیم داشت؛ زیرا تقریبا به وسیله کدهای css می‌توانیم تمامی اشکال و طرح‌های برداری را ایجاد کنیم. پس برای شروع کار ابتدا با راست کلیک روی ابزارRectangle دومین گزینه (Round Rectangle) را انتخاب کنیم.

پس از انتخاب حالت Shape در نوار تنظیمات، در داخل فضای کاری فتوشاپ دابل کلیک کرده و در پنجره ظاهر شده برای عرض (Width) مقدار 130و برای ارتفاع (height) مقدار 230 پیکسل را وارد می‌کنیم. در قسمت پایین نیز می‌توانیم مقدار گردی لبه‌های شکل را تعیین کنیم. برای ایجاد یک کادر مستطیلی با یک گوشه گرد در بالا و یک گوشه گرد در پایین به ترتیب مقداری 0 و 20 را برای قسمت بالا و 20 و 0 را برای قسمت پایین وارد کرده و دکمه تائید را فشار می‌دهیم. نام لایه ایجاد شده را نیز با دابل کلیک روی نام آن در پانل لایه‌ها به Vector تغییر دهید.

5ـ ایجاد جلوه‌های ویژه: در صورتی که تنظیمات فتوشاپ شما در حالت پیش‌فرض باشد باید در این مرحله شکلی شبیه شکل زیر دیده شود. برای این‌که جذابیت بیشتری در شکل خود اعمال کنیم، تغییرات زیر را روی آن انجام می‌دهیم.

6ـ تغییر رنگ شکل: برای تغییر رنگ شکل روی گزینه Fill در نوار تنظیمات کلیک کرده و رنگ دلخواه خود را انتخاب کنید.

7ـ اعمال کادر به شکل: برای اعمال حاشیه یا کادر با حالت دلخواه به شکل خود روی گزینه Stroke کلیک کرده و رنگ دلخواهی را برای حاشیه شکل خود انتخاب کنید. توجه داشته باشید در این مرحله می‌توانید از قسمت Stroke Option حالت حاشیه را به خط‌چین یا نقطه‌چین تبدیل کرده و از بخش کناری آن اندازه دلخواهی را برای آن در نظر بگیرید. در این تمرین ما حالت نقطه‌چین و اندازه 3 را با رنگ قهوه‌ای برای شکل انتخاب کرده‌ایم.

8ـ اعمال سایه: در این مرحله برای افزایش زیبایی شکل ایجاد شده می‌خواهیم سایه‌ای نیز به آن اضافه کنیم. به این منظور در پانل لایه‌های روی آیکون Fx کلیک کرده و از منوی باز شده آخرین گزینه یعنی Drop Shadow را انتخاب کرده و تنظیمات پیش فرض آن را تائید کنید تا سایه‌ای همانند شکل زیر روی شکل ما اعمال شود. می‌توانید در این مرحله از دیگر جلوه‌های موجود نیز برحسب نیاز در شکل خود استفاده کنید.

9ـ ایجاد فایل CSS: آخرین مرحله پس از تائید شکل ایجاد شده مراجعه به منوی Layer و انتخاب گزینه copy CSS است تا شکل برداری ایجاد شده تبدیل به کدهای CSS شده و در حافظه موقت ویندوز ذخیره شود.

حال کار با فتوشاپ به پایان رسیده و در ادامه باید از این کدها در ایجاد صفحه وب خود استفاده کنیم.

10ـ ایجاد فایل HTML: در این مرحله لازم است تا حدودی با مبانی طراحی وب و Html آشنا باشید. با استفاده از نرم افزارهای طراحی وب مثل Adobe DreamWeaver یک صفحه Html جدید باز کنید در صورتی که این نرم‌افزار را ندارید کافی است نرم‌افزار Notepad ویندوز خود را از مسیر All Program|Accessories اجرا و کدهای زیر را در آن تایپ کنید:

11ـ اضافه کردن کد‌های CSS: حال با یک کلیک راست بین دو عبارت «Style» و «‌/‌Style» گزینه Paste را انتخاب کنید تا محتویات کلیپ بورد به آنجا منتقل شود. مشاهده می‌کنید عبارتی با نام لایه ایجاد شده شما در فتوشاپ (vector) در ابتدا ظاهر و در ادامه پارامترهای مربوط به آن داخل گیومه ذکر شده است:

12ـ فراخوانی کد CSS: برای فراخوانی کد CSS خود زیر عبارت Body کلیک و کد زیر را تایپ کنید. دقت داشته باشید نام ذکر شده در این کد (vector) دقیقا همان نام ذکر شده ابتدای کد بالا است:

13ـ ذخیره‌سازی و اجرا: در انتها با زدن دکمه Ctrl+S از صفحه کلید پنجره Save As را باز کرده و نام دلخواهی برای طرح خود تعریف کنید و در انتهایHtml نوشته و دکمه Save را فشار دهید تا فایل به صورت Html ذخیره شود. پس از بستن Notepad در مسیر ذخیره شده فایل روی آن کلیک کنید تا با یکی از مرورگرهای رایانه خود (مثل Internet Explorer) آن را ببینید.

نوید حاتمی