طراحی صفحات وب با فتوشاپ

[cookie]

ساخت وب سایت با فتوشاپ

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

● قدم دوم:
اجاز دهید تا کار راآغار کنیم.قبل از هرچیز شما به یک طرح رنگ داشته باشید. این یک اشتاه بزرگی است کهرنگها را بطور تصادفی انتخاب کنید و ببینید کدام یک به کار شما بیشتر می نشیند. دوبرنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers میباشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانیدرنگهای مورد علاقه خود را انتخاب کنید. من با رنگ آبی تک رنگ کار خواهم کرد که بهحقیقت یکی از رنگهای مورد استفاده در بسیاری از صفحات وب می باشد.

● قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن دارید. در فتوشاپ یک فایل جدید باز کنید. اندازه آن باید ۸۰۰ در ۸۰۰ باشد. بر اساساستاندارهای وب صفحات اینترنتی نباید بزرگتر از ۷۷۰ پیکسل عرض داشته باشند چرا کههنوز بسیاری از کاربران از رزولوشن ۸۰۰ در ۶۰۰استفاده میکنند. این فایل با عرض ۸۰۰پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.

● قدم چهارم:
حال که شما فایل خود را آماده کرده اید نیازبه خطوط راهنما دارید. ( در نظر داشته باشید این خطوط راهنما بر اساس سایتی است کهمی خواهید در انتها داشته باشید و ما بر اساس شکل فوق این خطوط را ترسیممیکنیم.)
این خطوط به شما کمک می کنند تا تمام اجزا سایت شما در محل درست خودقرار گرفته باشند.

برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر ۱۵, ۲۵, ۱۷۵, ۱۸۵, ۲۱۵, ۲۲۵, ۷۰۰, ۷۱۰, ۷۷۵, ۷۸۵و guide های عمودی در ۱۵, ۲۵, ۲۷۵, ۷۷۵, ۷۸۵ ایجاد کنید. مطمئن شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتی شما کار را تمام کردهباشید شکلی شبیه به شکل زیر خواهید داشت.

● قدم پنجم :
خوب من برای هر قسمت این صفحه وب یک گروه لایه ها تشکیل میدهم.پیشنهاد می کنم شما هم برای مرتب بودن کار این کار را انجام دهید. یک گروه لایهجدید با نام بکگراند تشکیل دهید. شما باید یک لایه جدید تشکیل دهید و با هر رنگی کهمایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگاستفاده کردم ۰۰۰۰FF) چون ما بعدا آن را به گرادیانت تغیر میدهیم.

● قدم ششم:
حالا وقت آن است که کانتینر را شروع کنیم. کانتینر لایه ای است که همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یک لایه جدیدبا همین نام ایجاد کنید. ابزار مستطیل لبه گرد (Rounded Rectangle Tool )را انتخابکنید. ( با shortcut U ) مقدار شعاع را از منوی بالا هر مقدار که مایلید می توانیداختیار کنید. هر چه عدد بالاتر باشد قوس بیشتری خواهید داشت من Radius را برابر ۱۵انتخاب میکنم. هر رنگی را که مایلید صفحه وب شما داشته باشد را انتخابکنید.

من رنگ سفید تیره را انتخاب کرده ام. سپس از بیرونی ترین خطوط راهنماشروع به ترسیم مستطیل بکنید. اگر شما همهمراحل قبل را درست انجام داده باشید بهطور اتوماتیک این مستطیل به خطوط راهنما خواهد چسبید (snap) می توانید از بافتها و**********های مختلفی روی کار استفاده کنید تا شکل جالبتری داشته باشید. این آموزش بهنحوه ساختن این **********ها نخواهد پرداخت.( من از ********** rough Pastels استفاده کردم باکمی افکت)

● قدم هفتم:
حال قسمت Header سایت را آماده میکنیم. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گردرا دوباره انتخاب کنید. این بار شعاع ۷ را انتخاب کرده ام. مانند شکل یک مستطیل میکشیم و افکت inner shadow با مقدار Distance صفر و opicity پایین را به آن میدهیمفعلا چون رنگ آن مشکی است این تغییرات شاید دیده نشود. ولی فعلا مهم نیست. رنگ بعداتغییر میکند.باید شکلی شبیه به زیر داشته باشید

● مرحلههشتم:
حالا از این لایه یک کپی تهیه کنید. سپس با گرفتن کلید Alt وکلیک بین دو لایه ( لایه اصلی و لایه کپی شده )‌ یک clipping mask اضافه کنید. سپسآن را رنگ کنید . من یک رنگ آبی تیره انتخاب کردم و سپس افکت گرادیانت به آن دادمهمانطور که در لایه بکرگراند همچنین کاری را انجام دادید. نتیجه کار چیزی شبیه بهشکل زیر باید ساخته باشید:

● قدمنهم:
حالا شما باید عکسی که به عنوان نماد کار شما است رو انتخابکنید. البته این عکس نباید لوگو شما باشه. اگر در زمینه هوستینگ کار مکینید عکس یکسرور اگر در زمینه وب کار مکیند یه طرح از وب و یا اگر فروشنده چیزی هستید عکسی ازمحصولات خودتون می تونه گزینه مناسبی باشه. من سرستون تخت جمشید رو انتخاب کردم ( فقط برای قشنگی). این لایه جدید را بالای لایه مرحله قبل بگذارید و آن را به لایهقبلی clip کنید. (گرفتن alt و کلیک بین دو لایه)
بهتره اینجا کار این clip masking رو هم توضیح بدم. اگر لایه بالایی شما بزرگتر از لایه زیری باشه لایه جدیددر اندازه لایه زیری محدود میشه. برای اینکه بهتر درک کنید یه لایه که عرضش از header شما بزرگتره انتخاب کنید و سپس اونو clip کنید تا منظورمه کاملبفهمین.
باید حالا چیزی شبیه به شکل زیر داشته باشید:

● قدم دهم:
حالا وقت آن رسیده تا لوگو سایت خود و اسم آنرا درج کنید. (تغییراتی جزیی در این مرحله کار داده شد تا سایت ساخته شده راست بهچپ باشد. از جمله تغییر در محل لوگو یا خطوط راهنما. سوالی بود در قسمت یادداشتهابپرسید)

● قدم یازدهم:
حالا نوبت به تهیهمنو هاست. یک لایه جدید با این نام تشکیل دهید. ابزار مستطیل لبه گرد را انتخابکنیدو بین خطوط راهنما محل منوها را بکشید. استایلهایی را که برای header استفادهکردید می توانید برای منوها هم استفاده کنید.( ابتدا روی لایه کلیک راست کنید گزینه copy style را انتخاب و سپس روی لایه جدید گزینه paste style را انتخابکنید)
حالا منوهایی را که می خواهید در سایت داشته باشید را تایپ کنید از هرفونتی که مایل باشید می توانید استفاده کنید.

● قدمدوازدهم:
حالا نوبت به بدنه اصلی سایت رسیده است. لایه جدید به نام body ایجاد کنید. و بین خطوط راهنما با ابزار مستطیل لبه گرد آن را بکشید . بهتراست از رنگ سفید استفاده کنید تا متون اصلی سایت که به رنگ مشکی خواهند بود قابلخواندن باشند. بهتر خواهد بود که از افکت inner & drop shadow هم استفادهکنید.

[tanha_25]

اموزشتونجالبه ولی تصاویرش نیست.

[eli joon]

میتونید این آموزش رو از لینک زیر نیز دانلود کنید
(فقط كاربران عضو مجاز به دیدن لینک ها هستند)

[eli joon]

● قدم اول:
در این سلسله آموزش شما یاد خواهید گرفت که چگونه یک وب سایت را فتوشاپ طراحی کنید.
در این آموزش فرض بر این است که شما تا حدودی به فتوشاپ آشنایی داشته با لایه ها و ماسک آشنایی دارید.
در انتهای آموزش شما قادر خواهید بود که سايتي به شكل زير داشته باشید:

● قدم دوم:
اجاز دهید تا کار را آغار کنیم.قبل از هرچیز شما به یک طرح رنگ داشته باشید. این یک اشتاه بزرگی است که رنگها را بطور تصادفی انتخاب کنید و ببینید کدام یک به کار شما بیشتر می نشیند. دو برنامه مورد علاقه من در طراحی ها برنامه color picker و برنامه colourlovers می باشد. شما همچنین می توانید از پالت swatches فتوشاپ بهره جویید. شما می توانید رنگهای مورد علاقه خود را انتخاب کنید. من با رنگ آبی تک رنگ کار خواهم کرد که به حقیقت یکی از رنگهای مورد استفاده در بسیاری از صفحات وب می باشد.
● قدم سوم:
حالا شما رنگ مورد نظر خود را در ذهن دارید. در فتوشاپ یک فایل جدید باز کنید. اندازه آن باید ۸۰۰ در ۸۰۰ باشد. بر اساس استاندارهای وب صفحات اینترنتی نباید بزرگتر از ۷۷۰ پیکسل عرض داشته باشند چرا که هنوز بسیاری از کاربران از رزولوشن ۸۰۰ در ۶۰۰ استفاده میکنند. این فایل با عرض ۸۰۰ پیکسلی را ما به عنوان یک پس زمینه برای صفحه وب خود قرار می دهیم.
● قدم چهارم:
حال که شما فایل خود را آماده کرده اید نیاز به خطوط راهنما دارید. ( در نظر داشته باشید این خطوط راهنما بر اساس سایتی است که می خواهید در انتها داشته باشید و ما بر اساس شکل فوق این خطوط را ترسیم میکنیم.)
این خطوط به شما کمک می کنند تا تمام اجزا سایت شما در محل درست خود قرار گرفته باشند.
برای ایجاد خطوط راهنمای جدید که از این پس آنها را guide می نامیم به گزینه View > New Guide می روید.در این منو شما قادر خواهید بود که guide های افقی یا عمودی داشته باشید و مقدار آن را نیز از لحاظ کلفتی مشخص کنید. شما باید guide های افقی در مقادیر ۱۵, ۲۵, ۱۷۵, ۱۸۵, ۲۱۵, ۲۲۵, ۷۰۰, ۷۱۰, ۷۷۵, ۷۸۵ و guide های عمودی در ۱۵, ۲۵, ۲۷۵, ۷۷۵, ۷۸۵ ایجاد کنید. مطمئن شوید View > Snap و View > Snap To > Guides چک مارک خورده باشند. وقتي شما كار را تمام كرده باشيد شكلي شبيه به شكل زير خواهيد داشت.

● قدم پنجم :
خوب من برای هر قسمت این صفحه وب یک گروه لایه ها تشکیل می دهم.پیشنهاد می کنم شما هم برای مرتب بودن کار این کار را انجام دهید. یک گروه لایه جدید با نام بکگراند تشکیل دهید. شما باید یک لایه جدید تشکیل دهید و با هر رنگی که مایل بودید آن را پر کنید . این مهم نیست از چه رنگی استفاده میکنید.(من از این رنگ استفاده کردم ۰۰۰۰FF) چون ما بعدا آن را به گرادیانت تغیر میدهیم.به تنظيمات زير رفته و مقادير را انتخاب كنيد.
blending option> Gradiaent Overlay

دقت كنيد دقيقا عمودي باشد تا به مشكل برنخوريد

● قدم ششم:
حالا وقت آن است که کانتینر را شروع کنیم. کانتینر لایه ای است که همه محتوای صفحه وب ما در آن قرار خواهد گرفت. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد (Rounded Rectangle Tool )را انتخاب کنید. ( با shortcut U ) مقدار شعاع را از منوی بالا هر مقدار که مایلید می توانید اختیار کنید. هر چه عدد بالاتر باشد قوس بیشتری خواهید داشت من Radius را برابر ۱۵ انتخاب میکنم. هر رنگی را که مایلید صفحه وب شما داشته باشد را انتخاب کنید.
من رنگ سفید تیره را انتخاب کرده ام. سپس از بیرونی ترین خطوط راهنما شروع به ترسیم مستطیل بکنید. اگر شما همه مراحل قبل را درست انجام داده باشید به طور اتوماتیک این مستطیل به خطوط راهنما خواهد چسبید (snap) می توانید از بافتها و **********های مختلفی روی کار استفاده کنید تا شکل جالبتری داشته باشید. این آموزش به نحوه ساختن این **********ها نخواهد پرداخت.( من از ********** rough Pastels استفاده کردم با کمی افکت)
من چيزي شبيه به شكل زير تهيه كرده ام.

● قدم هفتم:
حال قسمت Header سایت را آماده میکنیم. یک لایه جدید با همین نام ایجاد کنید. ابزار مستطیل لبه گرد را دوباره انتخاب کنید. این بار شعاع ۷ را انتخاب کرده ام. مانند شکل یک مستطیل می کشیم و افکت inner shadow با مقدار Distance صفر و opicity پایین را به آن میدهیم فعلا چون رنگ آن مشکی است این تغییرات شاید دیده نشود. ولی فعلا مهم نیست. رنگ بعدا تغییر میکند.باید شکلی شبیه به زیر داشته باشید

● مرحله هشتم:
حالا از این لایه یک کپی تهیه کنید. سپس با گرفتن کلید Alt و کلیک بین دو لایه ( لایه اصلی و لایه کپی شده )‌ یک clipping mask اضافه کنید. سپس آن را رنگ کنید . من یک رنگ آبی تیره انتخاب کردم و سپس افکت گرادیانت به آن دادم همانطور که در لایه بکرگراند همچنین کاری را انجام دادید. نتیجه کار چیزی شبیه به شکل زیر باید ساخته باشید:

● قدم نهم:
حالا شما باید عکسی که به عنوان نماد کار شما است رو انتخاب کنید. البته این عکس نباید لوگو شما باشه. اگر در زمینه هوستینگ کار مکینید عکس یک سرور اگر در زمینه وب کار مکیند یه طرح از وب و یا اگر فروشنده چیزی هستید عکسی از محصولات خودتون می تونه گزینه مناسبی باشه. من سرستون تخت جمشید رو انتخاب کردم ( فقط برای قشنگی). این لایه جدید را بالای لایه مرحله قبل بگذارید و آن را به لایه قبلی clip کنید. (گرفتن alt و کلیک بین دو لایه)
بهتره اینجا کار این clip masking رو هم توضیح بدم. اگر لایه بالایی شما بزرگتر از لایه زیری باشه لایه جدید در اندازه لایه زیری محدود میشه. برای اینکه بهتر درک کنید یه لایه که عرضش از header شما بزرگتره انتخاب کنید و سپس اونو clip کنید .بايد حالا چيزي شبيه به شكل زير داشته باشيد:

● قدم دهم:
حالا وقت آن رسیده تا لوگو سایت خود و اسم آن را درج کنید.(تغييراتي جزيي در اين مرحله كار داده شد تا سايت ساخته شده راست به چپ باشد. از جمله تغيير در محل لوگو يا خطوط راهنما. ضمنا عكس كليه مراحل زير در انتها يكجا آورده شده است.)
● قدم یازدهم:
حالا نوبت به تهیه منو هاست. یک لایه جدید با این نام تشکیل دهید. ابزار مستطیل لبه گرد را انتخاب کنیدو بین خطوط راهنما محل منوها را بکشید. استایلهایی را که برای 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 ميشود.

[cookie]

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

این کتاب طراحی قالب ها را با نرم افزار فتوشاپ آموزش داده است و حاوی 295 صفحه می باشد که ساخت اجزای صفحات را در 9 فصل مختلف مطرح کرده است. همچنین به دلیل اینکه در فصل های ابتدایی، مقدمات فتوشاپ آموزش داده شده است، افرادی که با فتوشاپ آشنایی زیادی ندارند هم می توانند از آن استفاده نمایند.
سر فصل های این کتاب به شرح زیر است:

* Getting Started with Photoshop
* Basic Skills
* Creating Buttons
* Creating Backgrounds
* Working with Text
* Adjusting Images
* Manipulating Images
* Designing a Web Site
* Advanced Photoshop Techniques

دانلود:

http://www.irpcn.com/downloads/101.Web.Design.Tips.Tricks.and.Techniques.rar

دانلود(مستقیم): (فقط كاربران عضو مجاز به دیدن لینک ها هستند) | 27.3 MB

دانلود(غیر مستقیم): (فقط كاربران عضو مجاز به دیدن لینک ها هستند) | 27.3 MB