خانه » آموزش فتوشاپ » طراحی وب سایت HALCYONIC در فتوشاپ
22 مرداد 1396

طراحی وب سایت HALCYONIC در فتوشاپ

در این بخش از سایت شهرگرافیک میپردازیم به طراحی وب سایت HALCYONIC در فتوشاپ پس با ما همراه باشید.با یکی دیگر از آموزشهای طراحی وب سایت در خدمت شما هستم .در این بخش ابتدا باید قالب مورد نظر را بوسیله فتوشاپ طراحی کرده تا در مرحله بعدی بتوانم فایل PSD را تبدیل به یک وب سایت کنم .نحوه کار به این صورت می باشد که ابتدا یک صفحه به ابعاد 2800×1400 با رزولیشن 72 ایجاد میکنم سپس موقعیت هایی که در صفحه می خواهم قرار بدهم را ابتدا بر روی کاغذ کشیده تا مطمئن بشم هر قسمت باید در کجا قرار بگیرد . بعد از اینکه طرح اصلی را (فقط موقعیت ها) بر روی کاغذ ترسیم کردم باید بوسیله فتوشاپ ابعاد هر قسمت را مشخص و شروع به طراحی کنم .عجله نکنید ، در ادامه به طور کامل با تصاویری که برای شما قرار میدهم ، متوجه توضیحات می شوید . (بخش اول )

آموزش طراحی وب سایت Halcyonic در فتوشاپ

فتوشاپ را اجرا کنید .

1. یک صفحه به ابعاد 2800×1400 با رزولیشن 72 ایجاد کنید .

2. ابزار خط کش را با فشردن کلیدهای Ctrl+R فعال کنید و از هر طرف کادر به طرف داخل یک خط عمودی با فاصله 100 پیکسل بکشید . بدنه سایت 1200 پیکسل می باشد .برای کشیدن خط از طریق منوی view هم می توانید اینکار را انجام بدهید .

3. از بالای صفحه به طرف پایین یک خط به فاصله 600 پیکسل بکشید . (به تصویر زیر دقت کنید)

4. یک کادر با ابزار rectangle tool برابر با 600 پیکسل بکشید . سپس روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Gradient overlay را تغییر بدهید .

5. در این مرحله باید یک فیلتر را بر روی قسمتی که در مرحله قبل ایجاده کرده بودم اعمال کنم . برای انجام اینکار بر روی لایه کادر کشیده شده کلیک راست کرده و گزینه Convert to smart object را انتخاب کنید . در مرحله بعدی فیلتر Filter = > Texture = > Texurizer کلیک کنید . تنظیمات در تصویر مشخص شده است .

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

روی لایه لوگو دابل کلیک کرده و تنظیمات پیش فرض را تغییر بدهید .

7. در این مرحله با استفاده از ابزار Line tool با ضخامت 1 پیکسل دو خط سراسری میکشم . این خط باید دقیقا روی خط کشیده شده قرار بگیرد . به تصویر زیر دقت کنید متوجه می شوید

خط اول با درصد رنگی 3e484a کشیده شده است و خط دوم با درصد رنگی 222628

8. در این مرحله یک عکس را با فشردن کلیدهای Ctrl+O وارد فتوشاپ کرده و یک کادر با ابزار Rectangle با درصد رنگی eaeaea میکشم . کادر کشیده شده را پشت تصویر قرار میدهم .

9. در این مرحله با استفاده از ابزار تایپ یک سری متن را در جایی که مشخص شده است تایپ میکنم

10. ابزار rounded Rectangle Tool را با Rediuse (شعاع) 10 پیکسل انتخاب و یک کادر همانند تصویر زیر بکشید . برای تغییر رنگ هم روی لایه کادر کشیده شده دابل کلیک کرده و تنظیمات گزینه Gradient overlay را تغییر بدهید.

بسیار خوب یک متن داخل دکمه طراحی شده تایپ میکنم .

طراحی قسمت بنر

11. در این مرحله ابزار rectangle tool را انتخاب کرده و یک کادر با ارتفاع 410 پیکسل و درصد رنگی eae8e8 میکشم . سپس از نوار ابزار بالای صفحه فیلتر Filter => Sketch => Note Paper را با تنظیمات مشخص شده بر روی قسمت مورد نظر اعمال میکنم .

12. در این قسمت 4 موقعیت به نام بنر 1 / بنر 2 / بنر 3 / بنر 4 قرار می گیرد . باید بوسیله ابزار خط کش 4 قسمت 280 پیکسلی با 4 حاشیه با فاصله 26 پیکسل ایجاد کنیم .

13. در این قسمت 4 تصویر را بین هر موقعیتی که مشخص کرده ام قرار میدهم . برای ایجاد پس زمینه هم از ابزار Rectangle با درصد رنگی eaeaea استفاده میکنم در مرحله بعدی باید 4 متن را به ترتیب در زیر تصاویر تایپ کنیم . درصد رنگی هر قسمت را برای شما مشخص میکنم .درصد رنگی عنوان : ffffff | درصد رنگی متن : 2c2c2c | درصد رنگی لینک : f2f2f2

منبع: آسارایان

زهرا خالقی

یک پاسخ به “طراحی وب سایت HALCYONIC در فتوشاپ”

  1. ممنون خیلی خوب بود

دیدگاهتان را بنویسید

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