آموزش فتوشاپ

[P O U R I A]

طراحی لیبل DVD آثار باستانی شیراز

طراحی لیبل DVD آثار باستانی شیراز

1. یک صفحه با ابعاد 15×15 سانتیمتر ایجاد کنید .File>New

​

2. برای کشیدن دایره اصلی هم می توانیم از ابزار Ellipse Tool استفاده کنیم هم می توانیم برای دقیق کشیدن اندازه دایره اصلی از Elliptical Marquee Tool استفاده کنیم . یک لایه جدید ایجاد کرده . ابزار Elliptical Marquee Tool را انتخاب کنید . از نوار ابزار بالای صفحه گزینه Style را برابر با fixed Size قرار داده و اندازه 12cm را برای عرض و ارتفاع کادر تایپ کنید .

​

​

​

5.ابزار Paint را انتخاب کنید و به دلخواه رنگ دایره کشیده را تغییر بدهید .

​

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

​

برای اینکه قسمت های اضافی تصویر محو بشه در حالیکه لایه حافظیه در حالت انتخاب است کلید Ctrl را پایین نگه داشته و بر روی دایره آبی رنگ کلیک کنید.در مرحله بعد کلید Add Layer Maskرا بزنید تا قسمت اضافی محو بشه

​

​

7. تا اینجا که فکر نمی کنم مشکل بوده باشه همه چی معلوم و مشخص بوده است . حالا برای کشیدن دایره های وسط مرحله 2 را یکبار با ابعاد 1.5×1.5 و یکبار دیگر با ابعاد 3.5×3.5 سانتیمتر برای دایره متوسط با رنگ های دلخواه تکرار میکنیم.Opacityلایه متوسط را برابر با 50 قرار دادم . شما می تویند اصلا این دایره را نزارید چون جزو دایره اصلی منظور نمیشه و می توانید روش طرح بزنید

​

​

8. بسیار خوب روی دایره آبی رنگ دابل کلیک کرده و تنظیمات گزینه Strok را تغییر بدید . در مرحله بعد لایه دایره عکس را انتخاب و کلیدهای Ctrl+T را زده سپس کمی اندازه تصویر را کوچکتر کنید .

​

​

9.روی لایه تصویر دابل کلیک کنید و تنظیمات گزینه Stroke را تغییر بدید .

​

​

10. حالا اجازه بدید برای اینکه جذابیت بیشتری پیدا کنه رنگ دایره اصلی را نیز تغییر بدم. روی لایه دایره آبی رنگ دابل کلیک کنید و تنظمیات گزینه Gradient Tool را تغییر بدید.

​

​

11. ابزار Rounded Rectangle Tool را انتخاب کنید و یک کادرنند تصویر زیر با درصد رنگی d8d9da و redius=20px بکشید در مرحله بعد Fillرا برابر با 10 درصد قرار دهید .به تصاویر زیر دقت کنید راحت تر متوجه می شوید مراحل انجام تمرین را

​

12. با زدن کلیدهای Ctrl+J یک کپی بگیرید و همانند تصویر زیر در جای مورد نظر 2 کادر را قرار دهید.

​

13.برای پاک کردن قسمت های اضافی لایه کادر کشیده را انتخاب کنید ،کلید Ctrl را از روی کیبرد پایین نگه دارید سپس روی دایره اصلی کلیک کرده و آیکون Add Layer Style را میزنیم .

​

14. حالا با ابزار Horizontal Type Tool متن مورد نظر خودم را تایپ میکنم

​

برای دانلود فایل PSD کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

آموزش طراحی کاور CD Curve glow line با فتوشاپ - قسمت اول

آموزش طراحی کاور CD Curve glow line با فتوشاپ - قسمت اول

فتوشاپ را اجرا کنید1. یک صفحه با ابعاد 15×15 سانتیمتر ایجاد کنید .File>New​

​

2. برای کشیدن دایره اصلی هم می توانیم از ابزار Ellipse Tool استفاده کنیم هم می توانیم برای دقیق کشیدن اندازه دایره اصلی از Elliptical Marquee Tool استفاده کنیم . یک لایه جدید ایجاد کرده . ابزار Elliptical Marquee Toolرا انتخاب کنید . از نوار ابزار بالای صفحه گزینه Style را برابر با fixed Size قرار داده و اندازه 12cm را برای عرض و ارتفاع کادر تایپ کنید .

​

3. ابزار Paint را انتخاب کنید و داخل دایره کشیده شده را با رنگ مشکی پر نمایید.کلید های Ctrl+D را بزنید تا ناحیه انتخاب شده از حالت انتخاب خارج شود

​

4. بر روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه های مشخص شده را تغییر بدهید .

​

5. ابزار Brush را انتخاب کرده و تنظیمات اندازه قلم را برابر با تصویر زیر قرار بدهید

​

6. در مرحله بعدی یک لایه جدید ایجاد کنید و با ابزار Pen Tool یک کادر همانند تصویر زیر بکشید

​

7. پنل Paths را از نوار ابزار بالای صفحه فعال کنید .بعد از فعال کردن Paths بر روی پنل مربوطه کلیک کنید تا انتخاب شود .یک لایه همانند تصویر زیر نمایش داده می شود . بر روی لایه مورد نظر کلیک راست کرده و گزینه Stroke Path را انتخاب کنیدبعد از انتخاب تیک گزینه مربوط را بزنید و بر روی OK کلیک کنید

​

 

[P O U R I A]

آموزش طراحی کاور CD Curve glow line با فتوشاپ - قسمت دوم

آموزش طراحی کاور CD Curve glow line با فتوشاپ - قسمت دوم

8. بعد از کلیک کرده بر روی منوی OK یکبار دیگر بر روی لایه ای که در پنل Paths وجود داشت کلیک راست کرده اینبار گزینه Delete Paths را انتخاب کنید

​

9. بعد از کشیدن کادر بر روی لایه مورد نظر (لایه خط سفید)دابل کلیک کنید و تنظیمات پیش فرض گزینه مشخص شده را تغییر بدهید .

​

10.در این مرحله با فشردن کلیدهای Ctrl+J یک کپی از خط رنگی میگیرم . سپس کلیدهای Ctrl+T را از روی کیبرد فشرده تا ابزار Free Transform انتخاب شود . سپس با استفاده از اهرم هایی که در اختیار من قرار میدهد کمی کادر را چرخانده و اندازه آن را تغییر میدهم

​

11. کلید Ctrl را از روی کیبرد پایین نگه داشته و تمام لایه ها را انتخاب کنید . سپس با فشردن کلیدهای Ctrl+E تمام لایه ها را یکی (Marge) کنید . سپس با ابزار Move Tool کادر را کمی به طرفین می چرخانم

​

12. نوبت میرسه به کشیدن دو دایره کوچک با ابعاد 1.5×1.5 و 3.5×3.5 . برای انجام اینکار از ابزاری که در مرحله 2 استفاده شده است استفاده کنید . دایره اول دارای رنگ سفید و دایره بزرگتر دارای درصد رنگی 0abbc0 می باشد . Opacity در دایره سفید برابر با 44 و در دایره سبز برابر با 16 تنظیم شده است

​

13. در مرحله آخر هم ابزار تایپ را انتخاب کرده و یک سری متن را بر روی کاور دی وی دی تایپ میکنم

​

رمز فایل : www.asarayan.com
برای دانلود فایل PDF آموزش +PSD کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

آموزش طراحی وب سایت Halcyonic در فتوشاپ - قسمت اول

آموزش طراحی وب سایت Halcyonic در فتوشاپ - قسمت اول

فتوشاپ را اجرا کنید .1. یک صفحه به ابعاد 2800×1400 با رزولیشن 72 ایجاد کنید .

​

2. ابزار خط کش را با فشردن کلیدهای Ctrl+R فعال کنید و از هر طرف کادر به طرف داخل یک خط عمودی با فاصله 100 پیکسل بکشید . بدنه سایت 1200 پیکسل می باشد .برای کشیدن خط از طریق منوی view هم می توانید اینکار را انجام بدهید .

​

3. از بالای صفحه به طرف پایین یک خط به فاصله 600 پیکسل بکشید . (به تصویر زیر دقت کنید)

​

4. یک کادر با ابزار rectangle tool برابر با 600 پیکسل بکشید . سپس روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Gradient overlay را تغییر بدهید .

​

5. در این مرحله باید یک فیلتر را بر روی قسمتی که در مرحله قبل ایجاده کرده بودم اعمال کنم . برای انجام اینکار بر روی لایه کادر کشیده شده کلیک راست کرده و گزینه Convert to smart object را انتخاب کنید . در مرحله بعدی فیلتر Filter = > Texture = > Texurizer کلیک کنید . تنظیمات در تصویر مشخص شده است .

​

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

​

روی لایه لوگو دابل کلیک کرده و تنظیمات پیش فرض را تغییر بدهید .

​

 

[P O U R I A]

آموزش طراحی وب سایت Halcyonic در فتوشاپ - قسمت دوم

آموزش طراحی وب سایت Halcyonic در فتوشاپ - قسمت دوم

7. در این مرحله با استفاده از ابزار Line tool با ضخامت 1 پیکسل دو خط سراسری میکشم . این خط باید دقیقا روی خط کشیده شده قرار بگیرد . به تصویر زیر دقت کنید متوجه می شویدخط اول با درصد رنگی 3e484a کشیده شده است و خط دوم با درصد رنگی 222628

​

8. در این مرحله یک عکس را با فشردن کلیدهای Ctrl+O وارد فتوشاپ کرده و یک کادر با ابزار Rectangle با درصد رنگی eaeaea میکشم . کادر کشیده شده را پشت تصویر قرار میدهم .

​

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

​

10. ابزار rounded Rectangle Tool را با Rediuse (شعاع) 10 پیکسل انتخاب و یک کادر همانند تصویر زیر بکشید . برای تغییر رنگ هم روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Gradient overlay را تغییر بدهید

​

بسیار خوب یک متن داخل دکمه طراحی شده تایپ میکنم .

​

طراحی قسمت بنر11. در این مرحله ابزار rectangle tool را انتخاب کرده و یک کادر با ارتفاع 410 پیکسل و درصد رنگی eae8e8 میکشم . سپس از نوار ابزار بالای صفحه فیلتر Filter => Sketch => Note Paper را با تنظیمات مشخص شده بر روی قسمت مورد نظر اعمال میکنم .

​

12. در این قسمت 4 موقعیت به نام بنر 1 / بنر 2 / بنر 3 / بنر 4 قرار می گیرد . باید بوسیله ابزار خط کش 4 قسمت 280 پیکسلی با 4 حاشیه با فاصله 26 پیکسل ایجاد کنیم .

​

13. در این قسمت 4 تصویر را بین هر موقعیتی که مشخص کرده ام قرار میدهم . برای ایجاد پس زمینه هم از ابزار Rectangle با درصد رنگی eaeaea استفاده میکنم

​

14. در مرحله بعدی باید 4 متن را به ترتیب در زیر تصاویر تایپ کنیم . درصد رنگی هر قسمت را برای شما مشخص میکنم .درصد رنگی عنوان : ffffff | درصد رنگی متن : 2c2c2c | درصد رنگی لینک : f2f2f2

​

برای دانلود فایل PDF آموزش +فایل لایه باز قالب کلیک کنید || رمز فایل : www.asarayan.com


لینک دانلود :سرورمستقیم​

 

[P O U R I A]

آموزش طراحی وب سایت Halcyonic در فتوشاپ - قسمت سوم

آموزش طراحی وب سایت Halcyonic در فتوشاپ - قسمت سوم

فایل PSD قالب را باز کرده وتا قسمت های اضافی را طراحی کنیم .
بدنه سایت دارای ارتفاع 100 درصد می باشد یعنی بسته به اطلاعاتی که در این قسمت قرار میگرد ارتفاع کم یا زیاد می شود .
اما به صورت پیش فرض یک اندازه برای این قسمت در نظر می گیرم .
ابعاد این قسمت را به طور مثال 700 پیکسل در نظر میگرم .1. برای تغییر رنگ پس زمینه ابتدا یک صفحه جدید با ابعاد 8×8 پیکسل ایجاد کنید .

​

2. در مرحله بعدی ابزار Rectangular Marquee Tool را انتخاب کرده و از نوار ابزار تنظیمات بالای صفحه گزینه Style را برابر با Fixed size و عرض و ارتفاع را برابر با 1 پیکسل تنظیم کنید . بعد از مشخص کردن تنظیمات یک مربع کوچک همانند تصویر زیر کشیده و رنگ داخل آن را با ابزار paint و درصد رنگی e9e9e9 تغییر بدهید .

​

3. با فشردن کلیدهای Ctrl+J از روی کیبرد چند کپی از مربع کوچک بگیرید و در جای مشخص شده قرار بدهید

​

4. بعد از کپی گرفتن بر روی منوی Edit > Define Pattern کلیک و فایل را با نام دلخواه ذخیره کنید . یک لایه پس زمینه در ابتدا ایجاد کرده بودیم . بر روی لایه پس زمینه دابل کلیک کرده و تنظیمات گزینه Pattern Overlay را تغییر بدهید .همانطور که می بینید رنگ پس زمینه تغییر کرده است

​

5. در این مرحله با ابزار rectangle . سه کادر سفید رنگ با عرض 380 پیکسل و فاصله با کادر کناری 30 پیکسل میکشم

​

6. بعد از کشیدن کادرهای مورد نظر من یک سری تصویر به همراه متن در داخل کادرها را قرار میدهم . در ادامه درصد رنگی متن استفاده شده را برای شما مشخص میکنم تا راحت تر بتوانید اینکار را انجام بدهید و جای سوالی برای شما پیش نیاید. برای کشیدن آیکون فلش از ابزار custome shape tool با درصد رنگی ed391b استفاده کنید
برای کشیدن خط زیر نوشته ها از درصد رنگی #E2E6E8 به ضخامت 1 پیکسل با ابزار line tool استفاده کرده امدرصد رنگی عنوان : 373f42 | درصد رنگ متن زیر عنوان : 96a9b5 | درصد رنگ توضیحات : 474f51

​

7. نوبت میرسه به طراحی فوتر . ابعاد فوتر را برابر با 400 پیکسل تنظیم کرده ام . دقت داشته باشید که این ابعاد به صورت پیش فرض نمی باشد و ممکن است در قالب اصلی سایت تغییر کند .
در این مرحله یک بافت را از اینترنت دانلود کرده و آن را به عنوان یک الگو یا pattern ذخیره میکنم . سپس با ابزار rectangle tool یک کادر کشیده و روی لایه کادر کشیده شده دابل کلیک و تنظیمات پیش فرض گزینه pattern overlay را تغییر میدهمرنگ لینکهای فوتر : 546B76 | رنگ عنوان فوتر : 212F35

​

8. من یک سری متن و لینک را در این قسمت با درصد های مشخص شده تایپ میکنم . زیر لینکها دو خط 1 پیکسلی یکی با درصد رنگی B5BEC3 و دیگری با درصد رنگی E0E4E6 میکشم .

​

رمز فایل : www.asarayan.com
برای دانلود فایل PDF آموزش +فایل لایه باز قالب کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

طراحی قالب وب سایت Transportation با فتوشاپ

طراحی قالب وب سایت Transportation با فتوشاپ

1. یک صفحه به ابعاد 1400×1100 با رزولیشن 72 ایجاد کنید .

​

2. ابزار خط کش را با فشردن کلیدهای Ctrl+R فعال کنید و از هر طرف کادر به طرف داخل یک خط عمودی با فاصله 100 پیکسل بکشید . بدنه سایت 900 پیکسل می باشد .برای کشیدن خط از طریق منوی view هم می توانید اینکار را انجام بدهید .

​

3. از بالای صفحه به ارتفاع 100 پیکسل به طرف پایین یک خط ترسیم میکنم

​

4. در مرحله بعدی ابزار Rectangle Tool را انتخاب کرده و یک کادر هم اندازه بالای صفحه (100 پیکسل) میکشم . بعد از ترسیم کادر روی لایه آن دابل کلیک کرده و تنظیمات پیش فرض را تغییر میدهم

​

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

​

6. در مرحله بعدی یک سری لینک به همراه یک متن که به عنوان لوگو استفاده می شود را در بالای صفحه تایپ میکنم .درصد رنگی لینک : e3f1ff | درصد رنگی متن زیر لینک : 95ccff | درصد رنگی لوگو : f2f8feروی لایه لوگو دابل کلیک کرده و تنظیمات گزینه Strok را تغییر میدهم

​

7. در مرحله بعدی یک تصویر را انتخاب کرده و بالای صفحه قرار میدهم

​

8. در مرحله بعدی یک سری متن همراه با یک سری مشخصات روبروی تصویر تایپ میکنمدرصد رنگ عنوان : 87847c | درصد رنگ عنوان دوم : 2b618d | درصد رنگ متن زیر عنوان نوشته : 87847c

​

9 . در این مرحله با ابزار Rounded Rectangle Tool یک کادر همانند تصویر زیر میکشم .

​

10. با ابزار Line Tool یک خط بالای کادر کشیده شده ایجاد میکنم. درصد رنگی خط کشیده شده برابر است با f5f4f4

​

11. در مرحله بعدی یک کادر با ابزار rectangle Tool با درصد رنگی a8a39d برای کادر فوتر میکشم

​

12. یک کادر دیگه با ابزار Rounded Rectangle Tool با درصد رنگی پس زمینه میکشم

​

13.در مرحله آخر هم یک سری متن در قسمت فوتر + چند لینک با درصد رنگی مشخص شده تایپ میکنم .

​

برای دانلود فایل PSD + PDF کلیک کنید || رمز فایل : www.asarayan.com
لینک دانلود فایل PSD+PDF :سرورمستقیم​

 

[P O U R I A]

آموزش طراحی قالب وب سایت رهیاب لپ تاپ با فتوشاپ

آموزش طراحی قالب وب سایت رهیاب لپ تاپ با فتوشاپ

1. یک صفحه به ابعاد 1440×1500 با رزولیشن 72 ایجاد کنید .

​

2. برای طراحی قسمت هدر سایت من از یک تصویر که از اینترنت دانلود کرده بودم استفاده کردم . اول تصویر را دانلود کردم و شروع به کپی گرفتن از کادر مورد نظر با فشردن کلیدهای Ctrl+J و سپس در کنار هم قرار دادن کادرها نمودم . به تصویر زیر دقت کنید .

​

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

​

4. ابزار خط کش را با فشردن کلیدهای Ctrl+Rاز روی کیبرد فعال میکنم و بعد ازآن از هر طرف به داخل صفحه یک کادر از طرفین با فاصله 270 پیکسل رسم میکنم .

​

5. ابزار تایپ Horizontal Type Tool را انتخاب میکنم و منوبار بالای صفحه را با رنگ سفید / فونت Tahoma / سایز 11 پیکسل تایپ میکنم .

​

6. در مرحله بعدی لوگو را در قسمت بالا سمت راست ایجاد میکنم برای انجام اینکار ابزار تایپ Horizontal Type Tool را با تنظیمات رنگ سفید / فونت kodak / سایز 36 پیکسل انتخاب و نام شرکت را تایپ میکنم .

​

7. روی لایه متن لوگو دابل کلیک میکنم و تنظیمات پیش فرض را تغییر میدهم .

​

8.ابزار تایپ Horizontal Type Tool را انتخاب و یک متن با سایز 11 پیکسل / فونت Tahoma / رنگ سفید روبروی لوگو تایپ میکنم . درصد رنگ نارنجی ادامه مطلب : fe2d02

​

طراحی قسمت منوی اصلی قالب1. ابزار Rounded Rectangle Tool را با Rediuse: 10px انتخاب و یک کادر همانند تصویر زیر میکشم سپس روی لایه کادر کشیده شده دابل کلیک و تنظیمات پیش فرض را تغییر میدهم . به تصاویر زیر دقت کنید .

​

 

[P O U R I A]

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

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

2. متن لینکها را برای مثال با سایز 14 پیکسل / درصد رنگ 353434 تایپ میکنم .

​

3. ابزار Custome Shape Tool را انتخاب کرده و یک شکل را با درصد رنگی ef2c04 پشت لینکها قرار میدهم

​

4. من یک قسمت زیر منو اصلی با نام بنر 1 / بنر 2 / بنر 3 ایجاد میکنم . قبل از انجام هر کاری یک Group ایجاد میکنم تا همه لایه های مربوط به این قسمت در این گروه قرار بگیرد .رنگ پس زمینه این قسمت را می خواهم تغییر بدهم .ابتدا ابزار Rectangle Tool را انتخاب کرده و یک کادر همانند تصویر زیر میکشم . رنگ این کادر را کمی تیره قرار میدهم تا متوجه ابعاد آن بشوید سپس رنگ کادر را سفید میکنم .

​

5. یک الگو یا Patterns از اینترنت دانلود کرده ام . روی لایه کادر کشیده شده دابل کلیک کرده و گزینه pattern Overlay را انتخاب میکنم . سپس روی مثلث کوچکی که با کادر قرمز مشخص شده است کلیک کرده و گزینه Load Patterns را انتخاب و الگو دانلود شده را به لیست الگوهای دیگر اضافه میکنم .کافیست بر روی کلید Ok کلیک کنم تا الگو انتخاب شده روی پس زمینه بشیند .

​

6. در این قسمت عکس 3 لپ تاپ را از اینترنت دانلود کردم و ابعاد آنها را 100×100 پیکسل تغییر دادم . روی لایه هر عکس دابل کلیک کردم و یک Stroke 1پیکسلی برای هر 3 عکس اعمال کردم . متن را با ابعاد 11 پیکسل و درصد رنگ 2a2a2a تایپ کردم و عنوان را با سایز 24 پیکسل تایپ کردم .

​

طراحی قسمت Content (منوی سمت راست با قسمت توضیحات )من اندازه منوی سمت راست را برابر با 200 پیکسل قرار میدهم . دقت داشته باشید که برای مشخص شدن اندازه باید از خط کش استفاده کنید .روش کشیدن کادر هم به این صورت هست که ابتدا ابزار Rounded Rectangle Tool را با Rediuse: 10px انتخاب کرده و یک کادر همانند تصویر زیر میکشم سپس روی لایه کشیده شده دابل کلیک کرده و تنظیمات پیش فرض را تغییر میدهم .

​

حالا با استفاده از ابزار تایپ عنوان و لینکها را تایپ میکنم . درصد رنگ لینک آبی : 2362d6 / درصد رنگ عنوان : 353434یک خط هم با ابزار Line Tool با ضخامت 1 پیکسل ترسیم میکنم

​

نوبت میرسه به قسمت توضیحات صفحه اصلی . ابتدا ابزار Rounded Rectangle Tool را با Rediuse: 10px انتخاب کرده و یک کادر همانند تصویر زیر میکشم . سپس عین مراحل قبلی متن را با درصد رنگی 4d4d4d تایپ میکنم . عنوان را هم که مشخص هست و نیاز به توضیح دوباره نداره . برای کشیدن خط هم از ابزار Line Tool استفاده میکنم

​

من دو کادر با ابزار Rounded Rectangle Tool را با Rediuse: 5px میکشم و برای تنظیمات هم روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات پیش فرض را تغییر میدهم

​

طراحی قسمت USER 1
من میخواهم پایین مطالب یک قسمت به نام User1 ایجاد کنم تایک سری مطالب یا لینک را در آن قرار بدهیم .برای انجام اینکار با ابزار Rounded Rectangle Tool را با Rediuse: 10px یک کادر همانند تصویر زیر میکشم سپس یک سری مشخصات در آن تایپ میکنم . درصد رنگی متن قبلا گفته شده است

​

طراحی قسمت Footerو اما طراحی قسمت فوتر قالب در فتوشاپ . فوتر از 3 قسمت تشکیل شده است . قسمت اول مربوط می شود به آدرس و مشخصات شرکت یا همان تماس با ما و قسمت دوم مربوط می شود به لینکهای مفید یا هر نام دیگری . قسمت سوم هم که مربوط می شود به کپی رایت سایت .
برای طراحی این قسمت من همانند مرحله 2 عمل کردم فقط کمی رنگ کادر را تغییر داده ام . بعد از اینکه تکه تکه قسمت ها را کنار هم قرار میدهم همه لایه های کادر فوتر را انتخاب و برای یکی شدن کلیدهای Ctrl+E را از روی کیبرد میفشارم .

​

در مرحله آخر هم شروع به تایپ متن مورد نظر که برای قسمت فوتر در نظر گرفته ام میکنم .
رنگ متن آخرین مطالب : bdbcbc / رنگ متن لینکها : b0c6ec / رنگ متن کپی رایت سایت : 2362d6

​

برای دانلود فایل PSD آموزش کلیک کنید || لینک دانلود فایل PSD :سرورمستقیم​

 

[P O U R I A]

طراحی قالب شماره 1 در فتوشاپ

طراحی قالب شماره 1 در فتوشاپ

برای شروع فتوشاپ را باز کنید .
1. یک صفحه به ابعاد 1365×1024 با رزولیشن 72 باز کنید .

​

2. رنگ فورگراند را برابر با 565554 قرار دهید .سپس ابزار گرادیانت را انتخاب و از تنظیمات بالای صفحه Redial Gradient را انتخاب کنید .
بعد از اعمال تغییرات رنگ پس زمینه راتغییر دهید

​

3. بسیار خوب می خواهیم کادر اصلی را برابر با 960 پیکسل قرار دهیم. با زدن کلیدهای Ctrl+R از روی صفحه کلید ابزار خط کش را انتخاب کرده و از طرفین چپ و راست 32 پیکسل به طرف داخل یک خط بکشید . از طرف بالا نیز 110 پیکسل به طرف پایین خطی بکشید

​

​

4. ابزار Rectangle Tool را انتخاب کنید وهمانند تصویر زیر کادرهایی با نام های menu=55px | Slidebar=375px | Featured bar=375px.222px | Content area=187px |Footer=50px می کشیم .سپس روی هر لایه دابل کلیک کرده و تنظیمات Drop shadow را تغییر می دهیم .

​

5. در این مرحله می خواهیم لینک های سایت را ایجاد کنیم . برای ایجاد لینک ابزار Horizantal type Tool را انتخاب کرده و اندازه فونت را برابر با 24پیکسل انتخاب کنید .

​

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

​

7. یک متن را به طور مشترک برای 4 ردیف وسط صفحه کپی میکنم

​

8. در مرحله بعد هر 4 عکس را کوچکتر کرده و در قسمت سمت راست Content قرار میدهیم .یکبار دیگر یک متن را به صورت پیش فرض تایپ میکنم .

​

9. در مرحله آخر هم حق کپی رایت و چند لینک را به فوتر اضافه می کنیم .

​

برای دانلود فایل PSD آموزش کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

طراحی قالب سایت شماره 2 در فتوشاپ

طراحی قالب سایت شماره 2 در فتوشاپ

1. فتوشاپ را اجرا و یک صفحه به ابعاد 530×780 ایجاد کنید .

​

2. بر روی لایه ایجاد شده دابل کلیک کرده تا تنظیمات Layer Style فعال شود . می خواهیم رنگ پس زمینه را با استفاده از یک Pattern تغییر دهیم .روی مثلث کوچک که با فلش مشخص شده کلیک کنید و از لیست باز شده گزینه Color Paper را انتخاب کنید . حال نوع Pattern را انتخاب کرده بر روی کلید OK کلیک کنید .

​

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

​

4. ابزار Horizantal Type Tool را انتخاب و نام شرکت با جزییات آن را به دلخواه بالای صفحه با درصد رنگی 303030 تایپ کنید .

​

5. ابزار Rounded Rectgle Tool را از جعبه ابزار انتخاب کرده و Radius=7px قرار دهید . رنگ پیش فرض را برابر با ad6b21 قرار داده و بعد از کشیدن سه کلید مد لایه را برابر با Screen قرار میدهیم .

​

6. بر روی یکی از کلید ها دابل کلیک کنید تا layer Style فعال شود . برای ایجاد سایه از تصویر زیر کمک بگیرید .
برای 2 کلید دیگر نیز این مرحله را تکرار می کنیم .

​

7. ابزار Horizantal Type Tool را انتخاب و با درصد رنگی 303030 نام لینکها را با اندازه 22pt تایپ کنید.

​

 

[P O U R I A]

طراحی قالب سایت شماره 2 در فتوشاپ - قسمت 2

طراحی قالب سایت شماره 2 در فتوشاپ - قسمت 2

8. حالا می خواهم قسمت اصلی صفحه یا بدنه را ایجاد کنم . یکبار دیگر ابزار Rounded Rectgle Tool را انتخاب اینبار Radius=20px قرار دهید .برای ایجاد سایه هم بر روی لایه دابل کلیک کرده و تنظیمات Drop Shadow را تغییر دهید .

​

9. عنوان صفحه را بالای کادر کشیده شده با رنگ c09b36 تایپ می کنیم .

​

10. یک کادر زرد رنگ با درصد رنگی fff9a7 با ابزار Rectangle Tool می کشیم .

​

11. حالا ابزار Horizantal Type Tool را انتخاب و متن هایی که در تصویر زیر می بینید را با مشخصات وارد شده بر روی تصویر تایپ کنید

​

12. یک تصویر را به دلخواه در قسمت چپ قرار دهید.(در صورت دلخواه از تصویر آموزش استفاده کنید)

​

13.می خواهم قسمت Footer قالب را ایجاد کنم .ابزار Rectangle Tool را انتخاب کرده و یک کادر پایین کادر اصلی بکشید سپس بر روی لایه دابل کلیک و گزینه Pattern را انتخاب کنید . نوع Pattern در تصویر زیر مشخص شده است .مد لایه را برابر با Linear Burn قرار میدهیم .Opacity=30.Fill=30 قرار میدهیم

​

14.می خواهم قسمت پایین کادر کشده شده کمی محو شود برای انجام اینکار در layer Panel روی آیکون mask کلیک کنید سپس رنگ فورگراند را برابر با مشکی قرار داده .ابزار Brushرا با اندازه قلم 150 و سختی قلم صفر انتخاب کرده و قسمت پایین کادر کشیده شده را محو می کنم .

​

15. در مرحله آخر هم با ابزار Horizantal Type Tool متن مربوط به کپی رایت را با اندازه 12pt تایپ میکنم .
قالب طراحی شده را با فرمت PSD ذخیره کنید تا فردا فایل PSDرا تبدیل به یک سایت HTML کنیم .

​

برای دانلود فایل PSD کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

طراحی قالب سایت شماره 3 در فتوشاپ

طراحی قالب سایت شماره 3 در فتوشاپ

1. یک صفحه به ابعاد 1100×1100 با رزولیشن 72 ایجاد کنید .شورتکات Ctrl+N​

​

2. بر روی لایه اصلی دابل کلیک کرده و گزینه Pattern را انتخاب کرده سپس بر روی مثلث کوچک سمت راست پترن های پیش فرض کلیک و از لیست باز شده طرح مورد نظر را انتخاب نمایید .​

​

3. بسیار خوب کادر اصلی وسط صفحه 960px قرار میدهیم . ابزار Ruler را با زدن کلیدهای Ctrl+R انتخاب کرده واز هر طرف کادر ، 70 پیکسل به طرف داخل خطی بکشید. از بالا نیز 100 پیکسل به طرف داخل یک خط بکشید.برای اینکه متوجه بشید به تصویر زیر نگاه کنید .​

​

4. ابزار Rectangle Tool را انتخاب کرده و یک کادر درست وسط خطهای مشخص شده با رنگ سفید ترسیم کنید.حالا بر روی لایه کادر کشیده شده دابل کلیک کرده و از صفحه باز شده گزینه Drop Shadow را انتخاب و تنظیمات آن را همانند تصویر زیر تغییر بدهید .​

​

5. بسیار خوب می خواهم لوگوی بالای صفحه را با ابزار Rectangle Tool بکشم .درصد رنگی فورگراند را برابر با 84282b قرار داده و یک کادر همانند تصویر زیر بکشید .​

​

6.بر روی لایه لوگو دابل کلیک کنید و تنظیمات مشخص شده را بر روی کادر کشیده شده اعمال نمایید .​

​

7. ابزار Horizantal Type Tool را انتخاب کرده ونام شرکت خودتان را در کادر ایجاد شده تایپ کنید​

​

8.دو دایره با ابزار Ellipse Tool ایجاد کرده و دو شکل دلخواه از لیست ابزار custome Shape Tool انتخاب کنید و در وسط کادر ها همانند تصویر زیر قرار دهید​

​

 

[P O U R I A]

طراحی قالب سایت شماره 3 در فتوشاپ - قسمت 2

طراحی قالب سایت شماره 3 در فتوشاپ - قسمت 2

9. من از سمت راست برای منوها 260 پیکسل با ابزار خط کش یک فاصله ایجاد میکنم . سپس عنوان صفحه را با اندازه 36 پیکسل و متن وسط صفحه را با اندازه 12 پیکسل با ابزار Horizantal Type Tool تایپ میکنم .​

​

10. حالا در این مرحله می خواهم کادر پایین متن را بکشم . ابزارRectangle Tool را انتخاب کنید و با درصد رنگیه e9e9e9 یک کادر بکشیدو سپس روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات آن را همانند تصویر زیر تغییر بدهید .​

​

​

​

11. بسیار خوب با ابزار Horizantal Type Tool متن داخل کادر کشیده را تایپ میکنم .​

​

12. متن ، تصویر و کادر بالا را یکبار دیگر کپی و در قسمت پایین صفحه قرار دهید .​

​

13. ابتدا یک کادر سراسری با ابزارRectangle Tool با درصد رنگی F8F8F8 بکشید سپس از کادری که در مرحله قبل کشیده بودید به تعداد لینکهای خودتان کپی بگیرید و با زدن کلیدهای Ctrl+T کمی اندازه آن را تغییر بدید سپس نام لینکهای خودتان را در آنها تایپ کنید​

​

14.برای ایجاد کادر جستجو یک کپی از کادرهای کشیده شده برای لینکها کپی میگیرم و اندازه آن را با زدن کلیدهایCtrl+T اندازه آن را کمی کوچکتر میکنم. رنگ پس زمینه را هم سفید قرار میدهم . برای کشیدن دایره جستجو هم یک کپی از دایره های قبلی بگیریدو شکل ذربین را از لیست custome Shape Tool انتخاب کرده و در وسط دایره قرار دهید .​

​

15.در مرحله آخر هم اطلاعات تماس را پایین صفحه تایپ میکنم . طراحی تو فتواشپ تمام شد
فردا اگر وقت کنم فایل Htmlوcss این آموزش را آماده میکنم .​

​

برای دانلود فایل PSD کلیک کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

طراحی قالب سایت شماره 4 در فتوشاپ

طراحی قالب سایت شماره 4 در فتوشاپ

برای شروع این آموزش فتوشاپ را اجرا کنید.
1.یک صفحه با ابعاد 800×1000 با رزولیشن 72 ایجاد کنید .Ctrl + N

​

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

​

3.با زدن کلیدهای Ctrl+R ابزار خط کش را فعال و با توجه به اندازه های مشخص شده در تصویر زیر خطهای مورد نظر را بکشید

​

4. مرحله به مرحله از هدر سایت شروع به طراحی میکنیم تا برسیم به پایین ترین قسمت یعنی فوترابزار Rectangle Tool را از جعبه ابزار انتخاب و یک کادر بالای صفحه با درصد رنگی 36373b بکشید

​

5. در مرحله بعد یک بافت روی کادر کشیده شده قرار میدهم . به تصویر زیر دقت کنید

​

6. تصویر جامدادی را ذخیره کرده و بالای صفحه قرار دهید . می توانید از تصاویر دیگر هم استفاده کنید.

​

7. ابزار Horizantal Type Tool را انتخاب و نام شرکت خودتان را با درصد رنگی c6c5c5 تایپ کنید

​

8. با ابزار Horizantal Type Tool نام لینکهای خودم را با درصدهای مشخص شده تایپ میکنم

​

9. ابزار Rounded Rectangle Tool را انتخاب و یک کادر همانند تصویر زیر بکشید سپس ابزار Gradient را انتخاب و درصد رنگی مشخص شده را با رنگهای پیش فرض جایگزین کنید سپس رنگ کادرکشیده شده را تغییر دهید

​

10.بسیار خوب در مرحله بعد بافت بکار برده شده در روی کادر اصلی را ذخیره کنید با مد رنگی multiplay بالای لایه کادر کشیده شده قرار دهید .

​

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

​

 

[P O U R I A]

طراحی قالب سایت شماره 4 در فتوشاپ - قسمت دوم

طراحی قالب سایت شماره 4 در فتوشاپ - قسمت دوم

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

​

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

​

​

14.عکس تیوتر را ذخیره کرده و پایین کادر قرار بدید

​

15. یک کادر با ابزار Rounded Rectangle Tool بکشید و opacity آن را برابر با50% درصد قرار دهید .

​

16. در مرحله آخر هم حق کپی رایت و صفحه تویتر را تایپ میکنم

​

برای دانلود فایل PSD کنید || لینک دانلود :سرورمستقیم​

 

[P O U R I A]

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

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


قرار بود 10 قالب را برای شما از صفر تا 100 طراحی کنم . سعی میکنم 4 قالب باقیمانده را طی مدت 2 هفته به صورت کامل برای شما آموزش بدم . یک آموزش ویژه هم برای شما در نظر گرفتم و آن هم آموزش آپلود کردن سایت طراحی شده بر روی سرور به صورت کاملا تصویری می باشد که امیدوارم بازدید کنندگان از این بخش لذت ببرند .
اما 4 قالب باقیمانده را ، من چند قالب برای فروش طراحی کرده بودم که بدلایلی منصرف شده و حالا می خواهم این 4 قالب که به صورت حرفه ای طراحی شده و در همه مرورگرها هم بدون هیچ مشکلی جواب میده را برای شما به صورت کامل از صفر تا 100 طراحی کنم .همانطور که می دانید و در توضیحات قبلی به آن اشاره کرده ام قدم اول در طراحی یک قالب رسم موقعیت های قالب بر روی یک کاغذ می باشد . یعنی چی ؟ یعنی مشخص کنیم قالبی که می خواهیم طراحی کنیم دارای چه موقعیت هایی هست . موقعیت راست چین داره یا خیر . در سمت چپ قالب موقعیتی قرار می گیره ؟ لوگو باید کجای صفحه باشه . پایین قالب چه لینکهایی و در کجا باید باشه .(بخش اول طراحی قالب در فتوشاپ می باشد )خوب قالب من دارای موقعیت های زیر هست به تصویر دقت کنید .

​

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

​

با توجه به توضیحات بالا فتوشاپ را اجرا کرده تا شبیه سازی در قالب یا ساخت پوسته سایت را آغاز کنید .1. یک صفحه به ابعاد 1404×1122 با رزولیشن 72 ایجاد میکنم .

​

2. ابزار خط کش را فشردن کلیدهای Ctrl+R انتخاب کنید . وسط صفحه یا قسمت اصلی سایت 900 پیکسل می باشد . کل صفحه ای که ایجاد کرده ام 1122 پیکسل هست . من از هر طرف 111 پیکسل به طرف داخل یک کادر میکشم . دقت داشته باشید که شما می توانید عرض صفحه ای که ایجاد می کنید را 1000 پیکسل قرار داده و از هر طرف برای راحتی کار 50 پیکسل یک خط به طور عمودی ترسیم کنید .

​

طراحی قسمت هدر / HEADER3. از طرف بالای صفحه 320 پیکسل به طرف داخل یک کادر دیگه میکشم

​

4. ابزار Rectangle Tool را انتخاب کرده و یک کادر به اندازه 323 پیکسل با توجه به خط کشیده شده ترسیم کنید .

​

5. روی کادر کشیده شده دابل کلیک کرده و تنظیمات پیش فرض گزینه های مشخص شده را با توجه به تصاویر زیر تغییر بدهید . (دقت داشته باشید که از همین ابتدا با ایجاد Group فایل های هر قسمت را در Layer Panel مستقل کنید )

​

6. قسمت اصلی بالای سایت طراحی شد . قسمت بالا با توجه به موقعیت هایی که در تصویر 1 کشیده بودم دارای 4 قسمت است . قسمت منو . لوگو . تصویر و متن .
با ابزار Rectangle Tool یک کادر با ارتفاع 100 پیکسل با درصد رنگی 6d5001 ترسیم کنید . سپس باید Fill لایه را برابر با 10 درصد قرار بدهید . به تصاویر زیر دقت کنید متوجه می شوید .

​

نوبت میرسه به منوی بالای صفحه . من برای کشیدن منوهای بالای صفحه 5 کادر مشکی با ابزار Rounded Rectangle Tool با rediuse=10px میکشم . سپس Fill لایه ها را برابر با 10 قرار میدهم .

​

7. ابزار Horizontal Type Tool را انتخاب کرده و اسم منو ها را با رنگ سفید درست در وسط کادرهای کشیده شده تایپ میکنم .

​

8. نوبت میرسه به طراحی لوگو . برای طراحی لوگو شکل پروانه را از لیست ابزارهای Custome Shape Tool انتخاب کردم و با رنگ مشکی بالای صفحه کشیدم . Fill لایه را هم برابر با 10 قرار دادم .

​

9. روی کادر پروانه کشیده شده دابل کلیک کرده و تنظیمات سایه شکل را با توجه به تصویر زیر تغییر بدهید

​

 

[P O U R I A]

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

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

10. ابزار Horizontal Type Tool را انتخاب کرده و متن مورد نظر را تایپ میکنم سپس روی لایه متن کشیده شده دابل کلیک کرده و تنظیمات پیش فرض گزینه Drop Shadow را تغییر میدهم .

​

11. برای قسمت پایین منو 2 تا عکس از اینترنت دانلود کردم و در جای مشخص شده قرار میدهم . برای ایجاد خط به دور تصاویر هم روی لایه هر تصویر دابل کلیک کرده و تنظیمات گزینه Stroke را برابر با 3 پیکسل با رنگ سفید قرار میدهم .

​

12. دقت داشته باشید که تمام قسمت هایی که دارم به پوسته وب سایت اضافه میکنم بین کادر 900 پیکسلی قرار گرفته است و از خطوط مشخص شده خارج نمی شود . یکبار دیگر ابزار Horizontal Type Tool را انتخاب کرده و یک متن را به صورت پیش فرض با توجه به نحوه قرار گیری اجسام در بالای صفحه با درصد رنگی 463401 تایپ میکنم .

​

13.ابزار Rounded Rectangle Tool با rediuse=10px انتخاب کرده و یک کادر با درصد رنگی efd690 پایین متن تایپ شده میکشم . درصد رنگ متن ادامه مطلب 463401

​

قسمت هدر تمام شد . یک Group دیگر با نام Container ایجاد کنید.

​

طراحی قسمت Container1. یک کادر با ابزار Rectangle Tool با درصد رنگی fef7df کشیده و برای اینکه کمی نسبت به صفحه متمایز باشد روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Stroke را تغییر میدهم . عرض کادر کشیده شده برابر است با 250 پیکسل

​

2. یک سری متن را به عنوان لینک با درصد رنگی 8c6c02 تایپ میکنم در مرحله بعدی با ابزار Rectangle Tool یک سری مربع کوچک با درصد رنگی 977d26 در پشت هر لینک قرار میدهم . برای جدا کردن عنوان منو از لینکها از ابزار Line Tool با درصد رنگی fff8e1 و ضخامت 1 پیکسل استفاده میکنم . رنگ عنوان را هم برابر با 4a3901 قرار میدهم .

​

3. نوبت میرسه به قسمت اصلی صفحه یعنی Content. قسمت Content از دو بخش تشکیل شده است . در بالای صفحه عنوان با اندازه 18 و درصد رنگی 4a3901 تایپ شده است . کمی پایین تر اسم و تاریخ درج مطلب با اندازه فونت 11 و درصد رنگی 836501 تایپ شده است . بعد از تایپ 2 قسمت بالا یک عکس کمی پایین تر به همراه متن مشخص شده قرار گرفته است و در پایان بخش اول کلمه ادامه مطلب با درصد رنگی ed6306 تایپ شده است .برای بخش دوم هم به همین منوال . تنها تنظیمات این دو قسمت مربوط به خط دور عکس می شود که می توانید از تصویر زیر کمک بگیرید وگرنه بقیه چیزها تکراری و بسیار مقدماتی می باشد .

​

طراحی فوتر / Footer1. برای طراحی فوتر باید ابتدا دو کادر با درصد رنگی 312b1d و کادر کوچکتر که برای حق کپی رایت می باشد با درصد رنگی 252116 با ابزار Rectangle Tool بکشیم .ارتفاع کادر بزرگ 170 پیکسل و کادر کوچک برابر با 34 پیکسل می باشد .

​

2. من فوتر را به 3 قسمت 250 پیکسلی تقسیم کردم و در هر قسمت یک سری مشخصات را تایپ میکنم . به تصویر زیر دقت کنیدرنگ عنوان قسمت اول : cba834 اندازه فونت 16
رنگ متن زیر عنوان : c7b98b اندازه فونت 11قسمت دوم هم به همین منوالدر قسمت سوم 6 عکس را با ابعاد 50×50 پیکسل در کنار هم با Stroke یک پیکسلی قرار داده ام .

​

و در آخر هم متن کپی رایت را با درصد رنگی 968651 و اندازه فونت 12 تایپ کردم .

​

برای دانلود فایل PSD کلیک کنید || لینک دانلود فایل PSD :سرورمستقیم​

 

[P O U R I A]

طراحی قالب وب سایت خبری در فتوشاپ - قسمت اول

طراحی قالب وب سایت خبری در فتوشاپ - قسمت اول

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

1. برای شروع یک صفحه به ابعاد 1650×1200 با رزولیشن 72 ایجاد کنید .​

​

2.یک لایه جدید ایجاد کرده ، ابزار Paint Bucket Tool را از جعبه ابزار انتخاب کرده و رنگ پس زمینه را با دردصد رنگی 3E2E1F تغییر دهید .​

​

3. از نوار ابزار بالای صفحه فیلتر Filter>Noise>Add Noise را با تنظیمات مشخص شده در تصویر زیر بر روی پس زمینه اعمال کنید .​

​

4. از نوار ابزار بالای صفحه فیلتر Filter>Blur>Gaussian blur را با تنظیمات مشخص شده در تصویر زیر بر روی پس زمینه اعمال کنید .​

​

5. یک لایه بدون پس زمینه با ابعاد 27×27 ایجاد کنید .ابزار Rectangle Tool را انتخاب کنید و یک کادر مستطیل شکل همانند تصویر زیر بکشید. برای تغییر اندازه و چرخش کادرهای کشیده شده از ابزار Freetransform استفاده کنید .شورتکات =Ctrl+T​

​

6. کلید Ctrl را پایین نگه دارید حالا هر سه لایه را انتخاب کنید .(مستطیل های کشیده شده)کلید های CTRL+E را بزنید تا لایه ها یکی شوند.6.1. از نوار ابزار بالای صفحه منوی Edit>Define Pattern را انتخاب و یک اسم برای پترن ساخته شده انتخاب کنید .
6.2. یک لایه جدید ایجاد کنید .
6.3.حالا از نوار ابزار بالای صفحه Edit>Fill را انتخاب کرده و در قسمت Content>Use را برابر با پترن ساخته شده قرار بدهید . کافیست بر روی OK کلیک کنید .​

​

7.گزینه Fill لایه دوم را برابر با 10% قرار بدهید .​

​

8. ابزار Rounded Rectangle Tool (U) (Radius – 15px انتخاب کرده و یک کادر مشکی رنگ با Fill 25% ایجاد کنید .​

​

9. ابزار Rounded Rectangle Tool (U) (Radius – 15px را انتخاب و یک کادر پایین تر از کادر اولی با درصد رنگی ECE9E3 ترسیم کنید .​

​

 

[P O U R I A]

طراحی قالب وب سایت خبری در فتوشاپ - قسمت دوم

طراحی قالب وب سایت خبری در فتوشاپ - قسمت دوم

10.ابزار Horizontal Type Tool را انتخاب و نام شرکت را بالای صفحه تایپ کنید . درصد رنگی زرد :f5a705​

​

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

12. برای ایجاد کادر جستجو ابزار Rounded Rectangle Tool (U) (Radius – 15px را انتخاب کنید و یک کادر کوچک روبروی منوسایت بکشید .برای ایجاد سایه هم بر روی لایه دابل کلیک کرده و تنظیمات آن را همانند تصویر زیر تغییر دهید .​

​

13. یک کادر زیر لایه متن جستجو با ابزار Rounded Rectangle Tool (U) (Radius – 15px با درصد رنگی f5a705 ایجاد کنید .​

​

14. ابزار Rounded Rectangle Tool (U) (radius 10 px را انتخاب و چند کار همانند تصویر زیر با درصد رنگی F7F5F2 میکشیم .​

​

15. با ابزار Horizontal Type Toolعنوان را بالای کادرهای کشیده شده تایپ می کنیم .​

​

16. حالا شروع به نوشتن متن ها در کادرهای مشخص شده می کنیم .​

​

17. با ابزار Rounded Rectangle Tool (U) (radius 10 px چند تا کادر دیگه وسط تصویر میکشم و شروع به تایپ متن میکنم .دقت داشته باشید که شما می توانید هر فونتی را به دلخواه برای طراحی انتخاب کنید اما تبدیل قالب فتوشاپ به قالب HTML هر فونتی را پشتیبانی نمی کند .​

​

 

[P O U R I A]

طراحی قالب وب سایت در فتوشاپ - قسمت اول

طراحی قالب وب سایت در فتوشاپ - قسمت اول

1. یک صفحه با ابعاد 700×766 با رزولیشن 72 ایجاد کنید .File>New

​

2. ابزار سطل رنگ Paint Bucket Tool را انتخاب کنید و رنگ پس زمینه را با درصد رنگی 0F1715 تغییر بدهید

​

3. تصویر زیر را ابتدا دانلود کنید . سپس با زدن کلیدهای Ctrl+O تصویر دانلود شده را در فتوشاپ باز کنید.
از نوار ابزار بالای صفحه منوی Edit>Define Pattern را انتخاب کرده و یک اسم دلخواه برای پترن مورد نظر تایپ و ذخیره کنید.
یک لایه جدید ایجاد ، ابزار سطل رنگ را انتخاب و تنظیمات سطل رنگ را برابر با Pattern قرار داده و بر روی لایه جدید اعمال کنید .

​

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

​

4.2. ابزار Brush را از جعبه ابزار انتخاب کنید .
اندازه قلم را برابر با 60 قرار بدید

​

4.3.کمی ناحیه بالا را محو کنید .بعد از انجام دو مرحله بالا مد لایه را برابر با Blending mode-Soft Light قرار بدید .

​

5. ابزار Rectangle Tool را از جعبه ابزار انتخاب و یک کادر پایین صفحه با درصد رنگی 0F1715 می کشیم .

​

6. باابزار Rectangle Tool یک کادر دیگه بالای صفحه به عنوان منو اصلی سایت می کشیم و بعد با دابل کلیک کردن بر روی لایه آن ، رنگشو تغییر می دهیم .

​

7. ابزار Rounded Rectangle Tool را با Redius=10px انتخاب کنید و یک کادر همانند تصویر زیر بکشید تا بعد از آن رنگشو تغییربدهیم .

​

 

[P O U R I A]

طراحی قالب وب سایت در فتوشاپ - قسمت دوم

طراحی قالب وب سایت در فتوشاپ - قسمت دوم

8. برای پاک کردن قسمت بالای کلید منو ، ابزار Rounded Rectangle Tool را انتخاب و کلید Alt را از روی صفحه کلید پایین نگاه داشته روی قسمت بالا را درگ کنید .

​

9.برای تغییر رنگ کلید بر روی لایه مورد نظر دابل کلیک کرده و تنظیمات آن را همانند تصویر زیر تغییر دهید

​

​

10. ابزار Line Tool (U) (weight 2 px را با ضخامت مشخص شده انتخاب کنید و سه خط دیگر درست برابر با منوی کشیده شده بکشید .

​

11. برای تغییر رنگ خطهای کشیده شده آیکون fx را در حالیکه کلید Altرا پایین نگاه داشته اید بر روی خطهای کشیده شده ببرید و رها کنید .آیکون fx در تصویر زیر مشخص شده است

​

12.اینبار 3 خط به صورت عمودی با رنگ سفید و opacity=50% بکشید

​

13. ابزار تایپ Horizantal Type Tool را انتخاب کنید و نام صفحات خودتان را با یک فونت دلخواه تایپ نمایید .درصد رنگی فونت 945b26

​

14. یک مستطیل با ابزار Rectangle Toolکشیده .fill را برابر با صفر قرار دهید ، بر روی لایه دابل کلیک کرده و تنظیمات گزینه Strok را همانند تصویر زیر تغییر دهید

​

​

15. عکس آفتابگردان را دانلود و کلید Ctrl+O را بزنید .عکس را وسط کادر کشیده شده قرار دهید . اگر کمی بزرگتر هست با زدن کلیدهایCtrl+T اندازه تصویر را کوچکتر نمایید.

​

​

16.ابزار Horizantal Type Tool را انتخاب کنید و متن دلخواه خودتان را تایپ نمایید . رنگ سبز :98a800 متن :a19e9c
من برای اینکه دقیقا متن کشیده شده در یک راستا قرار بگیرد یک کارد با ابزار Horizantal Type Tool درست زیر تصویر با درگ کردن میکشم سپس متن خودمو را تایپ میکنم.

​

 

[P O U R I A]

آموزش طراحی قالب سایت داروهای گیاهی

آموزش طراحی قالب سایت داروهای گیاهی

1. یک صفحه به ابعاد 810×1024 با رزولیشن 72 ایجاد کنید .Ctrl+N​

​

2. یک لایه جدید ایجاد کنید ،ابزار Paint را انتخاب و رنگ پس زمینه را با درصد رنگی 15181C تغییر دهید .​

​

3. یک لایه جدید ایجاد کنید ، ابزارrectangular Marquee Tool را انتخاب و یک کادر همانند تصویر زیر بکشید. رنگ داخل کادر را با درصد رنگی 121518 تغییر دهید​

​

4. ابزار Horizantal Type Tool را انتخاب و اسم شرکت را با فونت 36Pt تایپ کنید . بعد از آن لینکها را با هم با فونت 24pt تایپ می کنیم . رنگ سبز:13b71e​

​

​

​

5. ابزار Line Tool را انتخاب و از تنظیمات بالای صفحه گزینه Wieghtرا برابر با 1px قرار دهید .رنگ خط را برابر با 1c2024 قرار داده سپس همانند تصویر زیر چند خط می کشیم​

​

6. یکبار دیگر ابزار Line Tool را انتخاب کرده و یک خط کوچکتر از خط قبلی با رنگ 717070 بکشید​

​

​

​

7. بسیار خوب عکس بکار برده شده در هدر قالب را از ذخیره و با زدن کلیدهای Ctrl+O بالای هدر قالب قرار دهید .​

​

8. برای کشیدن قسمت های چپ و راست صفحه ابزار Rounded Rectangle Tool را انتخاب و دو کادر با درصد رنگی 15181c بکشید .​

​

9. عنوان قسمت ها را با ابزار Horizantal Type Tool را تایپ کنید .​

​

10. بسیار خوب با ابزار Horizantal Type Tool یک سری لینک ومتن اضافه میکنم .​

​

11.کادر وسط صفحه را با ابزار Rounded Rectangle Tool کشیده سپس متن دلخواه را وارد میکنم .( دقت داشته باشید متنها برای نمایش بهتر قالب می باشد)​

​

 

[P O U R I A]

آموزش طراحی قالب صلح جهانی با فتوشاپ

آموزش طراحی قالب صلح جهانی با فتوشاپ

1. یک صفحه به ابعاد 1440×1500 با رزولیشن 72 ایجاد کنید .

​

2. در مرحله اول با استفاده از ابزار خط کش باید یک فاصله 150 مگاپیکسلی از طرف بالای کادر به طرف داخل بکشید . برای انجام اینکار در نوار ابزار بالای صفحه بر روی منوی Veiw >New Guide کلیک کنید . یک صفحه همانند تصویر زیر نمایش داده می شود . گزینه Horizontal را انتخاب و عدد 150PX را در کادر وارد کرده و در پایان بر روی کلید OK کلیک کنید .

​

3. یکبار دیگر از طرفین کادر ، از بیرون به طرف داخل باید یک خط به عرض 220 پیکسل ترسیم کنیم . برای انجام اینکار در نوار ابزار بالای صفحه بر روی منوی Veiw >New Guide کلیک کنید . یک صفحه همانند تصویر زیر نمایش داده می شود . گزینه Vertical را انتخاب و عدد 220PX را در کادر وارد کرده و در پایان بر روی کلید OK کلیک کنید .

​

4. بالای قالب که منو اصلی همراه با لوگو قرار میگیره دارای رنگ سفید هست . ابزار تایپ Horizontal Type Tool را انتخاب کرده و با درصد رنگی 1f1f1f و فونت Koodak یک سری کلمه به عنوان منوی اصلی بالای صفحه تایپ میکنم . درصد رنگ فونت نارنجی : fe8f00

​

5. درصد رنگ متن آبی لوگو برابر است با 019ae6 و اندازه آن 36

​

6. ابزار Rectangle Tool را انتخاب کرده و یک کادر همانند تصویر زیر با درصد رنگی eeeced بکشید .

​

7. در مرحله بعدی با استفاده از ابزار Rounded Rectangle Tool سه کادر با انحنا Radius :20px ترسیم میکنم . برای تغییر رنگ و افکت سایه از تصاویر زیر کمک بگیرید .

​

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

​

کادر زرد

​

 

[P O U R I A]

آموزش طراحی قالب صلح جهانی با فتوشاپ - قسمت 2

آموزش طراحی قالب صلح جهانی با فتوشاپ - قسمت 2

کادر طوسی رنگ 30 درصد بزرگتر می باشد .

​

8. کمی ابعاد کادرها را بزرگتر کرده ام . بعد از کشیدن هر سه کادر ابزار تایپ Horizontal Type Tool را انتخاب کرده و متنی را داخل آنها تایپ می کنم .

​

9. ابزار Rounded Rectangle Tool را انتخاب کرده و با Radius :20px چهار کادر با درصد رنگی f8f8f8 برای منوی سمت راست و 1 کادر سفید برای متن وسط صفحه ایجاد میکنم .

​

10. در مرحله بعدی باید برای هر یک از منو ها یک عنوان تایپ کنم . درصد رنگ عنوان 1b1b1b . رنگ زیر منو ها 96b41e

​

11. برای متن وسط صفحه هم همانند مرحله 10 یک متن همراه با یک تصویر تایپ میکنم .رنگ متن 353535 | رنگ عنوان 404040 | رنگ آبی لینک : 0271c6

​

12. نوبت میرسه به طراحی فوتر . ابتدا یک کادر با ابزار Rectangle Tool با درصد رنگی cdcfce میکشم .

​

13. مرحله 12 را با درصد رنگی 3a3b3f تکرار میکنم

​

14. کادر آخر هم با درصد رنگی 333438

​

15.قسمت فوتر را می توانیم به سه بخش کوچک تقسیم کنیم . من معمولا یک قسمت را به عنوان لینکدونی و قسمت های دیگر را برای درباره ما و تماس با ما قرار میدهم .
رنگ عنوان : 96b41e | رنگ متن درباره ما : efefed

​

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

​

دانلود فایل PSD قالب

 

[P O U R I A]

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

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

فتوشاپ را اجرا کنید
1. یک صفحه به ابعاد 200×300 با رزولیشن 100 ایجاد کنید .

​

2. شما می توانید از تصاویر دلخواه بسته به محتوای سایت خودتان استفاده کنید . من تصویر موس مایکروسافت با مدل 3KJ-00002 MS Touch Mouse را روی صفحه ایجاد شده قرار میدهم

​

3. در مرحله سوم بعد از ایجاد صفحه جدید باید پنل انیمیشن را از مسیر Window = > Animation فعال کنید تا کادر تنظیمات آن در پایین صفحه ظاهر شود .

​

4. در پایین صفحه کادر انیمیشن را مشاهده می کنید . این پنل تشکیل شده است از : قسمت فریم ها / قسمت Forever و قسمت Playes Animation

​

در قسمت راست پنل انیمیشن پایین صفحه روی آیکون Convert To Frame Animation کلیک کنید تا اولین فریم ساخته شود .

​

5. ابزار Rectangle Marquee Tool را انتخاب کرده و گزینه Style را برابر با Fixed Size قرار دهید . سپس ابعاد 50 در 50PX را برای هر دو کادر وارد کنید .

​

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

​

7. حالا باید از کادری که کشیدید با زدن کلیدهای CTRL+J به اندازه کل تصویر کپی بگیرید .در لایه های مستقل

​

8. من یک تصویر دیگه هم بالای کادرهایی که کشیدم قرار میدهم .

​

9. حالا نوبت میرسه به ایجاد انیمیشن و ساخت بنر به صورت متحرک فریم اول را که ایجاد کرده اید باید زمانش را به 1 ثانیه تغییر بدهید . دقت داشته باید که همه لایه ها به غیر از لایه اصلی را غیر فعال کنید

​

حالا باید تمام Fill لایه را برابر با 50 قرار بدهیم . به غیر از تصویر دوم

​

 

[P O U R I A]

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

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

​روش کار به این صورت هست که با ایجاد یک فریم جدید یک لایه فعال می شود . زمان هر لایه هم 1صدم ثانیه باید تنظیم شود .

​

به تصویر زیر دقت کنید من این مرحله را تا آخرین مربع انجام میدهید .

​

بعد از اینکه مرحله آخر را انجام دادید بابد یک فریم از دوباره ایجاد کنیم و لایه مربع اول را Fill را برابر با 100 قرار دهیم .تا مرحله آخر به همین منوال . یک فریم ایجاد Fill لایه اول برابر با 100

​

بسیار خوب امیدوارم تا این قسمت خسته نشده باشید . فریم آخر هم زمانش را روی 5 صدم ثانیه تنظیم کنید تا کمی بیشتر توقف داشته باشد .
یک فریم با زمان 1صدم ثانیه ایجاد کنید فقط عکس دوم را می خواهم در 4 مرحله به صورت کامل در صفحه نمایش بدهم. یعنی 4 فریم ایجاد کرده و در هر فریم فقط قسمتی از کادر را به طرف بیرون بیاورید تا کل تصویر دوم در وسط صفحه ظاهر شود

​

برای دانلود فایل PSD آموزش کلیک کنید || لینک دانلود فایل PSD :سرورمستقیم

 

[P O U R I A]

آموزش طراحی بنر فلش بخش مقالات - قسمت اول

آموزش طراحی بنر فلش بخش مقالات - قسمت اول

فتوشاپ را اجرا کنید
1. یک صفحه به ابعاد 60×468 میلیمتر با رزولیشن 72 ایجاد کنید .

​

2. روی لایه ایجاد شده دابل کلیک کرده و تنظیمات پیش فرض را با توجه به تصویر زیر تغییر بدهید . گزینه هایی که باید تغییر کنند را با کادر قرمز مشخص کرده ام .

​

3. ابزار Rounded rectangle Tool را با Redius : 5px انتخاب کرده و یک کادر با درصد رنگی 0054ff همانند تصویر زیر بکشید .

​

مد لایه را برابر با Overlay قرار بدهید

​

4. من در این مرحله یک آیکون را روی کادر کشیده شده قرار داده (جهت دانلود به آخر آموزش مراجعه کنید)و با ابزار تایپ Horizontal Type Tool یک متن را در جای مشخص شده تایپ میکنم . درصد رنگی متن تایپ شده : ffdf00 و ffffff

​

4.1. کادر کشیده شده تا پایان آموزش به صورت ثابت در بنر وجود داره به همین دلیل با پایین نگه داشتن کلید Ctrl از روی کیبرد هر 5 لایه را انتخاب کرده و کلیدهای Ctrl+E را بزنید تا هر 5 لایه تبدیل به یک لایه شود

​

ابزار Rounded Tectangle Tool را با Redius : 5px انتخاب کرده و یک کادر با درصد رنگی 0054ff همانند تصویر زیر بکشید بعد از کشیدن کادر روی لایه کشیده شده دابل کلیک کرده و تنظیمات پیش فرض گزینه Stroke را همانند تصویر زیر تغییر بدهید

​

5. مرحله 5 را یکبار دیگر با یک آیکون دیگر و متن متفاوت با متن اصلی برای کادر جدید تکرار میکنم

​

6. یک کادر دیگه با ابزار Rounded Tectangle Tool با Redius : 5px با درصد رنگی edb904 میکشم و یک متن را روی کادر کشیده شده تایپ میکنم .

​

7. حالا باید مرحله 4.1 را تکرار کنیم به این صورت که کادر نارنجی با متن خودش باید تبدیل به یک لایه بشه و کادر آبی کوچک رنگ با متن و آیکونی که روی آن قرار داره تبدیل به یک لایه .من اینکار را انجام داده و هر دو لایه را غیر فعال میکنم تا کادر جدید بکشم .

​

8. بعد از اینکه دو کادر را غیر فعال کردید یک مستطیل با ابزار Rectangle بکشید .

​

 

[P O U R I A]

آموزش طراحی بنر فلش بخش مقالات - قسمت دوم

آموزش طراحی بنر فلش بخش مقالات - قسمت دوم

9. ابزار Custome Shape Toolرا انتخاب کرده و از لیست اشکال پیش فرض مثلث را همانند تصویر زیر انتخاب کنید . برای چرخش کادر کشیده هم باید از ابزار Free Transform با فشردن کلیدهای Ctrl+T از روی کیبرد استفاده کنید .

​

10. Fill لایه را برابر با صفر قرار دهید سپس روی کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Stroke را تغییر بدهید

​

11. با فشردن کلیدهای Ctrl+J یک کپی از کادر کشیده شده بگیرید و در طرف مقابل قرار بدهید

​

12. در مرحله بعدی یک کادر با ابزار Rectangle بکشید و تنظیمات آن را با توجه به مرحله 10 و 11 تغییر بدهید

​

13. بسیار خوب در این مرحله من داخل هر کادر یک متن تایپ میکنم سپس مثل مراحل قبل متن با کادر کشیده شده را تبدیل به یک کادر میکنم

​

شروع کار با پنل انیمیشن

14. پنل انیمیشن را از مسیر Window = > Animation فعال کنید تا کادر تنظیمات آن در پایین صفحه ظاهر شود .​

​

15. در پایین صفحه کادر انیمیشن را مشاهده می کنید . این پنل تشکیل شده است از : قسمت فریم ها / قسمت Forever و قسمت Playes Animation

​

16. بعد از فعال کردن پنل انیمیشن اولین فریم ، فریم بنر شما می باشد . دقت کنید که تمام لایه ها به غیر از لایه اول باید غیر فعال باشد . به تصویر زیر دقت کنید . از لایه کادر آبی رنگ 3 کپی بگیرید .از کادر زرد 3 کپی بگیرید . از بقیه کادرها به غیر لایه اصلی یک کپی به غیر از لایه اصلی بگیرید .
ممکنه از خودتان سوال کنید چرا 4 کپی !!! روش حرکت به این صورت هست که ابتدا کادر آبی رنگ طی دو مرحله به جای اصلی خودش حرکت داده می شود سپس کادر زرد رنگ با دو مرحله به پایین کادر آبی رنگ هدایت میشه . کادر زرد رنگ طی دو مرحله محو میشه . از دوباره کادر آبی طی دو مرحله مثل کادر زرد رنگ محو میشه . هر دو کادر برای هر مرحله باید یک لایه داشته باشند . میشه 4 لایه

​

17. زمان اولین فریم را به 5 دهم ثانیه تغییر بدهید

​

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

​

 

[P O U R I A]

آموزش طراحی بنر فلش بخش مقالات - قسمت سوم

آموزش طراحی بنر فلش بخش مقالات - قسمت سوم

19. حالا یک فریم دیگه ایجاد کنید . در مرحله بعدی لایه مرحله قبل را غیر فعال و لایه دوم کپی گرفته شده را فعال میکنم با زمان 5 دهم ثانیه

​

20. مرحله 18 و 19 را برای کادر نارنجی تکرار میکنم . به تصاویر زیر دقت کنید

​

​

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

​

​

22. برای کادر آبی رنگ هم مثل کادر زرد باید در یک مرحله یک فریم جدید ایجاد کرده و کادر آبی رنگ را کمی به بالا ببریم . سپس یک کادر دیگر ایجاد و هر دو لایه را غیر فعال میکنیم

​

​

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

​

برای دانلود فایل PSD کلیک کنید || PSD :سرورمستقیم
رمز فایل : www.asarayan.com