آموزش حرفه ای طراحی گرافیک برای بلوکهای سایت 1

[B.A.H.M.A.N]

با سلام خدمت پرستاشاپی های عزیز

مطمئنا شاید خیلیا منو نشناسید ، بنده طراح قالب هستم و برای سیستمهای مختلفی قالب طراحی میکنم ( از جمله پرستاشاپ عزیز ! )

با یکسری از آموزشهای حرفه ای طراحی قالب و گرافیک فروشگاه های آنلاین در خدمتتون هستم .

امیدوارم بتونید از آموزشهای این بنده حقیر استفاده خوبی ببرید و یک فروشگاه آنلاین فوق العاده برای خودتون داشته باشید

خوب میریم سر اصل مطلب :

تو این آموزش سعی دارم شما عزیزان رو با متدها و ترفندهای طراحی گرافیک بلوک به صورت حرفه ای آشنا کنم .

آنچه در این درس یاد خواهید گرفت :

1 - آموزش تغییر در فایل global.css

2 - آموزش طراحی بلوک ها در فتوشاپ

3 - آموزش تغییر سایز بلوکها

 

فصل اول : ممکنه قالب شما دوستونه یا سه ستونه باشه ، اما نگران نباشید این چیزی رو عوض نمیکنه ، برید تو پوشه تم خودتون و فایل global.css رو یه کپی ازش بگیرید و paste کنید تو دسکتاپتون که اگه خرابکاری کردید بتونید برش گردونید

حالا global.css رو با wordpad خود ویندوز باز کنید و بعد بدون اینکه کاری بکنید روی دکمه ذخیره کلیک کنید و wordpad رو ببندید !!! دلیل این کار رو بعدا بهتون میگم . حالا global.css رو با notepad ویندوز بازش کنید و به دنبال عبارت زیر بگردید :

/* Default block style */

زیر این عبارت کلیه تنظیمات بلوکها قرار گرفته و بنده یکی یکی توضیح میدم تا متوجه بشید :

div.block {

margin-bottom: 1em;

width: 191px

}

این بخش مربوط میشه به تنظیم عرض بلوک به همراه تنظیم فاصله متن های داخل بلوک از پایین بلوک

------------------------------------------------------------------

 

#left_column div.block,

#right_column div.block {

padding-bottom: 5px;

background: transparent url('../img/block_footer.png') 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 .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

}

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

=================================================================

 

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

 

[B.A.H.M.A.N]

فصل دوم : با ادامه آموزش در خدمتتون هستم . همونطوری که متوجه شده اید هر بلوک در پرستاشاپ از سه قسمت و سه عکس اصلی تشکیل شده . که عبارتند از عکس بالای بلوک ، عکس پشت زمینه بلوک و عکس پایین بلوک :

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

[ms120j]

مرسی.خدا اجرتون بده.خیلی باحالین

[B.A.H.M.A.N]

مرسی.خدا اجرتون بده.خیلی باحالین

 

 

خوشحالم که این مطلب بنده حقیر مورد پسند شما دوست عزیز واقع شده . بازم آموزشهای متفاوت طراحی قالب رو براتون میزام استفاده کنید.

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

 

[shamabady]

بسیار بسیار عالی بود

لطفا وقت کردید آموزش های بیشتری بزارید

با تشکر

 

[mohsengamer]

با سلام

 

می خوام رنگ دکمه ی اضافه به سبد خرید از رنگ سبز به آبی عوض کنم. کدوم فایل رو باید عوض کنم؟

 

با سپاس

---

خودم متوجه شدم. از پوشه image واقع در فولدر تم باید اینکار انجام شود

---

آقا نشد اینکاری که کردم. دوستاناگر راه حل دارند بگن.

 

[p3ym4n]

مرسی از بهمن جان با این آموزشش ،توضیح میدی چجوری به دکمه ها قالب بدیم؟ منظورمو که میدونی چیه

 

[ali_tajik]

سلام بهمن خان. دست شما درد نکنه خیلی عالیه...

کاش این مبحث رو ادامه بدید.

 

[simkala58]

خیلی ممنون..

 

[shikotak]

مطلب خیلی خوبی بود فقط آقا بهمن یه زحمتی بکشید مثلا از قبل و بعدشم یه عکس بزارید و یه عکسم بزارید که با شماره نشون داده بشه منظور از قسمت پایین این قسمته، بالا این قسمته و غیره

خیلیا تازه کار هستن مثل خود من و باید دقیقا متوجه بشم با این تغییرات کدوم بخش ها و به چه صورتی تغییر می کنه اما خیلی دوست دارم یاد بگیرمش

ممنون از مطلب مفیدتون

[B.A.H.M.A.N]

به تاریخ مطلب ها توجه کنید ، این مطلب مال 5 سال پیش هست و تقریبا دیگه به کار نمیاد

[shikotak]

به تاریخ مطلب ها توجه کنید ، این مطلب مال 5 سال پیش هست و تقریبا دیگه به کار نمیاد

البته من به تاریخ توجه نکردم فقط چون دنبال همچنین مطلبی بودم فکر کردم مفیده

حالا مطلب جدید نمیزارید برای تازه واردا ؟!!

[royka_ir]

اگر امکان داره اموزش کار با دریم رو هم بزارید