باسلام خدمت کاربران عزیز وبسایت وب طراحان! امروز در این پست قصد داریم شمارا با نحوه تبدیل فایل های Psd به Html آشنا کنیم، همانطور که میدانید نرم افزار Photoshop یکی از محبوب ترین نرم افزار های گرافیکی دنیا است و امکانات بسیار بالایی نسبت به نرم افزار های مشابه را دارد. که یکی از این امکانات جالب توانایی تبدیل فایل Psd به Html است!

بله درست فهمیدید! نرم افزار Photoshop یک نرم افزار بسیار هوشمند است که قابلیت این را دارد دستورات  Css و Html را در کثری از ثانیه متناسب با قالب طراحی شده شما بنویسد! ;اگر شماهم میخواهید از این راز نهفته در Photoshop باخبر شوید باما همراه باشید.

توجه: درحال حاضر این روش برای تبدیل فایل های  Psd به Html تقریبا منسوخ شده است! اما همچنان میتوان از این روش برای طراحی صفحات ایستا یا استاتیک استفاده کرد.

برای تبدیل فایل های Psd به Html در نرم افزار Photoshop باید دو مرحله را طی کنیم تا بتوانیم بهترین خروجی را بگیریم.

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

1

استفاده از این ابزار به این صورت است که شما مانند ابزار Select قسمت های مورد نظر خود را Select  میکنید، مانند مثال زیر:

2

با انجام این عمل نرم افزار قسمت های انتخواب شده را از سایر قسمت ها جدا میکند و تغیر بخش های مورد نظر آسان تر میشود.

ایجاد لینک:

برای ایجاد لینک ها به صفحات دیگر فقط کافیست مانند مثال قبلی محلی که قرار است به عنوان لینک شناخته شود را Select کنیم با این تفاوت که بعد از Select کردن بر روی محل Select شده راست کلیک میکنیم و گزینه Edit Slice Options… را انتخواب میکنیم.

3

 

با انتخواب این گزینه پنجره زیر باز میشود، که ما قسمت های مهم آن را برای شما شرح میدهیم.

4

۱-با استفاده از این قسمت میتوان نوع لینک ایجاد شده را مشخص کرد. (به دو صورت عکس، و یا بدون عکس)

۲-با تغیر این قسمت میتوانید نام دلخواه خود را بر روی لینک مورد نظر بگذارید.

۳-این قسمت مهم ترین بخش پنجره Slice Options میباشد در این قسمت باید آدرس صفحه ای را که قرار است با کلیک بر روی لینک مورد نظر نمایش داده شود را وارد کنید.

۴-با استفاده از این قسمت میتوانید نوع نمایش صفحه مورد نظر خود را در مروگر مشخص کنید برای مثال با نوشتن دستور _blank  یک تب جدید در مرورگر برای نمایش صفحه بعدی ایجاد میشود.

۵-با استفاده از این قسمت میتوانید متنی را که هنگام مستقر شدن نشانگر موس بر روی لینک،زیر نشانگر موس نمایش داده میشود را تغیر دهید.

۶-در بخش Dimensions میتوانید محل استقرار لینک و سایز آنرا به صورت دستی و دقیق عوض کنید.

۷-در این قسمت میتوانید رنگ بک گراند محل Slice شده را تغیر دهید.

حال با شما میتوانید با آگاهی کامل اطلاعات مورد نظر خود را وارد لیست کنید. برای ثبت شدن تغیرات وارد شده کلید Ok را انتخواب کنید.

خروجی نهایی:

خب! به انتهایی ترین مرحله یعنی مرحله ایجاد فایل خروجی رسیده ایم! جهت ایجاد خروجی نهایی (یعنی ایجاد یک فایل Html) از منوی بالای نرم افزار Photoshop کلید File را انتخواب کرده و از زیر منوی باز شده گزینه Save For Web… را انتخواب کنید.

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

5

 

۱-در این قسمت میتوانید نوع فرمت تصاویر خروجی گرفته شده را تغیر دهید.(بهتر است این قسمت را تغیر ندهید)

۲-در این قسمت میتوانید تعداد رنگ هایی که باید برای این پروژه استفاده شود را محدود کنید.

۳-در این قسمت میتوانید تمامی رنگ های استفاده شده در پروژه را مشاهده کنید.

۴-در این قسمت میتوانید سایز کلی پروژه را تغیر دهید. یا با تغیر عدد موجود در قسمت Percent مشخص کنید که چه درصدی از صفحه شما نمایش داده شود. بازهم تاکید میشود که محتوای این قسمت را تغیر ندهید!.

۵-با استفاده از این قسمت میتوانید یک پیش نمایش از کل پروژه خود را در مرورگر مشاهده کنید.

در نهایت برای ذخیره تغیرات اعمال شده کلید Save را انتخواب کنید تا به مرحله بعد برویم!

با ذخیره شدن تنظیمات این صفحه، پنجره جدیدی باز میشود و از ما میخواهد که مسیر ذخیره فایل های خروجی گرفته شده را مشخص کنیم. توجه داشته باشید که در این پنجره نیز باید تغیراتی را به صورت زیر اعمال کنیم:

6

۱-در قسمت File Name باید یک نام برای فایل html خود انتخواب کنیم. در صورتی که این فایل، قرار است صفحه اصلی سایت مورد نظر باشد باید با نام index.html نامگذاری شود.

۲-در قسمت Format باید گزینه : HTML and Images را انتخواب کنیم تا نرم افزار تصاویر و کد های html را به درستی ایجاد کند.

در نهایت گزینه Save را بزنید تا مراحل خاتمه یابد و فایل Psd شما به یک فایل Hml تبدیل شود!

تبریک! شما توانستید در کوتاه ترین زمان بدون حتی یک خط کد نویسی قالب خود را طراحی و تبدیل به کد کنید!

باز هم این موضوع را تاکید میکنیم :درحال حاضر این روش برای تبدیل فایل های  Psd به Html تقریبا منسوخ شده است! اما همچنان میتوان از این روش برای طراحی صفحات ایستا یا استاتیک استفاده کرد.

سعی میشود در آینده آموزش های بیشتری در رابه با نرم افزار Adobe Photoshop در وبسایت وب طراحان قرار گیرد.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *