آموزش ساخت یک قالب یا تمپلت زیبا

crate-template-logo-post

سلام;

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

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

create-template-01-01

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

create-template-01-02

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

create-template-01-032

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

create-template-01-04

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

create-template-01-05

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

create-template-01-06

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

create-template-01-07

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

create-template-01-08

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

create-template-01-09

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

create-template-01-10

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

create-template-01-11

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

create-template-01-12

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

create-template-01-13

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

create-template-01-14

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

create-template-01-15

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

create-template-01-16

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

create-template-01-17

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

create-template-01-18

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

create-template-01-19

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

create-template-01-20

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

create-template-01-22

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

create-template-01-23

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

create-template-01-24

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

create-template-01-25

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

create-template-01-26

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

create-template-01-27

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

create-template-01-28

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

create-template-01-29

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

create-template-01-30

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

create-template-01-31

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

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

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

برچسب‌ها: , , , , , , , , , ,

8 پاسخ to “آموزش ساخت یک قالب یا تمپلت زیبا”

  1. حسين Says:

    جالبه آفرين اما حوصله ميخواد و وقت مام كه نداريم… .

  2. سعید حسینی Says:

    دستتون درد نكنه
    عالي بود
    خوشحال ميشم باز هم آموزشهايي به اين خوبي ببينم
    كاربردي بود

  3. Ali DANG3R Says:

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

  4. اميرحسين Says:

    عاليه. واقعا حرف نداره . فقط چرا خودتون رو مبتدي حساب ميكنيد؟ شما خيلي هم حرفه اي هستيد.

  5. محسن Says:

    سلام و خسته نباشید
    شما آموزش نرم افزار دریم ویور رو به صورت pdf دارید ؟!

  6. مهریار Says:

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

    عرفان :
    در مورد سوال شما :
    اگر دستی در سی اس اس دارید که خیلی کار خوبی میشه و اگر مبتدی هستید و برای اولین بار میخواهید این کار را انجام بدهید توصیه میکنم اول با استفاده از سی اس (فتوشاپ) قالب را به تعداد کوچکتر تبدیل کنید که برای این کار از ابزار Slice Tool استفاده کنید و بعد از یک برنامه مانند فرانت پیچ برای کدنویسی استفاده کنید.

  7. آموزش Says:

    آموزش جالب و خوبي بود موفق باشيد.

  8. سياوش خان Says:

    سلام ؛ دستت درد نكنه … هم جاي تقدير و تشكر داره . . . . بازم مرسي .

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s


%d وب‌نوشت‌نویس این را دوست دارند: