بهترین شرکت طراحی سایت در مشهد اولین چیزی که از یک وب سایت مصنوعی می خواهید چیست؟ متمایز کردن
در این آموزش قدم به قدم شما را راهنمایی می کنیم تا وب سایت دلخواه خود را بسازید. در این آموزش ترفندها و تکنیک های ایجاد یک وب سایت هوشمند در فتوشاپ را یاد می گیریم که از سایر وب سایت ها متمایز باشد.
آموزش فتوشاپ: طراحی قالب وب
مرحله اول: تنظیمات صفحه
یک سند جدید 1400x900 در فتوشاپ ایجاد کنید. در نسخه HTML نهایی وب سایت، عناصر دارای ویژگی مایع (قابل تغییر اندازه) هستند، بنابراین باید به یاد داشته باشید که طراحی نهایی اندازه ثابتی ندارد.
مرحله 2: یک طرح اولیه ایجاد کنید
ساخت تخته سیاه راه آسانی برای شروع است. در این نقاشی تصمیم گرفتیم یک رنگ پایه برای نقاشی انتخاب کنیم.
رنگ تیره برای متمایز کردن عکس های نمونه کار از پس زمینه کافی است و عکس های سیاه خالص نیز از پس زمینه متمایز خواهند شد.
ما همچنین از طیف آبی برای ایجاد یک رنگ آبی عمیق منحصر به فرد در ساخت عناصر رابط کاربری وب استفاده خواهیم کرد.
به Layer Selection > New Fill Layer > Solid Color بروید و رنگ #252a3b را اعمال کنید
مرحله 3: خطوط راهنما ایجاد کنید
از آنجایی که می خواهیم از یک طرح بندی مقیاس پذیر استفاده کنیم، باید حداقل عرض سایت را در نظر بگیریم. برای اکثر سایت های تجاری، این اندازه برای یک کاربر معمولی 1000 پیکسل با وضوح 1024x768 است. برای این سایت 1100 پیکسل را به عنوان حداقل عرض در نظر می گیریم.
ابتدا مطمئن شوید که شبکه راهنما بر حسب پیکسل اندازه گیری شده است. می‌توانید این تنظیمات را در تنظیمات > واحدها و راهنماها مدیریت کنید.
سپس از منو View > New Guide را انتخاب کنید. می خواهیم متن صفحه را در مرکز قرار دهیم و همچنین عرض صفحه را روی 1100 پیکسل قرار دهیم. بنابراین اولین خط عمودی را با فاصله 150 پیکسل و خط عمودی دوم را با فاصله 1250 پیکسل تعریف می کنیم.
مرحله 4: یک الگوی بافت ایجاد کنید
حالا می خواهیم یک الگوی نوار مورب روی پس زمینه ایجاد کنیم و عناصر سایت را از پس زمینه متمایز کنیم و جلوه خاصی به طرح بدهیم، اما ابتدا باید الگو را درست کنیم.
یک سند 12x12px ایجاد کنید و آن را با #000000 سیاه پر کنید
حالا یک جدول جدید ایجاد کنید. لایه > جدید > لایه. با استفاده از ابزار Pencil Tool و انتخاب یک براش 1 پیکسلی، مانند تصویر زیر سه خط بکشید
لایه fill را خاموش کنید و opacity لایه مسیر سفید را روی 6 درصد قرار دهید. برای ذخیره طرح به عنوان الگو، Edit > Set Pattern را از منو انتخاب کنید.
بازگشت به پروژه اصلی یک لایه جدید ایجاد کنید. Layer > New Fill Layer > Pattern را از منو انتخاب کنید. قالبی را که قبلا انتخاب کرده بودید انتخاب کنید.
مرحله 5: منوی ناوبری
اکنون که عناصر اصلی سایت را ایجاد کردیم، چند لایه مسطح ایجاد می کنیم تا سایر عناصر سایت را در بالای آن قرار دهیم.
ابتدا منوی ناوبری را ترسیم می کنیم. از آنجایی که این سایت دارای ویژگی کشویی نیست، می توانیم یک منوی ناوبری را در پایین صفحه سایت قرار دهیم.
یک گروه در پنل لایه ها ایجاد کنید و نام آن را Navigation بگذارید.
اکنون با ابزار Rectangle (U) یک لایه جدید ایجاد کنید. پنجره Info را باز کنید. یک مستطیل با اندازه 1400x61 انتخاب کنید. عرض سایت و ارتفاع 61 پیکسل. این لایه را در پایین صفحه اصلی قرار دهید.
حالا روی لایه جدید در پنل لایه ها کلیک راست کرده و Blending Options را انتخاب کنید و از منو Gradient Overlay را انتخاب کنید. روش دیگر این است که Layer > Layer Style > Gradient Overlay را از منو انتخاب کنید.
در تنظیمات گرادیان، روی گزینه رنگ سمت چپ کلیک کنید و رنگ #2f313a را به عنوان رنگ زیر انتخاب کنید. روی گزینه رنگ در سمت راست کلیک کنید و #3c3f49 را به عنوان رنگ بالا انتخاب کنید.
حالا یک لایه جدید ایجاد کنید و آن را Highlight نامید. ابزار Pencil Tool را با رنگ قلم مو 1px #ffffff انتخاب کنید و در حالی که کلید Shift را نگه داشته اید، یک خط مستقیم روی مستطیلی که قبلا ایجاد کرده اید بکشید. Opacity لایه را روی 6 درصد قرار دهید.
مرحله ششم: ایجاد لوگوی وب سایت
یک لایه متنی 20 پیکسلی از سمت راست صفحه ایجاد کنید. مطمئن شوید که متن لوگو در وسط مربع منوی پیمایش قرار دارد
در این مثال فونت سبک دین را با ارتفاع 14 پیکسل انتخاب کرده ایم. ردیابی رایگان را روی 200 تنظیم کنید
از دو رنگ مختلف برای تمایز بین دو قسمت متن لوگو استفاده کنید. رنگ #dddddd را برای قسمت اول و #737375 را برای قسمت دوم انتخاب کنید.
اکنون یک افکت سایه ظریف به متن اضافه می کنیم تا در پس زمینه ظاهری محو به آن ببخشیم. Layer > Layer Style > Drop Shadow را از منو انتخاب کنید
گزینه Use the Light را روشن کنید. سر را روی -45 درجه تنظیم کنید. Size را روی 0px، Spacing را روی 1px و Opacity را روی 30 درصد قرار دهید.
مرحله 7: دکمه های ناوبری را ایجاد کنید
برای دکمه های ناوبری اصلی، از شکل مستطیلی با گوشه های گرد استفاده می کنیم.
یک گروه جدید به نام دکمه ها ایجاد کنید
یک مستطیل به اندازه 279x31 پیکسل در فاصله 20 پیکسل از لبه سمت راست صفحه و به صورت عمودی در مرکز مستطیل ناوبری ایجاد کنید.
در پنل لایه ها، روی لایه دکمه راست کلیک کرده و Blending Option را انتخاب کنید. Gradient Overlay را از لیست انتخاب کنید و یک محدوده رنگ گرادیان از #292c33 تا #43464f را انتخاب کنید. OK را انتخاب کنید، سپس Bevel & Emboss را انتخاب کنید
در پنجره Bevel & Emboss، Size را روی 0px و جهت را روی 122 درجه تنظیم کنید. ویژگی های Highlight و Shadow را روی 10% تنظیم کنید و یک افکت نوری ظریف و یکنواخت را روی دکمه اعمال کنید.
برای لوگوی دکمه از همان فونت و چیدمانی که برای لوگو استفاده کردیم استفاده کنید.
از آنجایی که برچسب دکمه فضای عمودی کمتری دارد، اندازه فونت 12 پیکسل را انتخاب کنید و Tracking را روی 100 تنظیم کنید. برای رنگ، از همان رنگ های لوگو استفاده کنید، به جز حالت صفحه فعال (دکمه شناور)، از رنگ روشن استفاده کنید.
می توانید با کشیدن دو خط ضخیم 1 پیکسلی دکمه ها را از هم جدا کنید. خط اول را روی سیاه #000000 و خط دوم را سفید #FFFFFF قرار دهید. Opacity خط سفید را 6% و کدورت خط دوم را 12% قرار دهید. دو خط را با Shift + کلیک روی هر کدام و کلیک راست روی هر انتخاب کپی کنید.
خطوط را با فاصله مداوم بین دکمه ها در راهنمای ستون قرار دهید.
مرحله 8: ساخت دکمه های رسانه های اجتماعی
این دکمه ها عملکرد متفاوتی نسبت به دکمه های دیگر در منوی ناوبری دارند. بنابراین سبک جدیدی را برای آنها در نظر می گیریم. ما دکمه های رسانه های اجتماعی را برای تکمیل منوی ناوبری طراحی می کنیم.
ابتدا یک گروه جدید به نام Social در پنل لایه ها ایجاد کنید و آن را در گروه ناوبری اصلی قرار دهید.
حالا ابزار Rounded Rectangle را انتخاب کنید و Corner Radius را روی 4px قرار دهید. کلید Shift را نگه دارید و یک شکل مربع 25x25px ایجاد کنید. این مربع را در مرکز مستطیل ناوبری و 25 پیکسل در سمت چپ دکمه های ناوبری اصلی قرار دهید.
روی دکمه ای که ایجاد کردید کلیک راست کرده و Fusion Options را انتخاب کنید.
افکت سایه اضافه کنید. سفید #FFFF را برای این افکت انتخاب کنید. حالت ترکیب را روی روشن قرار دهید. 1 پیکسل را برای فاصله انتخاب کنید. Spread را روی %0 و Size را روی 0px قرار دهید. با این تنظیمات به دکمه افکت کلیک می دهیم.
در مرحله بعد به هر حال گزینه inner shadow را در پنجره layer style انتخاب کنید. رنگ مشکی #000000 را انتخاب کنید. Opacity را روی 39 درصد قرار دهید. Distance را روی 1px و Size را روی 4px قرار دهید.
در نهایت گزینه Color Layer را انتخاب کرده و رنگ #353741 را انتخاب کنید. با این تنظیمات دکمه را از پس زمینه جدا می کنیم و ظاهری صاف به آن می دهیم
از تصاویر از پیش ساخته شده برای نمادهای رسانه های اجتماعی استفاده کنید. لبه های تصاویر را با خودکار بکشید. یک مسیر در اطراف تصویر اصلی ایجاد کنید. (مطمئن شوید که Paths در منوی گزینه های ابزار علامت زده شده است.)
پس از ایجاد Path، نماد Path Selection Tool را انتخاب کرده و روی Path کلیک راست کنید (مطمئن شوید که گزینه Path در پالت Paths فعال باشد)
یک شکل سفارشی تعریف کنید و شکل را ذخیره کنید
اکنون می توانیم از نمودار به عنوان یک شی بردار ساده استفاده کنیم. با استفاده از ابزار Pen، Options را در نوار Shape (بالا سمت چپ منوی Options) قرار دهید. دستگاه خاصی را انتخاب کنید. طرحی را که ایجاد کرده اید انتخاب کنید. کلید Shift را نگه دارید و تصویر را به تناسب دکمه بکشید. درصد را روی 20 درصد قرار دهید.
همین مراحل را برای سایر دکمه های شبکه اجتماعی تکرار کنید.
جمع بندی
به یاد داشته باشید که صفحه نمونه کارها نمایندگی آنلاین شما برای مشتریان است. این نوع طراحی صفحه باید به مردم بگوید که شما چه کار می کنید و سهام خود را به بهترین شکل به مشتریان نشان دهد. همچنین به مشتریان کمک می کند تا به راحتی شما را بیابند و با شما ارتباط برقرار کنند.