آموزش تبدیل قالب psd به html به صورت عملی

[mihoserver]

سلام دوستان .
در این پست قصد دارم آموزش تبدیل قالب psd به html رو به صورت عملی آموزش بدم. اگه مورد پسند نبود بگید تا آموزش رو متوقف کنم.

منبع این آموزش یه سایت زیر هست

Create a Clean and Professional Web Design in Photoshop
خب بریم سراغ آموزش

بخش اول:

خب . برای این بخش قصد داریم یه قالب psd رو در فتوشاپ طراحی کنیم . کسانی که فتوشاپ بلد نیستن پیش خودشون فکر میکنند طراحی قالب psd از فتح قله اورست هم براشون سخت تره . ولی نگران نباشید چون قدم به قدم جلو میریم و تا جایی که بشه سعی میکنیم جوری آموزش بدیم که یادگیریش راحت باشه
1_ در مرحله اول وارد محیط فتوشاپ میشیم و یک پراژه ی جدید ایجاد میکنیم (ctrl + n ) و تنظیماتش رو طبق عکس زیر انجام بدید.

asa.png

حالا باید واحد ها رو تنظیم کنیم.
از واحد pixel که واحد استاندارد برای طراحی قالب هست استفاده میکنیم . پنجره preferences رو باز میکنیم (ctrl + k ) و روی units & rulers کلیک میکنیم و تنظیماتی که در عکس زیر نمایش داده شده رو اعمال کنید
ضمنا برای مشخص کردن خط محتوا خطوط guides رو اضافه کنید

asa2.png

از منوی view گذینه rulers رو انتخاب میکنیم (ctrl +R ) برای عدم نمایش این گذینه رو دوباره میزنیم
از منوی window گزینه info رو انتخاب کنید. (f8 )
حالا کلید m رو بزنید تا ابزار rectangular marquee انتخاب شود یک مربع با عرض 120px در گوشه سمت چپ صفحه ایجاد کنید. برای تنظیم اندازه میتونید از پنل info کمک بگیرید که در گوشه سمت راست صفحه هست طبق تصویر زیر

asa3.png

مربع را بکشید به گوشه سمت راست صفحه و یک خط راهنما به سمت چپ مربع اضافه کنید
حالا صفحه باید شبیه شکل زیر باشد( دو خط راهنما در دوطرف صفحه که از هر سمت 120 پیکسل فاصله دارد)

22-07_design_smashing_website.jpg

پایان جلسه اول . هر چند کم بود.

[Ne&in]

ادامش چی شد بزرگوار؟