تخفیف ویژه

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

دسته بندی: گرافیک
زمان مطالعه: 5 دقیقه
۱۳ تیر ۱۳۹۱

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

https://7learn.com/a/msm/webdesign/photoshop/0.png

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

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

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

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

https://7learn.com/a/msm/webdesign/photoshop/1.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/2.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/3.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/4.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/5.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/6.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/7.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/8.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/9.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/10.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/11.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/12.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/khat.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/13.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/14.jpg

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

19-  حالا شکلی همانند شماره یک عکس زیر در چپ کار خود ایجاد کنید.

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

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

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

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

https://7learn.com/a/msm/webdesign/photoshop/15.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/16.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/17.jpg 26-  پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

https://7learn.com/a/msm/webdesign/photoshop/18.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/19.jpg

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

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

https://7learn.com/a/msm/webdesign/photoshop/20.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/twitter.jpg

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

https://7learn.com/a/msm/webdesign/photoshop/demo.png

با تشکر از تمپ ها

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

نظرات کاربران

babak khorsand

منم سوال سینا رو دارم ممنون اگه جواب بدین

سینا خرسند

سلام ممنون از بابت آموزش طراحی قالب سه بعدی تون واقعا به من کمک کردین.
فقط من یک مشکل دارم چجوری این قالب سه بعدی مو sliceکنم
طوری کهheaderو…ازهم جدا باشند
ممنون میشم راهنمایی هاتونو برام ایمیل کنین

ممنون ازسایت جامع تون

برنامه نویس

ممنون اموزش جالبی بود

nedi

سلام به دوستان سون لرنی،
دست همتون درد نکنه.
برای تبدیل فایلهای PSD به HTML می تونید از این کتاب استفاده کنید:
خودآموز طراحی وب به صورت عملی
نویسنده: حامد تکمیل

http://veyq.ir/book/id/13218/%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF-%DA%A9%D8%AA%D8%A7%D8%A8-%D8%AE%D9%88%D8%AF%D8%A2%D9%85%D9%88%D8%B2-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-%D8%A8%D9%87-%D8%B5%D9%88%D8%B1%D8%AA-%D8%B9%D9%85%D9%84%DB%8C

salamat595

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

لقمان آوند

ان شاءالله در آینده چنین اموزشی خواهیم داشت .

salamat595

با سلام و خسته نباشید وتشکر از این مطلب مفید
راستش خیلی دنبال آموزش طراحی قالب در اینترنت گشتم متاسفانه چیزی پیدا نکردم که بتونه مفید کمک کنه
حالا سوال من چطور میتونم ستون بندی قالب رو انجام بدم ؟ چطور میتونم عکس برای زمینه و عکس برای هدر قالب بذارم و سوال آخر چطور میتونم ستون های مثلا لینک مفید یا لینک دوستان و غیره رو یه مقدار شکل و شمایل بدم مر30

لقمان آوند

برای ستون بندی می تونی از جداول و یا تگ div استفاده کنی …

Sohayb

باسلام
ببخشید این حرف رو میزنم ولی مجبورم:
بنده تمام نظرات این پستو خوندم همشون آموزش تبدیل این قالب در فتوشاپ به کد html یا هر کدی دیگر رو میخواستن که فک کنم یا شما ازش سر در نمیارید یا اینقدر ارزش واسه نظرات پستاتون قائل میشید یا
اینکه خــــــــــــــــــــــــــــــــــــــــیلی بی غیرت و تنبل هستید
ممنون.

محمدسینا معراجیان

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

Sohayb

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

لقمان آوند

جناب Sohayb
نحوه انتقاد شما اصلا درست نیست . به نظر شما بی خود و بی جهت به کسی بی غیرت گفتن توهین نیست ؟ اصلا مفهوم بی غیرت بودنو میدونی شما ؟ می دونی به کی میگن بی غیرت ؟
اگر به پست ندادن معترض هستید بگید . دیگه چه معنی داره که اینطور بد و بیراه بگید !
سون لرن در چند سالی که فعالیت داشته همواره هدف اصلیش پاسخگویی به سوالات کاربرا بوده . اون هم بدون مزد و منت . شما برید توی سایت های ایرانی بگردید ، کدوم یکی هست که به این شکل تک تک سوالات بازدید کننده ها رو پاسخ بده ؟ امسال بچه های تیم سون لرن مشغول هستند ، من خودم که درگیر پایان نامه ام هستم ، سینا برا کنکور میخونه ، سجاد هم مشکلاتی براش پیش اومده . ولی در عین حال روزانه بیش از 10 سوال زمانگیر کاربرها در سایت رو پاسخ میدیم . بعضی وقتا 1 ساعت وقت گذاشتم و گشتم تا جواب سوال خاصی رو بدم … بقیه ی بچه های سون لرن هم همینطور .
در مورد نحوه ارسال مطلب در سون لرن هم بگم که طبق برنامه است . دوستان گفتن آموزش ویدیویی ، گذاشتیم . گفتن html ، گذاشتیم . گفتن css و php گذاشتیم . همه رو هم مجموعه ای و سری وار گذاشتیم . که کلی هم زمان برده از ما . آموزش تبدیل psd به وب نیاز به چند مورد پیشنیاز داره و باید در چند قسمت آموزش داده بشه . در برنامه ی اینده ی ما هست . ولی فعلا کسانی که آموزش های دیگه رو خواستند بیشترند و ارسال مطالب بر اساس اولویت بندی انجام میشه .
پس اگر صبر کنید ، به مقصودتون خواهید رسید .
ضمنا منابع آموزشی در این مورد زیاد هستند . کافیه توی گوگل با کیورد های psd to html tutorial و امثال این سرچ کنید .
براتون ارزوی توفیق دارم و بهتون پیشنهاد می کنم که قبل از اظهار نظر و انتقاد در مورد اون چیزی که می گید و می نویسید کمی تامل کنید !

hajihasani

سلام ببخشید اگه ممکنه جلسات 2و 3و 4 رو هم اگه موجود هست لینکش رو روی سایت بذارین چون من فقظ جلسات 1 و 5 رو دیدم. با تشکر

محمدسینا معراجیان

https://7learn.com/tutorials/theme-design-tuts-part1-structure
https://7learn.com/tutorials/theme-design-tuts-part2-html-tags1
https://7learn.com/tutorials/theme-design-tuts-part3-html-tags2
https://7learn.com/tutorials/theme-design-tuts-part4-html-tags3
https://7learn.com/tutorials/theme-design-tuts-part5-photoshop
خدمت شما

احسان

سلام و عرض خسته نباشید خدمت شما!
یه سوال ازتون دارم اونم اینه که بعد از طراحی قالب مورد نظر در فتوشاپ اون رو چطوری به فایل html تبدیل کنم؟؟؟یا به قالب ورد پرس !
برای مثال:من این فایل psd رو دانلود میکنم و میخوام تو وردپرس یا بلاگ اسپوت استفاده کنم،چطوری باید تبدیلش کنم به کد؟؟؟
ممنون میشم اگه پاسخ بدین
باتشکر از سایت پر محتواتون

لقمان آوند

سلام دوست عزیز
لطفا سوالات رو در انجمن سایت بپرسید .

somayeh

salam . mrc az amoozeshatoon, man ketabi rajebe tarahi web khoondam va bazi az chizayi ke migido baladam baziam balad nistam. rastesh gij shodam nemidoonam che chizayi moonde ke bayad yad begiram ya chi balad nistam , khaheshan ye ketabe amoozeshe tarahi web behem moarefi konid ke aliiiiii bashe , akharesh bashe . ke age khastam tarahi web kar konam motmaen basham ke fool baladam .ketabi ke az sefr bashe ta akhar . lotf konid rahnamayim konid , age javabo be email am befrestid binahayat sepasgozaram.([email protected]

لقمان آوند

سلام
برای یاد گرفتن طراحی وب باید چند زبون رو یاد بگیری . html ، جاوااسکریپت ، css ، php و …
برای کدومشون کتاب می خوای ؟

somayeh

salam,dar hameye in zamineha ke goftid behtarin va kameltarin ketabe amoozeshiro moarefi konid , chon mikham fool yad begiram , pishapish samimane tashakor mikonam .

لقمان آوند

سلام
من کتابهای فارسی رو نمی شناسم . لذا کتابهای زیر رو معرفی می کنم :
Learning Web Design 2nd Edition by Jennifer Niederst
HTML for the World Wide Web by Elizabeth Castro
Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

PHP Solutions: Dynamic Web Design Made Easy
Beginning PHP and MySQL: From Novice to Professional (Expert's Voice in Web Development) by W. Jason Gilmore
PHP Cookbook

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :