فصل دوم : با ادامه آموزش در خدمتتون هستم . همونطوری که متوجه شده اید هر بلوک در پرستاشاپ از سه قسمت و سه عکس اصلی تشکیل شده . که عبارتند از عکس بالای بلوک ، عکس پشت زمینه بلوک و عکس پایین بلوک : block_header.png block_bg.jpg block_footer.png که این عکس ها روی همدیگه سوار میشند و یه بلوک رو میسازند . خوب بریم سر نرم افزار فتوشاپ و یه پروژه جدید باز کنید به ابعاد 25*191 و پشت زمینه این پروژه سفید باشه . مثل شکل زیر با استفاده از ابزار rounded rectangle tool میخوایم عکس بالای بلوک رو طراحی کنیم یعنی block_header.png سعی کنید یه عکس مثل این بکشید ( نگران نباشید اگه نتونستید و یا تو فتوشاپ وارد نبودید فایلهای آماده این پروژه رو براتون تو آخر ای نپست قرار میدم ) این شکلی که میکشید باید رنگش سفید باشه .بعدش روی لایه جدید که ایجاد شده تو قسمت لایه ها راست کلیک میکنید و blending option رو انتخاب میکنید . تو این قسمت مطابق شکل زیر تنظیمات رو انجام بدید : حالا که تا این مرحله پیش اومدین پروژه رو ذخیره کنید و میریم سر پشت زمینه بلوک block_bg.jpg یه پروژه جدید دیگه با اندازه 5*191 ایجاد کنید و ایندفعه رنگ پشت زمینه پروژه باید این باشه : cadeff حالا با استفاده از ابزار line tool و انتخاب رنگ 7d7d7d دو تا خط با عرض یک پیکسل هر دو طرف پروژه مثل شکل زیر می کشیم : حالا هر دو پروژه رو با فرمت jpg یه جایی ذخیره کنید .کار اینا تموم شد . میریم سر آخرین مطلب : یه پروژه دیگه به اندازه 25*191 ایجاد کنید و عکس اولی رو هم که ذخیره کرده اید باز کنید و بکشید بندازید داخل این پروژه و کاملا منطبق کنید . حالا با استفاده از منوی image و rotate canvas و flip canvas vertical عکس خودتون رو برعکس کنید ! اینم عکس پایین بلوک ذخیره کنید . البته با فرمت jpg . حالا میمونه این عکسا رو جایگزین کنیم : این 3 عکس رو کپی کنید تو پوشه img در قالبتون . با آخرین قسمت آموزش طراحی بلوک در خدمت شما دوستام محترم هستم . امیدوارم همه شما تونسته باشید از پست قبلی چیزایی رو یاد بگیرید . باید متذکر بشم که شما باید الان 3 تا عکس با فرمت jpg به نام های block_header , block_footer , block_bg داشته باشید و این سه تا عکس رو تو پوشه img قالبتون قرار داداه باشید. حالا فایل global.css رو باز کنید و به دنیال کد زیر بگردید : #left_column div.block,
#right_column div.block {
padding-bottom: 5px;
background: transparent url('../img/block_footer.png') no-repeat bottom left این کد رو با کد زیر جایگزین کنید : #left_column div.block,
#right_column div.block {
padding-bottom: 5px;
background: transparent url('../img/block_footer.jpg') no-repeat bottom left
} ---------------------------------------------- کد زیر را پیدا کنید : div.block h4 {
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1.2em;
padding-left: 0.5em;
border-bottom: 1px solid #595A5E;
padding-top: 2px;
line-height: 1.3em;
color: #374853;
height: 19px;
background: transparent url('../img/block_header.png') no-repeat top left
} و با کد زیر جایگزین کنید : div.block h4 {
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1.2em;
padding-left: 0.5em;
border-bottom: 1px solid #595A5E;
padding-top: 2px;
line-height: 1.3em;
color: #374853;
height: 19px;
background: transparent url('../img/block_header.jpg') no-repeat top left
} ------------------------------------------------ و کد زیر را پیدا کنید : div.block .block_content {
border-left: 1px #d0d3d8;
border-right: 1px #d0d3d8;
padding: 0 0.7em;
background: #f1f2f4 url('../img/block_bg.jpg') repeat-x bottom left;
min-height: 16px
} و با کد زیر جایگزین کنید : div.block .block_content {
border-left: 1px #d0d3d8;
border-right: 1px #d0d3d8;
padding: 0 0.7em;
background: #f1f2f4 url('../img/block_bg.jpg') repeat-y bottom left;
min-height: 16px
} کار تمام شد . حالا شما یه بلوک زیبا در اختیار دارید . البته شاید چندان زیبا هم نباشه ولی با این آموزش ها میتونید خودتون بلوک های زیباتری طراحی کنید . منتظر نظرات دوستان عزیز هستم. البته این یه روش بسیار ابتدایی و ساده برای طراحی بلوک بود اگه از سوی دوستان عزیز این مطلب با استقبال روبرو بشه روشهای جذاب و حرفه ای رو براتون شرح خواهم داد . block.zip