نظرسنجی: نظر شما در مورد این موضوع جیست؟!
این نظرسنجی بسته شده است.
عالی 100.00% 5 100.00%
خوب 0% 0 0%
متوسط 0% 0 0%
ضعیف 0% 0 0%
در کل 5 رأی 100%
*شما به این گزینه رأی داده‌اید. [نمایش نتایج]

موضوع بسته شده است 
 
امتیاز موضوع:
  • 6 رأی - میانگین امیتازات: 4.67
  • 1
  • 2
  • 3
  • 4
  • 5
طراحی قالب یک سایت در فتوشاپ به زبان ساده(آموزش)
03-30-2012, 03:08 AM (آخرین ویرایش در این ارسال: 04-01-2012 01:31 AM، توسط Cna FP.)
ارسال: #1
طراحی قالب یک سایت در فتوشاپ به زبان ساده(آموزش)
0
0
سلام عزیزان
با توجه به تقاضای زیاد دانشجویان در زمینه آموزش طراحی سایت, تصمیم گرفتم به نحوی تجربیات خودم رو در این زمینه بهتون آموزش بدم. خجسته اگه خدا بخواد نحوه تبدیل این قالب به HTML با استفاده از CSS و حتی نحوه اضافه کردن افکت های زیبای JQuery در سایتتون رو هم در آینده آموزش میدم... طلبکار

در این آموزش من قصد دارم ابتدا با استفاده از نرم افزار فتوشاپ, قالب یک سایت رو به تدریج بهتون یاد بدم و بعد از اون شما میتونید با استفاده از نرم افزار قدرتمندی مثل ویژوال استادیو کدهای HTML رو پیاده کرده و سایت رو راه اندازی کنید. موفق
امیدوارم که با همراهی شما بتونیم یک سایت کوچک و جامع رو راه بندازیم...
پیشنهادات شما هم با کمال میل مورد قبول اینجانب است! بی خیال

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




فایل‌(های) پیوست شده بندانگشتی (ها)
   

یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط admin ، تیم پشتیبانی ، afshin ، ghazal ، mitra ، ghanei ، a_n ، marzieh
03-31-2012, 05:55 AM (آخرین ویرایش در این ارسال: 04-01-2012 01:32 AM، توسط Cna FP.)
ارسال: #2
Photo آموزش طراحی قالب یک سایت در فتوشاپ به زبان ساده - جلسه اول
1
0
جلسه اول: طراحی هدر و فوتر سایت

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

در اولین قدم لازم است که شما نرم افزار فتوشاپ CS5 یا ورژن های قدیمی تر آن را باز کرده و یک سند جدید در ابعاد Width = 1400 و Height = 1500 پیکسل ایجاد کنید.

بعد از این شما باید در اولین اقدام قفل لایه پس زمینه را باز کنید. برای این منظور دوبار بر روی لایه Background کلیک کرده و سپس یک لایه جدید بر روی این لایه ایجاد کرده و لایه Background را پاک کنید.
حال باید برای تنظیم خط کش ها اقدام کنیم. برای این کار از منوی View گزینه New Guide را انتخاب کرده و سه مقدار 54پیکسل, 95پیکسل و 1405 پیکسل در حالت Horizontal(افقی) و همچنین دومقدار 200پیکسل و 1200پیکسل در حالت Vertical(عمودی) ایجاد کنید. دقت کنید که برای هر مقدار باید مجددا به منوی View رفته و مقادیر جدید را اعمال کنید.
هم اکنون شما باید همچنین صفحه ای داشته باشید:

[تصویر:  3yjph.jpg]


اکنون در لایه جدید مستطیلی در ابعاد width = 1400 و Height = 265 و با استفاده از ابزار Rectangular marquee tool در بالاترین مکان سایت, یعنی هدر قرار داده و به آن رنگ 3b2c25# بدهید(با استفاده از ابزار paint bucket tool بعد از انتخاب رنگ گفته شده). برای انتخاب دقیق میتوانید از نوار ابزار حالت Style را به Fixed size تغییر داده و برای پهنا و ارتفاع, مقادیر گفته شده را وارد کنید. [تصویر:  3ykwf.jpg] هم اکنون اگر در نقطه ای خارج از صفحه کلیک کنید میبینید که مستطیل حاضر و آماده است و شما کافی است آنرا تغییر مکان دهید. اگر دقت کرده باشید فتوشاپ به صورت خودکار یا به اصطلاح Snap to دقیقا بر روی اندازه ای که با Guide مشخص کرده اید پرش میکند.

حال لایه دیگری بر روی این لایه ایجاد کرده و مجددا با استفاده از همین ابزار (Rectangular marquee tool) یک مستطیل به ابعاد 800×1000 پیکسل و از نوار راهنمای افقی دوم رسم کنید. در واقع بین دو خط راهنما و به ارتفاع 800 پیکسل. به این شکل رنگ مشکی (FFFFFF#) را اعمال کرده و شفافیت (opacity) لایه را به 20درصد کاهش دهید.

اکنون لایه جدیدی ایجاد کرده و رنگ مشکی را برای پیش زمینه انتخاب کنید. مستطیلی به ابعاد 54×1400 پیکسل ایجاد کرده و در بالاترین قسمت صفحه قرار داده, به آن رنگ مشکی را اعمال کنید و opacity لایه را به 40 درصد کاهش دهید.

تا اینجا شما باید چنین هدری داشته باشید:

[تصویر:  3ym1c.jpg]


**********************************

اکنون به قسمت فوتر سایت میرسیم.

لایه جدیدی ایجاد کرده و مستطیلی در ابعاد 95×1400 پیکسل ایجاد کرده و به آن رنگ 3b2c25# بدهید.
مجددا لایه جدیدی درست کنید و اینبار مستطیلی در ابعاد 95×349 پیکسل و از خط راهنمای عمودی چپ (اولین خط از سمت چپ) ایجاد کرده و همان رنگ قبلی را به آن داده و opacity لایه را نیز به 40درصد برسانید. همچنین blending mode را نیز به Multiply تغییر دهید.
بار دیگر لایه جدیدی ایجاد کرده و مستطیلی در ابعاد 95×651 پیکسل, اینبار از خط راهنمای عمودی سمت راست رسم کرده و باز هم همان رنگ قبلی (3b2c25#) را به آن داده و opacity لایه را نیز به 20 درصد برسانید. blending mode را نیز به Multiply تغییر دهید.
تا اینجا شما باید چنین فوتری داشته باشید:

[تصویر:  3ylxx.jpg]

و همچنین شکل نهایی سایت:

[تصویر:  3ym3d.jpg]

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






فایل‌(های) پیوست شده
.rar  LightBox.rar (اندازه: 8 KB / تعداد دفعات دریافت: 75)

یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط تیم پشتیبانی ، admin ، Sara.A ، s.z ، asieh ، pooria ، afshin ، ghazal ، mitra ، jahani ، a_n
04-01-2012, 12:58 AM
ارسال: #3
RE: آموزش طراحی قالب یک سایت در فتوشاپ به زبان ساده
1
0
این تاپیک توسط استارتر (Cna FP ) به روز می شود.
سوالات مرتبط با این موضوع را در این تاپیک مطرح نمایید:
http://www.ecg-pnum.com/forum/showthread.php?tid=65

لطفا قوانین مطالعه گردد.

با مطالعه قوانین و رعایت آن ها از این محیط علمی لذت ببریم.... «کلیک نمایید»...
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط Cna FP ، تیم پشتیبانی ، afshin
04-01-2012, 01:31 AM (آخرین ویرایش در این ارسال: 04-01-2012 01:45 AM، توسط Cna FP.)
ارسال: #4
Photo آموزش طراحی قالب یک سایت در فتوشاپ به زبان ساده - جلسه دوم
1
0
جلسه دوم: طراحی پشت زمینه, منو و تکمیل سایت

با سلام
در این جلسه به مباحث بعدی طراحی قالب میپردازیم.

ابتدا فایل فتوشاپی را که ذخیره کرده اید باز کرده و آنها را دسته بندی کنید تا مدیریت آنها آسان تر شود. به این صورت که یک گروه جدید ایجاد کنید و نام آن را به Header تغییر دهید. در این گروه لایه های 1 تا 3 را قرار دهید. گروه دیگری نیز درست کرده و نام آن را به Footer تغییر دهید و لایه های 4 تا 6 را در آن قرار دهید. دقت کنید که گروه فوتر باید در بالای گروه هدر باشد.
اکنون گروه دیگری تشکیل داده و نام آن را به Back تغییر دهید و آن را به بالای گروه Header و زیر گروه Footer انتقال دهید.

[تصویر:  3ywzw.jpg]
در این گروه لایه جدیدی ایجاد کنید و با استفاده از ابزار Rectangular marquee tool, مستطیلی از نوار راهنمای افقی دومی تا انتهای صفحه رسم کنید. در واقع مستطیلی در ابعاد 1235×1400 پیکسل. سپس رنگی معادل #eeebe9 به آن بدهید. برای اعمال رنگ میتوانید از کلیدهای ترکیبی alt+delete در حالتی که مستطیل در حالت انتخاب است نیز استفاده کنید. به این ترتیب رنگی که در قسمت پیش زمینه قرار دارد به محدوده انتخاب شده اعمال میشود.

مجددا لایه جدیدی ایحاد کرده بر روی لایه قبلی ایجاد کنید و اینبار مستطیلی در ابعاد 138×1400, از خط راهنمای افقی دوم رسم کنید و به این مستطیل رنگ دلخواه خود را بدهید؛ چون با اعمال افکت این رنگ تغییر میکند.
اکنون بر روی همین لایه دوبار کلیک کنید و از پنجره Layer style گزینه Gradient overlay را انتخاب کنید و به آن مقادیر زیر را بدهید:

[تصویر:  3z137.jpg]

مجددا از همین لایه بوسیله راست کلیک روی آن و انتخاب Duplicate layer یک کپی گرفته و opacity آن را به 50درصد کاهش دهید. همچنین Blend mode را به Multiply تغییر دهید. مشابه شکل زیر:

[تصویر:  3ywjh.jpg]

اکنون در یک لایه جدید مستطیلی از خط راهنمای افقی دوم تا انتهای صفحه و بین دو خط راهنمای عمودی, یعنی در ابعاد 1235×1000 پیکسل رسم کنید و به آن رنگ سفید (#FFFFFF) بدهید. سپس opacity لایه را نیز به 50درصد برسانید.

در اینجا کار طراحی پشت زمینه به پایان رسید. شما باید اکنون چنین شکلی داشته باشید:

[تصویر:  3ywmc.jpg]

******************************************

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

برای تغییرات نیاز به چند خط راهنما داریم. از منوی View-> New guide را انتخاب کرده و دو خط با مقادیر 1164پیکسل برای حالت عمودی و 299پیکسل برای حالت افقی ایجاد کنید.
سپس یک گروه جدید به نام Content در بالای گروه Back ایجاد کرده و یک لایه جدید در آن قرار دهید. در این لایه یک مستطیل در ابعاد 411×250 پیکسل رسم کنید و رنگ #ebe7e4 را به آن بدهید. این مستطیل باید از تقاطع دو خط راهنمایی که اکنون ساخته اید رسم شود. بعد از آن با استفاده از ابزار Polygonal lasso tool یک مثلث کوچک در زیر این مستطیل به عنوان نقل قول اضافه کنید. دقت کنید که در نوار بالا حالت Add to selection انتخاب شده باشد. مججدا به این مثلت نیز همین رنگ را بدهید. میتوانید برای رسم دقیق تر, حین استفاده از این ابزار کلید Shift را نیز پایین نگه دارید تا یک خط راست رسم شود. به این صورت:

[تصویر:  3z1w8.jpg]

باکس طراحی شده در واقع توضیحاتی به صورت نقل قول از یک نویسنده است. میتوانید با ابزار Horizontal type tool متن مورد نظر را در باکس و در زیر علامت نقل قول نیز نام نویسنده مطلب را بنویسید. در سمت چپ نیز شما میتوانید با آیکونها و متن مورد نظر این را تکمیل کنید. میتوانید با استفاده از یک خط راهنمای عمودی در 549 پیکسلی, به صورت مرتب و زیر هم آیتم های خود را اضافه کنید.

در آینده قصد داریم یکی از افکت های جی کوئری را نیز به سایت اعمال کنیم. یکی از این افکت ها, نمایش چند تصویر به صورت پشت سر هم است که انتخاب هرکدام باعث میشود تصویر به صورت fade-in ظاهر شود. برای این منظور نیاز است که محلی برای قرارگیری تصاویر در نظر بگیریم.

برای این منظور, یک گروه جدید در داخل همین گروه (content) ایجاد کرده و نام آن را به Recent work تغییر دهید. میتوانید عنوانی به همین نام در مکانی که گفته میشود قرار دهید. سپس یک لایه جدید در آن ایجاد کنید و یک مستطیل به ابعاد 315×615 پیکسل, یعنی دقیقا بین دوخط راهنمایی که جدیدا ایجاد کرده اید, رسم کنید. رنگ این مستطیل نیز سفید باشد. همچنان که این مستطیل در حالت انتخاب قرار دارد یک لایه در بالای این لایه ایجاد کرده, از منوی Select->Modify->contract را انتخاب کنید و مقدار 13پیکسل را به آن بدهید. سپس رنگ #dadada را به آن اعمال کنید. چون رنگ پشت این لایه, یعنی مستطیل لایه قبلی سفید است شما چیزی نمیبینید. برای دادن یک Border به این مستطیل (مستطیل بزرگ) دوبار بر روی این لایه کلیک کنید و تنظیمات شکل زیر را بدهید:

[تصویر:  3z3z4.jpg]

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

برای رسم دایره برای اعداد بالای تصویر نیز, 4 لایه جدید در گروه content ایجاد کرده و در هر لایه با استفاده از ابزار elliptical marquee tool دایره ای کوچک رسم کرده و سپس رنگ دایره ها را نیز به #6c535a تغییر دهید. دقت کنید که رنگ دایره اول چون به صورت انتخاب شده است به رنگ #a37a7e است. سپس در داخل هر دایره اعداد 1 تا 4 را متناسب با اندازه دایره و با رنگ سفید تایپ کنید. برای رسم دقیق دایره میتوانید حین رسم آن کلید Shift را نیز پایین نگه دارید.
شکل شما باید اینگونه باشد:

[تصویر:  3z8dy.jpg]

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

در شکل زیر تصویر نهایی را میتوانید ملاحظه کنید:

[تصویر:  3z9rt.jpg]








فایل‌(های) پیوست شده
.rar  LightBox.rar (اندازه: 196.13 KB / تعداد دفعات دریافت: 110)

یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط admin ، Sara.A ، تیم پشتیبانی ، pooria ، afshin ، kiantamar ، ghazal ، jahani ، z-e ، mitra ، pjazebeh ، belaned ، a_n
04-01-2012, 03:20 AM
ارسال: #5
RE: آموزش طراحی قالب یک سایت در فتوشاپ به زبان ساده - جلسه دوم
1
0
(04-01-2012 03:10 AM)Sara.A نوشته شده توسط:  لطفا اهسته تر پیش برید تامن هم بتونم بهتون برسم.هنوز جلسه ی اولم.
در این تاپیک پست ندهید.
پست های خود را در قسمت رفع اشکال بیان کنید.
لطفا قوانین تالار را مطالعه نمایید.
در صورت تکرار اخطار می گیرید.

با مطالعه قوانین و رعایت آن ها از این محیط علمی لذت ببریم.... «کلیک نمایید»...
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط Cna FP ، Sara.A ، تیم پشتیبانی
04-01-2012, 03:21 AM
ارسال: #6
RE: طراحی قالب یک سایت در فتوشاپ به زبان ساده(آموزش)
0
0
بسیار متشکر

آموزش به اتمام رسیده است.

قفل می شود.
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط Cna FP ، تیم پشتیبانی ، afshin
موضوع بسته شده است 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  درباره مراحل ابتدایی طراحی سایت چه میدانید peymans 0 2,697 08-26-2016 11:31 PM
آخرین ارسال: peymans
  آموزش گام به گام ساخت سايت در ASP.NET Saeede azn 0 6,198 09-04-2013 07:08 PM
آخرین ارسال: Saeede azn
Star آموزش ساخت یک منوی پایین افتادنی چندگانه elias.f 19 17,332 12-24-2012 07:07 AM
آخرین ارسال: elias.f
  افزایش بازدیدکنندگان سایت hostjoomir 1 2,167 10-23-2012 04:15 AM
آخرین ارسال: ghanei
Question استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: رفع اشکال :. Cna FP 7 6,643 07-17-2012 04:07 AM
آخرین ارسال: Cna FP
Star طراحی یک وب سایت ساده (آموزش) تیم پشتیبانی 6 9,494 04-20-2012 04:37 AM
آخرین ارسال: تیم پشتیبانی
  چگونه طراح سایت قابلی شویم؟! Cna FP 0 2,138 04-19-2012 12:25 AM
آخرین ارسال: Cna FP
Lightbulb استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :. Cna FP 4 6,047 04-10-2012 03:57 AM
آخرین ارسال: Cna FP
  طراحی یک وب سایت ساده (رفع اشکال) تیم پشتیبانی 6 6,207 04-09-2012 06:25 PM
آخرین ارسال: jahani
  طراحی قالب یک سایت در فتوشاپ به زبان ساده(رفع اشکال) nasrin 3 4,565 04-01-2012 01:22 AM
آخرین ارسال: Cna FP

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان