mihoserver
August 8th, 2013, 17:38
سلام دوستان .
در این پست قصد دارم آموزش تبدیل قالب psd به html رو به صورت عملی آموزش بدم.:x اگه مورد پسند نبود بگید تا آموزش رو متوقف کنم.
منبع این آموزش یه سایت زیر هست
Create a Clean and Professional Web Design in Photoshop (http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-clean-and-professional-web-design-in-photoshop/)
خب بریم سراغ آموزش
بخش اول:
خب . برای این بخش قصد داریم یه قالب psd رو در فتوشاپ طراحی کنیم . کسانی که فتوشاپ بلد نیستن پیش خودشون فکر میکنند طراحی قالب psd از فتح قله اورست هم براشون سخت تره . ولی نگران نباشید چون قدم به قدم جلو میریم و تا جایی که بشه سعی میکنیم جوری آموزش بدیم که یادگیریش راحت باشه
1_ در مرحله اول وارد محیط فتوشاپ میشیم و یک پراژه ی جدید ایجاد میکنیم (ctrl + n ) و تنظیماتش رو طبق عکس زیر انجام بدید.
14816
حالا باید واحد ها رو تنظیم کنیم.
از واحد pixel که واحد استاندارد برای طراحی قالب هست استفاده میکنیم . پنجره preferences رو باز میکنیم (ctrl + k ) و روی units & rulers کلیک میکنیم و تنظیماتی که در عکس زیر نمایش داده شده رو اعمال کنید
ضمنا برای مشخص کردن خط محتوا خطوط guides رو اضافه کنید
14817
از منوی view گذینه rulers رو انتخاب میکنیم (ctrl +R ) برای عدم نمایش این گذینه رو دوباره میزنیم
از منوی window گزینه info رو انتخاب کنید. (f8 )
حالا کلید m رو بزنید تا ابزار rectangular marquee انتخاب شود یک مربع با عرض 120px در گوشه سمت چپ صفحه ایجاد کنید. برای تنظیم اندازه میتونید از پنل info کمک بگیرید که در گوشه سمت راست صفحه هست طبق تصویر زیر
14819
مربع را بکشید به گوشه سمت راست صفحه و یک خط راهنما به سمت چپ مربع اضافه کنید
حالا صفحه باید شبیه شکل زیر باشد( دو خط راهنما در دوطرف صفحه که از هر سمت 120 پیکسل فاصله دارد)
14820
پایان جلسه اول . هر چند کم بود.
در این پست قصد دارم آموزش تبدیل قالب psd به html رو به صورت عملی آموزش بدم.:x اگه مورد پسند نبود بگید تا آموزش رو متوقف کنم.
منبع این آموزش یه سایت زیر هست
Create a Clean and Professional Web Design in Photoshop (http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-clean-and-professional-web-design-in-photoshop/)
خب بریم سراغ آموزش
بخش اول:
خب . برای این بخش قصد داریم یه قالب psd رو در فتوشاپ طراحی کنیم . کسانی که فتوشاپ بلد نیستن پیش خودشون فکر میکنند طراحی قالب psd از فتح قله اورست هم براشون سخت تره . ولی نگران نباشید چون قدم به قدم جلو میریم و تا جایی که بشه سعی میکنیم جوری آموزش بدیم که یادگیریش راحت باشه
1_ در مرحله اول وارد محیط فتوشاپ میشیم و یک پراژه ی جدید ایجاد میکنیم (ctrl + n ) و تنظیماتش رو طبق عکس زیر انجام بدید.
14816
حالا باید واحد ها رو تنظیم کنیم.
از واحد pixel که واحد استاندارد برای طراحی قالب هست استفاده میکنیم . پنجره preferences رو باز میکنیم (ctrl + k ) و روی units & rulers کلیک میکنیم و تنظیماتی که در عکس زیر نمایش داده شده رو اعمال کنید
ضمنا برای مشخص کردن خط محتوا خطوط guides رو اضافه کنید
14817
از منوی view گذینه rulers رو انتخاب میکنیم (ctrl +R ) برای عدم نمایش این گذینه رو دوباره میزنیم
از منوی window گزینه info رو انتخاب کنید. (f8 )
حالا کلید m رو بزنید تا ابزار rectangular marquee انتخاب شود یک مربع با عرض 120px در گوشه سمت چپ صفحه ایجاد کنید. برای تنظیم اندازه میتونید از پنل info کمک بگیرید که در گوشه سمت راست صفحه هست طبق تصویر زیر
14819
مربع را بکشید به گوشه سمت راست صفحه و یک خط راهنما به سمت چپ مربع اضافه کنید
حالا صفحه باید شبیه شکل زیر باشد( دو خط راهنما در دوطرف صفحه که از هر سمت 120 پیکسل فاصله دارد)
14820
پایان جلسه اول . هر چند کم بود.