۰

آموزش فتوشاپ CS6 / مدرسه مجازی شهر گرافیک

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

مرداد ۲۲, ۱۳۹۶ در ۱۲:۰۷ ق.ظ توسط

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

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

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

۱٫ یک صفحه به ابعاد ۲۸۰۰×۱۴۰۰ با رزولیشن ۷۲ ایجاد کنید .

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

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

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

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

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

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

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

خط اول با درصد رنگی ۳e484a کشیده شده است و خط دوم با درصد رنگی ۲۲۲۶۲۸

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

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

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

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

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

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

۱۲٫ در این قسمت ۴ موقعیت به نام بنر ۱ / بنر ۲ / بنر ۳ / بنر ۴ قرار می گیرد . باید بوسیله ابزار خط کش ۴ قسمت ۲۸۰ پیکسلی با ۴ حاشیه با فاصله ۲۶ پیکسل ایجاد کنیم .

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

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


شهر گرافیک
گرافچه
دانلود طرح لایه باز
دانلود کارت ویزیت لایه باز
دانلود بنر لایه باز
دانلود تراکت لایه باز

برچسب‌ها, , , , , , , , ,

پاسخ دهید