آگهی رایگان بازاریابی اینترنتی

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

رتبه بدهید

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

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

1-  برای شروع کار یک فایل جدید در ابعاد 960 پیکسل (عرض)  و 900 پیکسل (ارتفاع) و 72dpi رزولوشن ایجاد کنید.

2-  با سطل رنگ (Paint Bucket) رنگ (#04283b) را بر روی صفحه بریزید.

3-  یک لایه جدید ایجاد کنید، قلم مو (Brush) را انتخاب کنید، سایز قلم را به اندازه ای زیاد کنید که بتوانید یک محیط روشن بزرگ با رنگ سفید (مانند نمای زیر) در وسط صفحه ایجاد کنید.

4-  ترکیب لایه را به حالت (Soft Light) تغییر دهید.

5-  حالا (Rectangle Tool) را انتخاب کنید و اشکالی را همانند نمای زیر در صفحه ایجاد کنید. من رنگ (#41738e) را برای کشیدن این اشکال انتخاب کردم.

6-  در سمت چپ، من فضای خالی را با یک شکل دیگر به رنگ (#28607d) پر کردم.

7-  سپس با رفتن به منوی Edit>Transform>Skew و انتخاب ابزار (Move Tool)، شکل خود را به حالت زیر تغییر دادم و گوشه ها را با دقت بالا به هم متصل کردم.

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

9-  حالا باید یک کپی از این اشکال بگیریم و دقیقا به حالتی که در نمای زیر مشاهده میکنید با کمی فاصله در زیر اشکال اولیه و با رنگ تیره تر قرار دهیم، با این کار به صفحه خود عمق داده ایم. همین کار را برای نوار زیر صفحه تکرار کنید.

10-  یک شکل به حالت بیضی با استفاده از (Ellipse Tool) در زیر نوار روشن بالای صفحه و با رنگ تیره ایجاد کنید.

11-  به منوی (Filter) بروید و از زیرمنوی (Blur) گزینه (Gaussian Blur) را انتخاب کنید و تنظیمات آن را به روشی که در نمای زیر می بینید تغییر دهید.

12-  و (Opacity) لایه را به 40% کاهش دهید.

13-  مراحل 10 تا 12 را برای نوار پایینی تکرار کنید و یا از لایه ایجاد شده قبلی یک کپی بگیرید و آن را در زیر نوار پایینی صفحه قراردهید. اگر مراحل را درست انجام داده باشید، قالب شما تا ایجای کار شبیه به نمای زیر خواهد بود.

14-  حالا یک لایه بالاتر از همه لایه ها ایجاد کنید (می توانید اینکار را با استفاده از CTRL+SHIFT+ALT+N) انجام دهید و با استفاده از مداد یا (Pencil Tool) یک خط صاف افقی بکشید، ولی اندازه قلم را روی 1px تنظیم کنید.

15-  دقت کنید که خط سفید را مانند نمای زیر رسم کنید. هنگام کشیدن مداد (Pencil Tool) بر روی صفحه دکمه (Shift) را نگه دارید تا یک خط افقی صاف رسم شود. در نهایت خط رسم شده را مانند نمای زیر دقیقا بر روی لبه نوار بالا قرار دهید.

16-  حالا پاک کن (Eraser Tool) را مانند نمای زیر انتخاب کنید، دقت کنید که یک براش را در نرم ترین حالت قرار دهید.

17-  حالا با استفاده از همین پاک کن قسمتهایی از خط را مانند نمای زیر پاک کنید.

18-  در این مرحله با توجه به نیازها و سلیقه خود کمی متن به صفحه اضافه کنید.

19-  حالا شکلی همانند نمای زیر در سمت راست و بالای کار خود ایجاد کنید.

20-  سپس به منوی Filter بروید و از زیرمنوی Blur گزینه Gaussian Blur را انتخاب کنید (Filter > Blur > Gaussian blur) و تنظیمات را مانند قبل بر لایه خود اعمال کنید. خروجی اینچنین خواهد شد.

21-  با استفاده از ابزار انتخاب مستطیلی (Rectangular Marquee Tool) درست نیمه چپ شکل مورد نظر را انتخاب میکنیم.

22-  مطمئن باشید که لایه را درست انتخاب کرده اید، سپس دکمه های (CTRL+I) و بعد (CTRL+D) را بفشارید. با اینکار رنگ قسمت انتخاب شده را معکوس خواهید کرد.

23-  حال اگر میزان شفافیت (Opacity) لایه را به 6% کاهش دهید نتیجه کار این خواهد شد.

24-  حالا با استفاده از (Rounded Rectangle Tool) یک شکل ساده به این حالت می کشیم.

25-  حالا با استفاده از دکمه های (CTRL+T) کمی شکل را به مانند نمای زیر می چرخانیم.

26-  پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

27-  باز هم با استفاده از (Rectangular Marquee Tool) قسمت سمت چپ شکل فعلی را مانند نمای زیر انتخاب کنید.

28-  حالا دکمه Delete را بزنید و یا از منوی Edit  گزینه Clear را انتخاب کنید، سپس برای خروج از حالت انتخاب دکمه های CTRL+D  را فشار دهید.

29-  مانند مراحل اولیه کار، از این لایه یک کپی بگیرید و رنگ آن را تیره تر کنید و آن را درست در زیر لایه فعلی، البته با کمی تغییر زاویه قرار دهید.

30-  حالا کمی سلیقه به خرج داده و در سایت Wefunction.com  آیکون مورد نظر خود را پیدا کنید و آن را مانند نمای زیر در قسمتی از قالب جاسازی کنید.

31-  خسته نباشید، قالب شما آماده است.

منتظر آموزش های بعدی باشید

رتبه بدهید

http://www.hadidi.ir

مقداد حدیدی هستم، طراح وب و مالتی مدیا، عاشق اینترنت و وبگردی تخصص‌ها: Html، Css، JavaScript، JQuery، Photoshop، Dreamweaver، Illustrator و ... به تازگی همکاریمو با تمپــــ ها شروع کردم. می تونید منو به حلقه‌های Google+ خودتون اضافه کنید، و یا رزومه آنلاین منو ببینید

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

  • بسیار ممنون از آموزشتون واقعا بدردم خورد

    قبلا سایت خیلی به روز تر بود

    محمد جواد بهمن ۱۴, ۱۳۹۰ ۰۲:۳۶ پاسخ دادن
    • قابل شما رو نداشت، لطفا اگه آموزش خاصی مد نظرتون هست بگید تا ارائه بدیم

      مقداد حدیدی بهمن ۱۵, ۱۳۹۰ ۱۴:۳۷ پاسخ دادن
  • ممنون از شما
    آموزش خاصی مد نظرم نیست
    فقط اگر براتون امکان داره فایل PSD یک پنجره شبیه به پنجره ویندوز را بگذارید
    چون دارم برنامه نویسی می کنم و می خوام از یک نوع پنجره دیگه استفاده کنم چون پنجره های خود ویندوز کمی تکراری شده

    تشکر

    محمد جواد بهمن ۱۵, ۱۳۹۰ ۱۵:۰۱ پاسخ دادن
    • یعنی دارید برنامه تحت ویندوز می نویسید؟
      برای برنامه تحت ویندوز رابط کاربری میخواید؟

      مقداد حدیدی بهمن ۱۶, ۱۳۹۰ ۱۰:۲۶ پاسخ دادن
  • بله دقیقا
    منتهی رابط کاربری جدید می خوام و از کامپوننت های مختلف که مربوط به قالب و اسکین هست نمی خوام استفاده کنم و همینطور هم از طرح پنجره ایی خود ویندوز (SE7EN , XP ,…)
    چون کامپوننت ها بعضی از مواقع مشکل ایجاد می کنند و طرح پیشفرض هم خیلی تکراری شده

    محمد جواد بهمن ۱۶, ۱۳۹۰ ۱۴:۲۹ پاسخ دادن
  • خسته نباشید
    بسیار مفید و کاربردی بود..
    پیروز باشید

    علی حاجیلویی بهمن ۱۶, ۱۳۹۰ ۱۵:۴۷ پاسخ دادن
  • آقا مقداد خیلی گلی حتما اسم شما رو در برنامه ذکر خواهم کرد

    محمد جواد بهمن ۱۶, ۱۳۹۰ ۱۶:۴۱ پاسخ دادن
  • سلام محشر بود.
    ولی نمیدونم چرا واسه من بعد از کشیدن اون خط های سفید وقتی میخواستم از پاک کن استفاده کنم به من اجازه پاک کردن نمیداد؟

    محمدامین بهمن ۱۸, ۱۳۹۰ ۰۴:۰۷ پاسخ دادن
    • لطف داری دوست من.
      در مورد مشکلت:
      * چون خطی که شما کشیدی با استفاده از ابزار Line Tool بوده، لایه ای که ایجاد میشه از نوع Shape خواهد بود.
      * برای رفع این مشکل شما باید روی لایه مورد نظر (لایه مربوط به خط سفید) کلیک راست کرده و سپس گزینه Rasterize Layer رو بزنید
      * حالا می تویند از ابزار پاک کن استفاده کنید
      * نتیجه رو به من اطلاع بدید

      مقداد حدیدی بهمن ۱۸, ۱۳۹۰ ۱۳:۴۷ پاسخ دادن
      • مرسی درست شد. دمت گرم

        محمدامین بهمن ۱۸, ۱۳۹۰ ۱۵:۰۵ پاسخ دادن
  • دمت گرم داداش
    میخوامت

    مسعود بهمن ۱۸, ۱۳۹۰ ۱۱:۳۳ پاسخ دادن
    • ممنون از اینکه مطالب رو پیگیری میکنی دوست من، خوشحال میشیم باز هم سر بزنید

      مقداد حدیدی بهمن ۱۸, ۱۳۹۰ ۱۳:۳۹ پاسخ دادن
  • سلام
    متشکرم از آموزش خوبتون
    امکانش هست طرح لایه باز PSD این آموزش رو هم قرار بدیدن
    مال من تقریبن به اون چه شما آموزش دادین شبیه نشد!
    مرسی

    حسین بهمن ۱۹, ۱۳۹۰ ۰۱:۲۶ پاسخ دادن
  • salam amuzeshetun khaili komakam kard misi amma amuzeshatun khaili kame :( age mishe lotfan amuzeshaye bishtari bezarin

    elham فروردین ۹, ۱۳۹۱ ۰۶:۲۹ پاسخ دادن
    • چشم…

      poufall فروردین ۹, ۱۳۹۱ ۰۷:۵۱ پاسخ دادن
    • با سلام و تشکر از همراهی تون!
      بله مدتی هست که فرصت نمیکنم، ولی در حال آماده سازی چند آموزش در همین زمینه هستم، سعی میکنم زودتر آماده شون کنم.

      مقداد حدیدی فروردین ۹, ۱۳۹۱ ۱۳:۳۱ پاسخ دادن
  • بسیار خوب ترجمه کردید
    سپاس

    علی فروردین ۱۰, ۱۳۹۱ ۱۵:۲۶ پاسخ دادن
  • با سلام
    من تونستم این طرح رو درست کنم ولی نمی دونم چطوری باید اون رو با کد بار گزاری کنم
    یاعلی….

    محمد علی خرداد ۱۱, ۱۳۹۱ ۱۹:۰۶ پاسخ دادن
    • بعد از طراحی با فتوشاپ باید کدنوسی کنید

      poufall خرداد ۱۱, ۱۳۹۱ ۲۰:۵۸ پاسخ دادن
  • اگه میشه یه آموزش هم بدید که چطوری میشه کد های جاوا اسکریپت رو داخل html قرار داد…

    محمد علی خرداد ۱۱, ۱۳۹۱ ۱۹:۰۹ پاسخ دادن
  • سلام خسته نباشید، من خیلى به طراحى علاقه دارم آیاگوشى من قابلیت اجراى طراحى رادارد؟
    مدل گوشىk800i
    باتشگر،منتظرجواب شماهستم.

    حسن خانزاده خرداد ۲۱, ۱۳۹۱ ۰۰:۰۹ پاسخ دادن
    • منظورتون طراحی با گوشیه؟! نه نمیشه مگه این که سیستم عامل قوی داشته باشه و برنامه فتوشاپ توش نصب باشه

      poufall خرداد ۲۱, ۱۳۹۱ ۱۰:۳۲ پاسخ دادن
  • سلام . ممنون از زحمتی که کشیدید ، مفید بود

    علم فردا خرداد ۲۶, ۱۳۹۱ ۱۱:۲۷ پاسخ دادن
  • سلام …
    خوشحال میشم آموزش بدین اینرو چطوری به سی اس اس تبدیل کنیم ! و منتظرش هم هستم …
    یاعلی …

    Mr.Mon$teR مرداد ۱۲, ۱۳۹۱ ۱۵:۳۳ پاسخ دادن
  • حتما دوست عزیز

    Meghdad Hadidi مرداد ۱۳, ۱۳۹۱ ۱۱:۲۵ پاسخ دادن
  • متشکرم

    غلامرضا پورحاجی مرداد ۲۵, ۱۳۹۱ ۱۷:۵۷ پاسخ دادن
  • مرسی خوب بود

    فقط یه چیزی وقتی قراره صفحه کش بیاد و مطالبش بیشتر بشه چه اتفاقی می افته؟

    احسان مهر ۵, ۱۳۹۱ ۰۰:۳۱ پاسخ دادن
    • خواهش میکنم دوست عزیز
      این مورد مربوط به زمانی میشه که قالب رو از psd برش زده و به html تبدیل میکنیم. وقتی ارتفاع ثابت به الِمان میانی صفحه ندیم، به صورت خودکار در صورت زیاد بودن مطلب، قالب کش میاد

      مقداد حدیدی مهر ۶, ۱۳۹۱ ۰۰:۱۵ پاسخ دادن
  • سلام زیادی سه بعدی هست هرچیزی به اندازش خوبه با تشکر نحوه حذف فوتر را هم یاد بدین

    مهدی مهر ۲۲, ۱۳۹۱ ۱۹:۴۰ پاسخ دادن
  • خیلی عالی بود

    کوزت آبان ۲, ۱۳۹۱ ۱۶:۲۵ پاسخ دادن
  • من دارم یک پوسته برای ورد پرس طراحی می کنم ولی هرچه سعی کردم و پوسته های دیگر رو نگاه کردم نتونستم Navigation Menus برای پوسته ام درست کنم. البته با استفاده از این http://codex.wordpress.org/Navigation_Menus تونستم منو رو بذارم ولی استایلشو نتونستم درست کنم.
    من از شما می خوام که بهم کمک کنید که منویی مثل منوی عکس زیر بسازم:
    #

    x1024 آذر ۱, ۱۳۹۱ ۰۴:۵۶ پاسخ دادن
  • مرسی واقعا عالی بود فقط عزیز مثلا اینو بخوام به وردپرس و . تبدیل کنم باید چیکار کنم؟اینم توضیح میدادی خوب

    ایزانلو دی ۱, ۱۳۹۱ ۱۶:۱۱ پاسخ دادن
  • ba salam va tashakor az zahamateton.♥
    ama mishe ke amozeshar o be sorat film ham bezarid? ke seda ham dashte bashe?!
    mamnoon ♥

    Touraj دی ۲۸, ۱۳۹۱ ۱۵:۵۸ پاسخ دادن
  • سلام
    بسیار عالی بود
    من زیاد یا فتوشاپ کار نکردم . اگر در یک اموزش دیگه یاد بدین که چطور قسمت های مختلف psd رو جدا کنیم و در html قرار بدیم ممنون میشم
    بیشتر برش دادن ها مهمه. اگر لطف کنید خیلی ها استفاده میکنن

    ممنون

    م.چ بهمن ۱۰, ۱۳۹۱ ۰۴:۴۳ پاسخ دادن
  • سلام ممنون
    ای کاش قالب رو تبدیل میکردی و آموزش رو به صورت pdf هم قرار می دادی
    به هر حال زحمت کشیذی

    محمد اسفند ۲۹, ۱۳۹۱ ۱۷:۳۰ پاسخ دادن
  • دستت طلا .
    مطمئم خیلی زمان صرف کردی .
    ولی عالی بود .

    داود تیر ۲۰, ۱۳۹۲ ۱۲:۲۲ پاسخ دادن
  • سلام آموزش عالی بود
    لطف کنید آموزش چگونگی تبدیل psd به قالب html رو توضیح بدید
    با تشکر

    مهتاب تیر ۲۸, ۱۳۹۲ ۱۹:۱۳ پاسخ دادن
  • مرسی واقعا قشنگ بود

    مرضیه مرداد ۶, ۱۳۹۲ ۲۳:۵۹ پاسخ دادن
  • خب تمام شد دیگه ؟ چجوری تبدیلش کنیم به اچ تی ام ال !!!!!!!!!!

    حجت مرداد ۲۴, ۱۳۹۲ ۱۰:۵۵ پاسخ دادن
    • آموزش تبدیل به html رو هم آماده خواهم کرد

      مقداد مرداد ۲۶, ۱۳۹۲ ۰۹:۰۵ پاسخ دادن
  • سلام آقا مقداد
    شما این آموزش ها رو از سایت های خارجی ترجمه می کنین ؟

    علیرضا مرداد ۲۵, ۱۳۹۲ ۰۰:۰۱ پاسخ دادن
    • سلام علیرضا، این آموزش ترجمه یکی از آموزشهای خارجیه، چطور؟

      مقداد مرداد ۲۶, ۱۳۹۲ ۰۹:۰۴ پاسخ دادن
  • حاجی ایول داری من یه مدت بود دنبال سایه انداختن بودم

    محمد آذر ۱۵, ۱۳۹۲ ۱۲:۵۷ پاسخ دادن
  • سلام آقا مقداد
    خیلی خوب بود من سعی می کنم بسازشم البته اگر بتونم.ممنون

    یاور خرداد ۱۰, ۱۳۹۳ ۱۸:۴۸ پاسخ دادن
  • خیلی عالی ممنون از شما اگهpdfهم برای همه اموزش هاتون بزارید عالی میشه

    saeed خرداد ۱۸, ۱۳۹۳ ۱۲:۴۳ پاسخ دادن
  • کارتون فوق العاده بود..سلامت و پایدار باشید.

    ندا آبان ۱۴, ۱۳۹۳ ۱۵:۳۳ پاسخ دادن
  • بسیار عالـــــــــــــــــــــــــــــــــــــی مرسی

    فاطمه آبان ۱۶, ۱۳۹۳ ۲۲:۵۷ پاسخ دادن
  • بسیار عالـــــــــــــــــــــــــــــــــــــی مرسی اگخ میشه ایمیلتون تو سایت بذارید

    فاطمه آبان ۱۶, ۱۳۹۳ ۲۲:۵۸ پاسخ دادن
  • خیلی عالی میگم فایل این رو نمیشه برای دانلود بزارین استاد ساخت وبسایت رو توی فتوشاپ ازمون خواسته

    زهرا آذر ۱۴, ۱۳۹۳ ۱۶:۴۶ پاسخ دادن
  • واقعا به درد بخور بود.مرسی

    مهتاب فروردین ۲۳, ۱۳۹۴ ۰۰:۰۵ پاسخ دادن
  • سلام مشه راهنمایی کنید من تازه کارم تو فتوشاپ .الان این قالب رو چجوری به کدای html تبدیل کنم

    behnam خرداد ۲۲, ۱۳۹۴ ۰۹:۵۷ پاسخ دادن
  • سلام مشه راهنمایی کنید من تازه کارم تو فتوشاپ .الان این قالب رو چجوری به کدای html تبدیل کنم میشه راهنمایی کنید

    behnam7222 خرداد ۲۲, ۱۳۹۴ ۰۹:۵۸ پاسخ دادن
  • اگه امکان داره ادمین جان جوابو برام ایمیل کن

    behnam7222 خرداد ۲۲, ۱۳۹۴ ۰۹:۵۹ پاسخ دادن
  • سلام من نیاز دارم طراحی سایت رو با همین فتوشاپ از طریق فیلم آموزشی ارائه بدین که بهتر متوجه شم ممنون

    سلند تیر ۴, ۱۳۹۴ ۱۹:۴۲ پاسخ دادن
  • چه جوری میشه قالب رو که ساختیم به html و css3 تبدیل کرد؟

    Javad مرداد ۲۵, ۱۳۹۴ ۲۲:۱۸ پاسخ دادن

با نظرات و پیشنهادات خود تمپ ها را همراهی کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دسته بندی ها
منو