رفتن به مطلب

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


پست های پیشنهاد شده

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

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

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

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

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

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

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

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

}

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

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

 

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

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

block_header.png

block_bg.jpg

block_footer.png

که این عکس ها روی همدیگه سوار میشند و یه بلوک رو میسازند .

خوب بریم سر نرم افزار فتوشاپ و یه پروژه جدید باز کنید به ابعاد 25*191 و پشت زمینه این پروژه سفید باشه .

مثل شکل زیر با استفاده از ابزار rounded rectangle tool میخوایم عکس بالای بلوک رو طراحی کنیم یعنی

block_header.png

 

سعی کنید یه عکس مثل این بکشید ( نگران نباشید اگه نتونستید و یا تو فتوشاپ وارد نبودید فایلهای آماده این پروژه رو براتون تو آخر ای نپست قرار میدم ) این شکلی که میکشید باید رنگش سفید باشه .بعدش روی لایه جدید که ایجاد شده تو قسمت لایه ها راست کلیک میکنید و blending option رو انتخاب میکنید . تو این قسمت مطابق شکل زیر تنظیمات رو انجام بدید :

 

post-366-14373017379849_thumb.jpg

post-366-14373017380533_thumb.jpg

حالا که تا این مرحله پیش اومدین پروژه رو ذخیره کنید و میریم سر پشت زمینه بلوک :cool:

 

block_bg.jpg

 

 

یه پروژه جدید دیگه با اندازه 5*191 ایجاد کنید و ایندفعه رنگ پشت زمینه پروژه باید این باشه : cadeff

حالا با استفاده از ابزار line tool و انتخاب رنگ 7d7d7d دو تا خط با عرض یک پیکسل هر دو طرف پروژه مثل شکل زیر می کشیم :

 

 

post-366-14373017381376_thumb.jpg

 

 

حالا هر دو پروژه رو با فرمت 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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

 

 

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

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

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 2 months later...
  • 4 weeks later...

با سلام

 

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

 

با سپاس


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


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

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 6 months later...
  • 3 years later...
  • 1 month later...

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

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

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

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

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

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

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

  • 1 year later...

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

در حال بارگذاری


  • کاربران آنلاین در این صفحه

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • اضافه کردن...