How to create moving banner for advertisement in Photoshop.
I recently made an animated banner using Photoshop. This is a promotional banner for Girin Instruments, which is a link to my homepage. Go to Girin Instruments site!
First, we get the image information as below in order to make a banner suitable for the site. To know the size information for the image to be replaced, follow the steps below. If you click with Right button on your mouse. (Depending on your environment, this option may not be available.)
I get the image size info with 126.95 x 618.35.
And then go to the Photoshop, make a new canvas to fit the size information. (Note that decimals are not used.)
Change the color on the canvas for making banner.
Create text and buttons on each layer as follows.
To express the button three-dimensionally, set the blending options as follows as below.
Put the risk weather icon at the bottom. Since you need to make it into a moving emoticon, you need to create each layer separately.
The created layer is named as shown below.
Next, go to the Window---> Timeline for making moving animation.
And then select the Create Frame Animation. Note!! You have to double click on the text to open it! Remember!
Here is the workspace for making keyframe.
Click the icon below to add each frame.
The principle is easy once you know it. Set one motion per frame and adjust the time. That is, each frame is created by calculating the part to be shown in advance. When creating, you can set the layer's eye icon by repeatedly turning it off and on.
Adjust the second unit as shown below to designate the screen to be displayed for each second.
Here is the last keyframe from making each actions.
Note! When you save the file, absolutely have to save as Gif file. For that, go to the File--> Save as---> change the file style to .gif.
Finally, you can check the result as below.
Draw a picture that will shake off your depression in 5 minutes with Photoshop
It is a time when the mind and body are exhausted from the long-lasting fight against mutations. 2022 is bright, but we still need to wear a mask and get vaccinated regularly. we get tired easily in a situation that doesn't seem to have changed from last year.
In this case, it is important to express your feelings. In particular, drawing, writing, and exercise are the best prevention and treatment measures. Today, in this sense, I would like to share a simple digital image of fighting a depression.
First, I prepared a canvas with 2573 x 1907 px.
Next make a color with light blue and go to Filter---> Render---> Clouds.
You can check the output after applying Clouds.
And then for effecting, you can go to Image---> Adustments ---> Curves.
And then, adjust the value as follow as below.
Here is the result.
And then make a another layer, you can make it light blue. After then, you can use blending option with right-click, and adjust the value as below for expressing sea waves.
Next, lower the opacity (100%---> 60%)of the layer with the sea pattern applied. This will illuminate the layer with the previously created effect applied below.
After selecting the sea wave pattern layer, right-click the mouse and go to Free Transform---> Warp to transform the pattern. Then I drew a girl going backwards in a boat and going up.
Since the boat is going retrograde, it represents a splash of water. From the blush set below, choose a dotted-line blush and paint around the boat in white.
Finally, you can see the result in 5 min.
Like a boat sailing through the waves, I hope to overcome the gloomy heart and start the day with strength.
How do I change the header image in Weebly?
Today, I would like to briefly introduce how to change the header image in Weebly, which is very simple and easy, but easily confused.
I recently changed the header image as above. The fish image filled with hopes and wishes at the beginning of the year was changed to induce a calmer image. Now, with new hope, I want to start each day as energetically as a fish that bounces back.
To do this, first go to the Weebly editor.
Then click on the header image you want to change. You can see the button to edit the image only by clicking the header image.
If you click the orange squared button on the right of bottoms in header image, see below with some changing.
After changing the mode for edit, you have click the blue button, "change image".
And then you can find out below small window to upload your image.
Sometimes you will be disappointed with the screen you see when you upload an image. The size of the image to be uploaded and the header image do not match, so it is only partially visible. In this case, use the following method.
First, you click with right-click on your mouse. And then go to the Inspect mode.
If you can go to the inspect mode, see the coding area on the right side.
And the return to the header image, click it. You can get the size information from the image as follow as below.
If you can get the image size successfully, go to the editor such as Photoshop.
You can adjust the size to fit the actual header image size.
Adjust the style, proportions, and brightness to suit the case.
Below is the result to change the header image in Weebly.
The way for changing one page design of theme in Weebly
In the case of Weebly, the blog contents are not separately saved for backup purposes. Also, since there are no pagination functions and bulletin boards in the blog content, it isn't easy to count or display your own writing. I have been able to solve this inconvenience in my way. Therefore, it is still being used well, so it is up to you to get used to it. Instead, I'm posting this as a tip about what I've learned while adapting.
Today is one of them. If you look at Weebly or any other website builder, you can choose the design and layout of your site through themes.
However, there will be times when you need to modify the pages of one or more of those themes.
For instance, I had to alter the main site while running the Girin Instruments site. The site consists of five menus: Main, Service, About, Demo, and Contact. (For reference, it is recommended to have around seven menus.) I want to modify only the central part of these menus. However, from the conclusion, it is impossible to completely change one page's design in one theme.
If you want, you'd probably need to create a second site and link between that and the original location to have a single page use a different theme.
But creating a second site is very cumbersome. I hope this area will be resolved soon with the bulletin board in Weebly.
First of all, in my case, I would like to show you how I edited to change only one page of the thema.
First, click the page at the top of the editor of the Pages you want to change, and then change the header time to No Header.
Put the main image you want to put in the space that is created when the header disappears. And go to the Inspect with a mouse right click.
If you go to the inspect mode, it will appear in the program coding window on the right side of the window. Click on the image to see the image size information as shown below. (Knowing the image size in this way is helpful when creating banners or intro images.)
Adjust the image to size using Photoshop or other image editor.
Below is the finished page.
As you can see, the main intro screen has shrunk and the main program, Risk Weather, has risen to the top. This is to make the main program appear first when you click on the site.
It's a good option to turn a page into a completely different page, but it's also a good idea to use a little variation like this.
5 characteristics of effective website design
Web design is the process of designing the visual look and feel of a website. A web designer focuses on planning the user experience, wireframe layout, organizing content and images in a way that tells a story, and designing the final UI.
Your homepage is your first impression, so it's important to design it well. Design can be subjective, and here are a few things to keep in mind to design an effective and well-designed site.
1. Excellent visual design.
Web design is at the core of a great site.
Some of the most effective website design layouts are the simplest. Strategically using white space can really bring out the amazing elements of your website! Margins, also known as whitespace, are areas of a website that are intentionally left blank.
Whitespace includes white space between images and text blocks, blank areas in the margins of each page, and even spaces between characters and words. Although it may not look like much, white space is an essential design element for effective website design. The whitespace doesn't mean only the white color.
The Tesla site is a site that makes good use of the effect of this blank space. It feels like nothing is on the page, but it contains all the essential elements. Just follow the big car image, and you can find the model you want and buy it.
In addition, a design that fully utilizes consistent and visual symbolic effects provides users with trust and comfort. It is recommended to choose color tones for each purpose and business and use them consistently. Personally, I'd like to take the fancy Nancy site as an example. The color pink is not often used in the usual website design. However, it showed the boldness of changing the site's color all pink to match the concept of the children's book and the main character, Nancy. That color is consistent without being tacky or awkward at all, and it is designed so that users can comfortably enter the site with their children and enjoy the content.
2. High-quality content.
If your site doesn't have high-quality content, you can forget about SEO.
If you copy similar content from another site and use it as it is, the quality of the content will deteriorate because there is no reason for users to come to the site and see it. It's easy to get bored with information that's all over the place in the same format. Instead, it is better to create content according to one's colors in an honest tone with open-mindedness. It is recommended to do as much research as possible to write down the information you have made yourself and create an image of yourself as much as possible. Such effort is the basic to create differentiated content.
3. Intuitive navigation
The structure of your website should be intuitive and easy to navigate. People are familiar with specific general website layouts. Being unique is usually a good thing, but it might be a better idea to take advantage of something users are already comfortable with and are familiar with. The maximum time a user can focus by clicking on your site is 8 seconds. You need to keep users on your site in 8 seconds.
It's easy to think of a guest coming to your house. Guests will keep looking at their watches in a cluttered, messy, and uncomfortably cluttered home, wanting to leave soon. But in a clean, comfortable, well-appointed home, you'll sit on the sofa and ask questions. The same goes for websites. When a user clicks on your site, something catches their eye and makes you feel comfortable, and they want to stop by again. It would help if you made it quick and easy for your visitors to find the information they are looking for.
4. Reliable Information.
The information posted on the site must be reliable. This will be fundamental in all human relationships and life. Misinformation, misinformation, and inconsistent content leave users with an unpleasant experience, missing valuable information they can get when they click on the site.
How many internet users are in the world? How many websites are there? The site internetlivestats.com shows us the number. Providing reliable information above all else is the key to long-running in the countless created websites.
5. Mobile compatibility.
A mobile website is designed to be compatible with viewing on mobile devices such as mobile phones, tablets, etc. Mobile devices have much smaller screens than regular PCs. Modern mobile devices are fast and powerful but can be slow compared to traditional PCs. A mobile website should be designed to take into account all the unique features of a mobile device.
Regular websites load much slower on mobile devices than mobile websites. This can result in your visitors losing interest in you and moving to something else. On the other hand, mobile websites have fast connection speeds and make your visitors much more likely to convert into paying customers by letting them contact and engage immediately.
Myungja Anna Koh