بازدید امروز :80
بازدید دیروز :114
کل بازدید :103065
تعداد کل یاداشته ها : 526
04/4/20
1:25 ع
قدم اول:
در این سلسله آموزش شما یاد خواهید گرفت که چگونه یک وب سایت را در فتوشاپ طراحی کنید.
در این آموزش فرض بر این است که شما تا حدودی به فتوشاپ آشنایی داشته با لایه ها و ماسک آشنایی دارید.
در انتهای آموزش شما قادر خواهید بود که سایتی به شکل زیر داشته باشید:
قدم دوم:
اجاز دهید تا کار را آغار کنیم.قبل از هرچیز شما به یک طرح رنگ داشته باشید. این یک اشتاه بزرگی است که رنگها را بطور تصادفی انتخاب کنید و ببینید کدام یک به کار شما بیشتر می نشیند. دو برنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers می باشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانید رنگهای مورد علاقه خود را انتخاب کنید. من با رنگ آبی تک رنگ کار خواهم کرد که به حقیقت یکی از رنگهای مورد استفاده در بسیاری از صفحات وب می باشد.
قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن دارید. در فتوشاپ یک فایل جدید باز کنید. اندازه آن باید 800 در 800 باشد. بر اساس استاندارهای وب صفحات اینترنتی نباید بزرگتر از 770 پیکسل عرض داشته باشند چرا که هنوز بسیاری از کاربران از رزولوشن 800 در 600 استفاده میکنند. این فایل با عرض 800 پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.
قدم چهارم :
حال که شما فایل خود را آماده کرده اید نیاز به خطوط راهنما دارید. ( در نظر داشته باشید این خطوط راهنما بر اساس سایتی است که می خواهید در انتها داشته باشید و ما بر اساس شکل فوق این خطوط را ترسیم میکنیم.)
این خطوط به شما کمک می کنند تا تمام اجزا سایت شما در محل درست خود قرار گرفته باشند.
برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر 15, 25, 175, 185, 215, 225, 700, 710, 775, 785 و guide های عمودی در 15, 25, 275, 775, 785 ایجاد کنید. مطمئن شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتی شما کار را تمام کرده باشید شکلی شبیه به شکل زیر خواهید داشت.
قدم پنجم :
خوب من برای هر قسمت این صفحه وب یک گروه لایه ها تشکیل می دهم.پیشنهاد می کنم شما هم برای مرتب بودن کار این کار را انجام دهید. یک گروه لایه جدید با نام بکگراند تشکیل دهید. شما باید یک لایه جدید تشکیل دهید و با هر رنگی که مایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگ استفاده کردم 0000FF) چون ما بعدا آن را به گرادیانت تغیر میدهیم. به تنظیمات زیر رفته و مقادیر را انتخاب کنید.
blending option> Gradiaent Overlay
دقت کنید دقیقا عمودی باشد تا به مشکل برنخورید
در این سلسله آموزش شما یاد خواهید گرفت که چگونه یک وب سایت را در فتوشاپ طراحی کنید.
در این آموزش فرض بر این است که شما تا حدودی به فتوشاپ آشنایی داشته با لایه ها و ماسک آشنایی دارید.
در انتهای آموزش شما قادر خواهید بود که سایتی به شکل زیر داشته باشید:
قدم دوم:
اجاز دهید تا کار را آغار کنیم.قبل از هرچیز شما به یک طرح رنگ داشته باشید. این یک اشتاه بزرگی است که رنگها را بطور تصادفی انتخاب کنید و ببینید کدام یک به کار شما بیشتر می نشیند. دو برنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers می باشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانید رنگهای مورد علاقه خود را انتخاب کنید. من با رنگ آبی تک رنگ کار خواهم کرد که به حقیقت یکی از رنگهای مورد استفاده در بسیاری از صفحات وب می باشد.
قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن دارید. در فتوشاپ یک فایل جدید باز کنید. اندازه آن باید 800 در 800 باشد. بر اساس استاندارهای وب صفحات اینترنتی نباید بزرگتر از 770 پیکسل عرض داشته باشند چرا که هنوز بسیاری از کاربران از رزولوشن 800 در 600 استفاده میکنند. این فایل با عرض 800 پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.
قدم چهارم :
حال که شما فایل خود را آماده کرده اید نیاز به خطوط راهنما دارید. ( در نظر داشته باشید این خطوط راهنما بر اساس سایتی است که می خواهید در انتها داشته باشید و ما بر اساس شکل فوق این خطوط را ترسیم میکنیم.)
این خطوط به شما کمک می کنند تا تمام اجزا سایت شما در محل درست خود قرار گرفته باشند.
برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر 15, 25, 175, 185, 215, 225, 700, 710, 775, 785 و guide های عمودی در 15, 25, 275, 775, 785 ایجاد کنید. مطمئن شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتی شما کار را تمام کرده باشید شکلی شبیه به شکل زیر خواهید داشت.
قدم پنجم :
خوب من برای هر قسمت این صفحه وب یک گروه لایه ها تشکیل می دهم.پیشنهاد می کنم شما هم برای مرتب بودن کار این کار را انجام دهید. یک گروه لایه جدید با نام بکگراند تشکیل دهید. شما باید یک لایه جدید تشکیل دهید و با هر رنگی که مایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگ استفاده کردم 0000FF) چون ما بعدا آن را به گرادیانت تغیر میدهیم. به تنظیمات زیر رفته و مقادیر را انتخاب کنید.
blending option> Gradiaent Overlay
دقت کنید دقیقا عمودی باشد تا به مشکل برنخورید
درس دوم
قدم ششم:
حالا وقت آن است که کانتینر را شروع کنیم. کانتینر لایه ای است که همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد (Rounded Rectangle Tool )را انتخاب کنید. ( با shortcut U ) مقدار شعاع را از منوی بالا هر مقدار که مایلید می توانید اختیار کنید. هر چه عدد بالاتر باشد قوس بیشتری خواهید داشت من Radius را برابر 15 انتخاب میکنم. هر رنگی را که مایلید صفحه وب شما داشته باشد را انتخاب کنید. من رنگ سفید تیره را انتخاب کرده ام. سپس از بیرونی ترین خطوط راهنما شروع به ترسیم مستطیل بکنید. اگر شما همه مراحل قبل را درست انجام داده باشید به طور اتوماتیک این مستطیل به خطوط راهنما خواهد چسبید (snap) می توانید از بافتها و فیلترهای مختلفی روی کار استفاده کنید تا شکل جالبتری داشته باشید. این آموزش به نحوه ساختن این فیلترها نخواهد پرداخت.( من از فیلتر rough Pastels استفاده کردم با کمی افکت)
من چیزی شبیه به شکل زیر تهیه کرده ام.
قدم هفتم:
حال قسمت Header سایت را آماده میکنیم. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد را دوباره انتخاب کنید. این بار شعاع 7 را انتخاب کرده ام. مانند شکل یک مستطیل می کشیم و افکت inner shadow با مقدار Distance صفر و opicity پایین را به آن میدهیم فعلا چون رنگ آن مشکی است این تغییرات شاید دیده نشود. ولی فعلا مهم نیست. رنگ بعدا تغییر میکند.باید شکلی شبیه به زیر داشته باشید
مرحله هشتم:
حالا از این لایه یک کپی تهیه کنید. سپس با گرفتن کلید Alt و کلیک بین دو لایه ( لایه اصلی و لایه کپی شده ) یک clipping mask اضافه کنید. سپس آن را رنگ کنید . من یک رنگ آبی تیره انتخاب کردم و سپس افکت گرادیانت به آن دادم همانطور که در لایه بکرگراند همچنین کاری را انجام دادید. نتیجه کار چیزی شبیه به شکل زیر باید ساخته باشید:
قدم نهم:
حالا شما باید عکسی که به عنوان نماد کار شما است رو انتخاب کنید. البته این عکس نباید لوگو شما باشه. اگر در زمینه هوستینگ کار مکینید عکس یک سرور اگر در زمینه وب کار مکیند یه طرح از وب و یا اگر فروشنده چیزی هستید عکسی از محصولات خودتون می تونه گزینه مناسبی باشه. من سرستون تخت جمشید رو انتخاب کردم ( فقط برای قشنگی). این لایه جدید را بالای لایه مرحله قبل بگذارید و آن را به لایه قبلی clip کنید. (گرفتن alt و کلیک بین دو لایه)
بهتره اینجا کار این clip masking رو هم توضیح بدم. اگر لایه بالایی شما بزرگتر از لایه زیری باشه لایه جدید در اندازه لایه زیری محدود میشه. برای اینکه بهتر درک کنید یه لایه که عرضش از header شما بزرگتره انتخاب کنید و سپس اونو clip کنید تا منظورمه کامل بفهمین.
باید حالا چیزی شبیه به شکل زیر داشته باشید:
قدم ششم:
حالا وقت آن است که کانتینر را شروع کنیم. کانتینر لایه ای است که همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد (Rounded Rectangle Tool )را انتخاب کنید. ( با shortcut U ) مقدار شعاع را از منوی بالا هر مقدار که مایلید می توانید اختیار کنید. هر چه عدد بالاتر باشد قوس بیشتری خواهید داشت من Radius را برابر 15 انتخاب میکنم. هر رنگی را که مایلید صفحه وب شما داشته باشد را انتخاب کنید. من رنگ سفید تیره را انتخاب کرده ام. سپس از بیرونی ترین خطوط راهنما شروع به ترسیم مستطیل بکنید. اگر شما همه مراحل قبل را درست انجام داده باشید به طور اتوماتیک این مستطیل به خطوط راهنما خواهد چسبید (snap) می توانید از بافتها و فیلترهای مختلفی روی کار استفاده کنید تا شکل جالبتری داشته باشید. این آموزش به نحوه ساختن این فیلترها نخواهد پرداخت.( من از فیلتر rough Pastels استفاده کردم با کمی افکت)
من چیزی شبیه به شکل زیر تهیه کرده ام.
قدم هفتم:
حال قسمت Header سایت را آماده میکنیم. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد را دوباره انتخاب کنید. این بار شعاع 7 را انتخاب کرده ام. مانند شکل یک مستطیل می کشیم و افکت inner shadow با مقدار Distance صفر و opicity پایین را به آن میدهیم فعلا چون رنگ آن مشکی است این تغییرات شاید دیده نشود. ولی فعلا مهم نیست. رنگ بعدا تغییر میکند.باید شکلی شبیه به زیر داشته باشید
مرحله هشتم:
حالا از این لایه یک کپی تهیه کنید. سپس با گرفتن کلید Alt و کلیک بین دو لایه ( لایه اصلی و لایه کپی شده ) یک clipping mask اضافه کنید. سپس آن را رنگ کنید . من یک رنگ آبی تیره انتخاب کردم و سپس افکت گرادیانت به آن دادم همانطور که در لایه بکرگراند همچنین کاری را انجام دادید. نتیجه کار چیزی شبیه به شکل زیر باید ساخته باشید:
قدم نهم:
حالا شما باید عکسی که به عنوان نماد کار شما است رو انتخاب کنید. البته این عکس نباید لوگو شما باشه. اگر در زمینه هوستینگ کار مکینید عکس یک سرور اگر در زمینه وب کار مکیند یه طرح از وب و یا اگر فروشنده چیزی هستید عکسی از محصولات خودتون می تونه گزینه مناسبی باشه. من سرستون تخت جمشید رو انتخاب کردم ( فقط برای قشنگی). این لایه جدید را بالای لایه مرحله قبل بگذارید و آن را به لایه قبلی clip کنید. (گرفتن alt و کلیک بین دو لایه)
بهتره اینجا کار این clip masking رو هم توضیح بدم. اگر لایه بالایی شما بزرگتر از لایه زیری باشه لایه جدید در اندازه لایه زیری محدود میشه. برای اینکه بهتر درک کنید یه لایه که عرضش از header شما بزرگتره انتخاب کنید و سپس اونو clip کنید تا منظورمه کامل بفهمین.
باید حالا چیزی شبیه به شکل زیر داشته باشید:
قدم دهم:
حالا وقت آن رسیده تا لوگو سایت خود و اسم آن را درج کنید. (تغییراتی جزیی در این مرحله کار داده شد تا سایت ساخته شده راست به چپ باشد. از جمله تغییر در محل لوگو یا خطوط راهنما. ضمنا عکس کلیه مراحل زیر در انتها یکجا آورده شده است.
قدم یازدهم:
حالا نوبت به تهیه منو هاست. یک لایه جدید با این نام تشکیل دهید. ابزار مستطیل لبه گرد را انتخاب کنیدو بین خطوط راهنما محل منوها را بکشید. استایلهایی را که برای header استفاده کردید می توانید برای منوها هم استفاده کنید.( ابتدا روی لایه کلیک راست کنید گزینه copy style را انتخاب و سپس روی لایه جدید گزینه paste style را انتخاب کنید)
حالا منوهایی را که می خواهید در سایت داشته باشید را تایپ کنید از هر فونتی که مایل باشید می توانید استفاده کنید.
قدم دوازدهم:
حالا نوبت به بدنه اصلی سایت رسیده است. لایه جدید به نام body ایجاد کنید. و بین خطوط راهنما با ابزار مستطیل لبه گرد آن را بکشید . بهتر است از رنگ سفید استفاده کنید تا متون اصلی سایت که به رنگ مشکی خواهند بود قابل خواندن باشند. بهتر خواهد بود که از افکت inner & drop shadow هم استفاده کنید.
حالا وقت آن رسیده تا لوگو سایت خود و اسم آن را درج کنید. (تغییراتی جزیی در این مرحله کار داده شد تا سایت ساخته شده راست به چپ باشد. از جمله تغییر در محل لوگو یا خطوط راهنما. ضمنا عکس کلیه مراحل زیر در انتها یکجا آورده شده است.
قدم یازدهم:
حالا نوبت به تهیه منو هاست. یک لایه جدید با این نام تشکیل دهید. ابزار مستطیل لبه گرد را انتخاب کنیدو بین خطوط راهنما محل منوها را بکشید. استایلهایی را که برای header استفاده کردید می توانید برای منوها هم استفاده کنید.( ابتدا روی لایه کلیک راست کنید گزینه copy style را انتخاب و سپس روی لایه جدید گزینه paste style را انتخاب کنید)
حالا منوهایی را که می خواهید در سایت داشته باشید را تایپ کنید از هر فونتی که مایل باشید می توانید استفاده کنید.
قدم دوازدهم:
حالا نوبت به بدنه اصلی سایت رسیده است. لایه جدید به نام body ایجاد کنید. و بین خطوط راهنما با ابزار مستطیل لبه گرد آن را بکشید . بهتر است از رنگ سفید استفاده کنید تا متون اصلی سایت که به رنگ مشکی خواهند بود قابل خواندن باشند. بهتر خواهد بود که از افکت inner & drop shadow هم استفاده کنید.
قدم سیزدهم
صفحه ما قسمت footer را هنوز کم دارد. پس ابتدا را می سازیم.
یک گروه لایه جدید به نام footer بسازید. دقیقا مثل همان چیزی که برای Header ساختید ولی کوچکتر. ابزارRounded Rectangle Tool را انتخاب کرده و بین خطوط راهنما رسم کنید. سایه های داخلی را از روی لایه قبلی به روی این لایه نیز انتقال دهید.از لایه یک کپی تهیه کرده سپس با گرفتن کلید Alt و کلیک بین دو لایه ( لایه اصلی و لایه کپی شده ) یک clipping mask اضافه کنید. سپس آن را رنگ کنید . من یک رنگ آبی تیره انتخاب کردم و سپس افکت گرادیانت به آن دادم. دقیقا عین آن کاری که برای header انجام داده اید.
سپس جمله کپی رایت خود را اضافه کنید و در صورت تمایل عکس دلخواه خود را نیز قرار دهید.حالا باید چیزی شبیه به شکل زیر داشته باشید.
اکنون وقت آن رسیده تا این تصویر را برای وب آماده کنیم. شاید آنهایی که تا حدودی به فتوشاپ آشنایی دارند فکر میکنن که الان باید از slice برای تکه کردن و قرار دادن تصاویر در صفحه وب استفاده کرد. در صورتیکه اگر از این کار استفاده کنیم حجم صفحه وب بسیار بالا خواهد رفت.
شما باید در این مرحله از خصوصیت بک گراند جداول و css در وب استفاده کنید. یعنی به عنوان مثال یک ستون به عرض یک پیکسل از بک گراند انتخاب کنید و سپس در طراحی وبتان دستور تکرار عمودی به آن بدهید.تا کل صفحه وب شما را کامل کند.به این طریق شما بکگراندهایی کاملی دارید که فقط بایک فایل 1کیلوبایتی ساخته شده است.
برای اینکار کلیه لایه ها به غیر از بک گراند رامخفی کنید. یک ستون به ابعاد 1*800 پیکسل از بک گراند انتخاب کنید. این قسمت انتخاب شده را در فایل جدیدی به نام bg.gif ذخیره کنید. برای کمترین حجم گزینه File > Save For Web را انتخاب کنید. دقت کنید حتما ساختار فایل gif باشد تا بتوانید از آن در Html و CSS استفاده کنید.
در مرحله بعد بکگراند را مخفی کنید و فقط container را اتخاب کنید. برای داشتن صفحه container کامل سه قسمت آن را لازم داریم. قسمت بالایی قسمت پایینی ( که قوسها را شامل می شوند ) و قسمت میانی. باید توجه داشته باشید که الگویی که ساخته اید هر چند پیکسل دوباره تکرار شده است و بنابر آن باید عرض قسمت میانی را انتخاب کنید. به طور مثال در کار من الگوی مورد نظر هر 10 پیکسل تکرار می شود. پس من عرض قسمت میانی را 10 پیکسل در نظر میگیرم.
شما باید سه فایل در این قسمت ذخیره کنید. فایلهایی که نام و اندازه آنها را در تصویر زیر مشاهده می کنید
شما همینطور باید header و footer سایت را جدا کنید و آنها را با اسامی مناسب ذخیره کنید.
از اینجا به بعد مربوط به مهارت شما در css و html میشود
صفحه ما قسمت footer را هنوز کم دارد. پس ابتدا را می سازیم.
یک گروه لایه جدید به نام footer بسازید. دقیقا مثل همان چیزی که برای Header ساختید ولی کوچکتر. ابزارRounded Rectangle Tool را انتخاب کرده و بین خطوط راهنما رسم کنید. سایه های داخلی را از روی لایه قبلی به روی این لایه نیز انتقال دهید.از لایه یک کپی تهیه کرده سپس با گرفتن کلید Alt و کلیک بین دو لایه ( لایه اصلی و لایه کپی شده ) یک clipping mask اضافه کنید. سپس آن را رنگ کنید . من یک رنگ آبی تیره انتخاب کردم و سپس افکت گرادیانت به آن دادم. دقیقا عین آن کاری که برای header انجام داده اید.
سپس جمله کپی رایت خود را اضافه کنید و در صورت تمایل عکس دلخواه خود را نیز قرار دهید.حالا باید چیزی شبیه به شکل زیر داشته باشید.
اکنون وقت آن رسیده تا این تصویر را برای وب آماده کنیم. شاید آنهایی که تا حدودی به فتوشاپ آشنایی دارند فکر میکنن که الان باید از slice برای تکه کردن و قرار دادن تصاویر در صفحه وب استفاده کرد. در صورتیکه اگر از این کار استفاده کنیم حجم صفحه وب بسیار بالا خواهد رفت.
شما باید در این مرحله از خصوصیت بک گراند جداول و css در وب استفاده کنید. یعنی به عنوان مثال یک ستون به عرض یک پیکسل از بک گراند انتخاب کنید و سپس در طراحی وبتان دستور تکرار عمودی به آن بدهید.تا کل صفحه وب شما را کامل کند.به این طریق شما بکگراندهایی کاملی دارید که فقط بایک فایل 1کیلوبایتی ساخته شده است.
برای اینکار کلیه لایه ها به غیر از بک گراند رامخفی کنید. یک ستون به ابعاد 1*800 پیکسل از بک گراند انتخاب کنید. این قسمت انتخاب شده را در فایل جدیدی به نام bg.gif ذخیره کنید. برای کمترین حجم گزینه File > Save For Web را انتخاب کنید. دقت کنید حتما ساختار فایل gif باشد تا بتوانید از آن در Html و CSS استفاده کنید.
در مرحله بعد بکگراند را مخفی کنید و فقط container را اتخاب کنید. برای داشتن صفحه container کامل سه قسمت آن را لازم داریم. قسمت بالایی قسمت پایینی ( که قوسها را شامل می شوند ) و قسمت میانی. باید توجه داشته باشید که الگویی که ساخته اید هر چند پیکسل دوباره تکرار شده است و بنابر آن باید عرض قسمت میانی را انتخاب کنید. به طور مثال در کار من الگوی مورد نظر هر 10 پیکسل تکرار می شود. پس من عرض قسمت میانی را 10 پیکسل در نظر میگیرم.
شما باید سه فایل در این قسمت ذخیره کنید. فایلهایی که نام و اندازه آنها را در تصویر زیر مشاهده می کنید
شما همینطور باید header و footer سایت را جدا کنید و آنها را با اسامی مناسب ذخیره کنید.
از اینجا به بعد مربوط به مهارت شما در css و html میشود
93/9/6::: 1:35 ع
اولین دیدگاه را شما بگذارید
