.::. آموزش ساخت یک قالب یا تمپلت زیبا | از سری آموزشهای تخصصی .::.

Erfan

Active Member
سلام;
امیدوارم حال همه خوب باشه :rose: . دوستان زیادی هستند که روزها را برای جستجو یک تمپلت یا یک قالب برای وب سایت خودشون صرف میکنن غافل از اینکه نمیدونن با کمی تلاش میشه خودشون زیباترین قالب را با سلیقه و امکاناتی که مد نظرشون هست رو خلق کنند. در این آمورش شما طریقه ساختن یک تمپلت زیبا را رو یاد خواهید گرفت. پس همراه باشید.:paint:


 1. در قسمت اول سندی با سایز 770 760x بسازید با بکگراند سفید. سپس با استفاده از ابزار Rectangle Tool تشکیل شده از 30 قسمت با یک نمونه ایجاد کنید, مطابق رنگ dfdac4 که استفاده کرده ام.

template-01-01.jpg


2. با ابزار مشابه یک قالب و نمونه دیگر ایجاد کنید. در این لحظه من مطابق کد رنگ cac09d استفاده کرده ام.

template-01-02.jpg


3. در این مرحله ابزار Ellipse tool را انتخاب کنید, و یک دایره مطابق تصویر زیر ایجاد کنید با کد رنگ 707070 که من استفاده کرده ام.

template-01-03.jpg


4. در این قسمت شما مشابه قسمت اول با استفاده از ابزار Rectangle Tool یک نمونه دیگر از شکل ساخته شده را با سایز بزرگ مطابق تصویر با کد رنگ 8b836c ایجاد نمائید.

template-01-04.jpg


5. حالا این لایه ای که دقیقاً بالای لایه پیش زمینه است را انتخاب کنید.

template-01-05.jpg


6. سپس لایه اولی را که در زمینه ایجاد کرده ایم را ذخیره کنید. برای این عمل به آدرس مربوطه بروید : Layer > Rasterize > Shape  برای ذخیره و لود (خواندن) کلید CTRL را فشار دهید و کلید چپ را نگه دارید (روی لایه مربوطه).

template-01-06.jpg


7. تا به اینجای کار نتیجه شما می بایست شبیه به تصویر زیر شده باشد :

template-01-07.jpg


8. در این مرحله به آدرس Select > Modify > Expand  رفته و مقدار 3 پیکسل را وارد نمائید.

template-01-08.jpg


9. حالا لایه نمونه بزرگ را انتخاب کنید, و یک لحظه روی کلید Delete روی صفحه کلیدتان کلیک نمائید. برای عدم انتخاب کلیدهای CTRL+D  را با هم فشار بدهید. این نتیجه کار است :

template-01-09.jpg


10. قسمت انتخاب شده را برای نمونه های دیگر انتخاب نمائید.

template-01-10.jpg


11. به آدرس Select > Modify > Expand رفته و مقدار 3 پیکسل را وارد نمائید. سپس نمونه لایه بزرگ را انتخاب نمائید روی کلید Delete  از صفحه کلید فشار دهید. سپس دکمه های CTRL+D را با هم فشار دهید. این نتیجه کار است :

template-01-11.jpg


12. برای دایره ای که ایجاد کرده اید هم گاهم های مشابه را انجام دهید. من یک بار دیگه مراحل را توضیح نمیدهم زیرا من مطمئن هستم شما میتوانید به تنهایی آنها را یک بار دیگه انجام دهید. اگر تغییرات مشابه قبلی را روی دایره انجام دهید نتیجه کار شما میبایست مشابه این تصویر زیر شده باشد :

template-01-12.jpg


13. در این قسمت ما بخشهایی اضافه میکنیم, لطفاً در قسمت چپ لایه مقداری متن اضافه کنید.

template-01-13.jpg


14. ابزار Line Tool را انتخاب کنید و خطوطی بین متنها ایجاد کنید.

template-01-14.jpg


15. حالا کلیه لایه ها را انتخاب کنید به همراه خطوط و همزمان کلیدهای  CTRL+E را فشار دهید. (تمام لایه ها را به صورت یک لایه در می آورد.)

template-01-15.jpg


16. ابزار Elliptical marquee tool را انتخاب کنید و یک انتخاب بزرگتر مشابه انتخاب من ایجاد کنید :

template-01-16.jpg


17. مطمئن شوید که به صورت افقی لایه ها را با خطوط انتخاب کنید, سپس کلید CTRL+D را فشار دهید.

template-01-17.jpg


18. اکنون بگذارید یک تصویر روی لایه شما اضافه شود. تصویر را در قسمت بالای دایره جایگزین کنید

template-01-18.jpg


19. با استفاده از ابزار Elliptical Marquee tool نمونه ای هم اندازه دایره تان ایجاد کنید و بسازید. (یا میتوانید دایره انتخابی قبلی را ذخیره کنید.)

template-01-19.jpg


20. در این مرحله کلیدهای CTRL+SHIFT+I را با هم فشار دهید تا به طور کلی قسمت انتخابی را احاطه نماید و سپس کلید delete را از صفحه کلید فشار دهید. تا این مرحله نتیجه شما میبایست مانند تصویر زیر شده باشد :

template-01-20.jpg


21. بگذارید یک نمونه ساده لایه با شکل بزرگ اضافه شود, آن را انتخاب کنید. (آن یکی که بالای لایه پیش زمینه صفحه است)

template-01-22.jpg


22. مدلهای مربوط به نمونه لایه را اضافه کنید.

template-01-23.jpg


23. این نتیجه اعمال تغییرات در مرحله پیشین است:

template-01-24.jpg


24. ابزار Rectangle tool را انتخاب نمائید و یک مستطیل کوچیک و ظریف بسازید :

template-01-25.jpg


25. به فیلتر Filter > Distort > Shear نابود سازی زفته و مطابق تصویر زیر تغییرات را اعمال نمائید. شما اگر میخواهید لایه را احاطه نمائید میبایست سوال و درخواست کنید. لطفاً ok را فشار دهید. سپس برای مقایسه و سیستم بریدن از following settings استفاده کنید.

template-01-26.jpg


26. نتیجه اعمال تغییرات مرحله قبلی این شد :

template-01-27.jpg


27. قسمت بالای شکل نمونه را پاک کنید :

template-01-28.jpg


28. اکنون مقداری متن و تصویر روی لایه من اضافه کنید.

template-01-29.jpg


29. سپس من همچنین یک آرم متن اضافه خواهم کرد, اینک لایه های نمونه ای در سرتاسر و دوتادور مدلها را روی لایه خودتان اضافه کنید.

template-01-30.jpg


30. این نتیجه کلی کار و زحمت شماست :

template-01-31.jpg



دانلود نسخه html با حجم 760 کیلوبایت
دانلود نسخه pdf با حجم 517 کیلوبایت
دانلود فایل psd آموزش با حجم 328 کیلوبایت


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

موفق باشید.
عرفان
 

galagoola

Active Member
خیلی خوب و ساده و رسا توضیح دادی
خیلی کامله
مملول خسته نباشی
ما منتظریم :دی
فلن
 

memol_515

Active Member
ديگه حيف بود زباني تشكر نكنم! عالي بود ! منتظر اون 59 تاي باقيش ميمونيم !

اميدورام باقيش هم به همين خوبي باشن . دستت مرسي پسر

خوش باشي
 

[SOBHAN]

Active Member
عاليه عرفان ...

منتظر آموزش جادووي رنگ هستم .


موفق باشيد
محمد حسين
 

Peace Dove

Well-Known Member
سلام عرفان جان خیلی وقت چیش قرار بود اینکارو بکنی!!
اما اشکال نداره ماهی رو هر وقت از آب بگیری تازست!
خیای ممنون
منتظر بقیه هستم.
موفق باشید
سامان
 

Erfan

Active Member
ممنون از وقتی که صرف کردید. استفاده کردیم استاد

خواهش میکنم مهدی جان .. در ضمن استاد هم خودتی :)

خیلی خوب و ساده و رسا توضیح دادی
خیلی کامله
مملول خسته نباشی
ما منتظریم :دی
فلن

به به آقا حسین گل !!!
این آموزش جای اون 60 تا هست و اگه خدا بخواد و قت بذاره سعی میکنم ادامه بدم ...

ديگه حيف بود زباني تشكر نكنم! عالي بود ! منتظر اون 59 تاي باقيش ميمونيم !

اميدورام باقيش هم به همين خوبي باشن . دستت مرسي پسر

خوش باشي

به به مدیر ممول !!
شما تشکر هم نکنید ما قبولتون داریم :)
چشم .. به موقع میذارم .
:گل

ممنون استاد ، آموزش خیلی خوبی بود
سلام سپی :گل
ملسی ... استاد خودتی جناب امپراطور !!!

عاليه عرفان ...

منتظر آموزش جادووي رنگ هستم .


موفق باشيد
محمد حسين

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

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

مرسی عزیز ... شما خودت استاد مایی !!! چش مایی !!!

دستت درد نکنه استاد.

می میخوام بدونم این قضه استاد چیه ؟!@
خبریه ؟! خو بگید ما هم در جریان باشیم :)

سلام
ممنون عرفان
بسی خوب بود

خواهش میکنم عزیز .. کاری نکردم ... انجام وظیفه بود ...

سلام عرفان جان خیلی وقت چیش قرار بود اینکارو بکنی!!
اما اشکال نداره ماهی رو هر وقت از آب بگیری تازست!
خیای ممنون
منتظر بقیه هستم.
موفق باشید
سامان

والا من همیشه نیت ام خیر هست .... ولی هر بار مشکلی پیش میاد ... این بار دیگه دل رو زدم به دریا و آموزشها رو میخوام شروع کنم !!!
ما مخلصیم !!

سلام حاج عرفان
منم هميني كه محمد حسين گفت:

آقا احسان شما که گفته بودی کفش {کشف} کردی این فرمول جادوی رنگ رو ... خب بگو تا من و دیگر بچه ها استفاده کنیم ..

:)





عرفان
 

[EHSAN]

Well-Known Member
[Erfan];749237 گفت:
آقا احسان شما که گفته بودی کفش {کشف} کردی این فرمول جادوی رنگ رو ... خب بگو تا من و دیگر بچه ها استفاده کنیم ..

:)
عرفان
راستش كفش{کشف} كه كرديم ولي زشته يكي بياد جلوي استاد شيفو جولان بده :snap:
بعد تازشم اوني كه شما ميگي بهتر تره.. و تازه ترتر اينكه ميخوام ببينم روش شما چجورياس

ولي يك نمونه از يكي از مراحل كار رو بهت ميدم ببن:



فقط خودتو كنترل كن
يه وقت نگي اين احسان سبكتو ضايع كرده ها
شرمنده جسارت كردم
ديگه مرحله آخرشو نخواه كه تا خودت هستي نميزارم
هرچی باشه شما استاد این سبکی
 

پیوست ها

  • erfanism_ehsan.jpg
    erfanism_ehsan.jpg
    89 کیلوبایت · بازدیدها: 2
آخرین ویرایش:

Erfan

Active Member
[EHSAN];749433 گفت:
راستش كفش{کشف} كه كرديم ولي زشته يكي بياد جلوي استاد شيفو جولان بده برادر:snap:
بعد تازشم اوني كه شما ميگي بهتر تره.. و تازه ترتر اينكه ميخوام ببينم روش شما چجورياس

ولي يك نمونه از يكي از مراحل كار رو بهت ميدم ببن:



فقط خودتو كنترل كن
يه وقت نگي اين احسان سبكتو ضايع كرده ها
شرمنده جسارت كردم
ديگه مرحله آخرشو نخواه كه تا خودت هستي نميزارم

ياعلي(ع) مدد

سلام :rose:

من کی گفتم استادم که همتون اینجوری دارید این کلمه رو میکوبین روی سرم ...:mad: ماشالله خودتون از من کلی که چه عرض کنم بیشترتر استادترید:neutral:

عکس شما رو دیدم ... نمیدونم روشی که این تصویر رو درست کردی چطوری هست ولی امیدوارم برات مفید باشه:rose:
من آخرین ترکیب رنگی که انجام دادم برمیگرده به 4 یا 5 ماه پیش که این هست :

erfan-colors.jpg


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

تصویر شما هم تا حدودی شبیه هست ولی مال من شبیه به نقاشی آبرنگ هست. به در آمیختگی رنگ ها دقت کن !!!:cool:

بی صبرانه منتظر آموزش شما هستم:rose:




عرفان
 

[EHSAN]

Well-Known Member
[Erfan];749464 گفت:
الان هم باید برم نوشته هام رو زیر و رو کنم تا راه حل صحیح اش رو دوباره پیدا کنم و بخونمش ...

تصویر شما هم تا حدودی شبیه هست ولی مال من شبیه به نقاشی آبرنگ هست. به در آمیختگی رنگ ها دقت کن !!!:cool:

بی صبرانه منتظر آموزش شما هستم:rose:
عرفان
ممنونم عرفان جان

مگه اين آموزش رو از جايي ياد گرفتي كه ميگي برم پيدا كنم بخونمش؟!!
راستي نكته‌ي خوبي رو تذكر دادي.. مطلب رو گرفتم يادم باشه اينم ازت تقليد كنم :cool:
بي صبرانه هم منتظر نباش چون خودت هنوز چيزي از سبكت آموزش ندادي
اگر قرار باشه كسي اينجا منتظر باشه اون ماييم.:rose:
 

Mandana

Active Member
خوب می یک راه بهتر دارم.احسان و عرفان جفتشون آموزش کارشون رو درست می کنن میدن به می، می هم قول میدم با اسمه خودتون بذارم یک جای خوب
182___Dance_Together_Emoticon_by_witegots.gif

فقط اگر می خواین آموزش ها رو بفرستین زودتر چون مهلته زیادی نداره اون جا خوبه :دی سورپرایزه بعدن خودتون میبینین نگین نگفتم
Cute_Emoticon_Blushing_by_vbrigitta.gif


همینا دیگه
موفق باشین و بی صبرانه منتظرم
pink_smiley_trial_avatar_by_sweetsoultaker.gif
 

Erfan

Active Member
[EHSAN];749471 گفت:
ممنونم عرفان جان

مگه اين آموزش رو از جايي ياد گرفتي كه ميگي برم پيدا كنم بخونمش؟!!
راستي نكته‌ي خوبي رو تذكر دادي.. مطلب رو گرفتم يادم باشه اينم ازت تقليد كنم :cool:
بي صبرانه هم منتظر نباش چون خودت هنوز چيزي از سبكت آموزش ندادي
اگر قرار باشه كسي اينجا منتظر باشه اون ماييم.:rose:

خواهش میکنم , نه من یه روز داشتم یه کاغذدیواری درست میکردم که همینجوری یه روش برای درست کردن این آموزش شف کردم که چنتا مرحله داشت که روی یه کاغذ نوشتم که یادم نره :lol: که انگار یادم رفته:cry:

اگر قرار باشه ترکیب رنگ خوبی از آب در بیاد باید به این نکته توجه داشته باشی که در طراحی های متری که اکثراً برای بنر و .. به کار میره هیچ گونه محدودیتی نداشته باشه:oops:

نه برادر من من از تمامی آموزشهای دوستان استقبال میکنم. من در صدد تهیه چندین آموزش کاربردی و به درد بخور هستم. که به محض اینکه ترجمه و تنظیمشون تکمیل بشه میذارم همینجا ...


عرفان
 

Erfan

Active Member
خوب می یک راه بهتر دارم.احسان و عرفان جفتشون آموزش کارشون رو درست می کنن میدن به می، می هم قول میدم با اسمه خودتون بذارم یک جای خوب
182___Dance_Together_Emoticon_by_witegots.gif

فقط اگر می خواین آموزش ها رو بفرستین زودتر چون مهلته زیادی نداره اون جا خوبه :دی سورپرایزه بعدن خودتون میبینین نگین نگفتم
Cute_Emoticon_Blushing_by_vbrigitta.gif


همینا دیگه
موفق باشین و بی صبرانه منتظرم
pink_smiley_trial_avatar_by_sweetsoultaker.gif

سلام مانی:rose:
والا من که ادعایی ندارم ... :cry::neutral: هر چی آموزش هم داشته باشم مطمئن باش 1% هم دریغ نمیکنم و میذارم همینجا تا بقیه بچه ها استفاده کنن.

حالا اون جا خوبه کجا هست !!!:oops: بیشتر بگو تا با شوق و ذوق بیشترتر آموزشها رو بذارم:oops::rose:



عرفان
 
آخرین ویرایش:

جدیدترین ارسال ها

بالا