{"id":44198,"date":"2023-08-04T15:48:50","date_gmt":"2023-08-04T15:48:50","guid":{"rendered":"https:\/\/ubuntuhandbook.org\/?p=44198"},"modified":"2024-05-05T15:41:53","modified_gmt":"2024-05-05T15:41:53","slug":"startup-animation-with-single-image-ubuntu","status":"publish","type":"post","link":"https:\/\/ubuntuhandbook.org\/index.php\/2023\/08\/startup-animation-with-single-image-ubuntu\/","title":{"rendered":"Set A Photo Image for Boot Screen in Ubuntu 24.04 |22.04"},"content":{"rendered":"<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/10\/ubuntu-new-logo.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-43228\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/10\/ubuntu-new-logo-250x250.webp\" alt=\"\" width=\"250\" height=\"250\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/10\/ubuntu-new-logo-250x250.webp 250w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/10\/ubuntu-new-logo-300x300.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/10\/ubuntu-new-logo-600x600.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/10\/ubuntu-new-logo-768x768.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2022\/10\/ubuntu-new-logo.webp 1200w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/a><\/p>\n<p><b>Want to customize the startup, and shutdown animation screen with a single background image? Here&#8217;s how to do the trick in Ubuntu 22.04 and Ubuntu 23.04.<\/b><\/p>\n<p>I&#8217;ve written a tutorial about how to <a href=\"https:\/\/ubuntuhandbook.org\/index.php\/2022\/10\/replace-manufacturer-ubuntu\/\" target=\"_blank\" rel=\"noopener\">disable the Manufacturer Logo<\/a> in boot animation.<\/p>\n<p>For request, this is a step by step guide shows how to create a basic plymouth theme with only a background image. And, it should work in all current Ubuntu releases, and even other Linux distributions.<\/p>\n<h3>Step 1: Create Plymouth Theme<\/h3>\n<p>As you may know, the startup, shutdown and restart animation screens are handled by Plymouth with themes.<\/p>\n<p>Each Plymouth theme has its <b>theme-name<\/b> folder under <code>\/usr\/share\/plymouth\/themes\/<\/code> directory, which usually contains:<\/p>\n<ul>\n<li><b>theme-name.plymouth<\/b><\/li>\n<li><b>theme-name.script<\/b><\/li>\n<li><b>Image files (.png).<\/b><\/li>\n<\/ul>\n<p><b>NOTE: In all commands\/config files below, replace &#8216;mybootscreen&#8217; with your desired name. Lazy men can just copy &amp; paste without changing anything.<\/b><\/p>\n<p><b>1.<\/b> To create a Plymouth theme, first press <b>Ctrl+Alt+T<\/b> on keyboard to open a terminal window.<\/p>\n<p>When terminal opens, run command to create a theme folder, named &#8220;<code>mybootscreen<\/code>&#8220;:<\/p>\n<pre>sudo mkdir -p \/usr\/share\/plymouth\/themes\/mybootscreen<\/pre>\n<p><b>2.<\/b> Then, run command to navigate to that folder as working directory:<\/p>\n<pre>cd \/usr\/share\/plymouth\/themes\/mybootscreen<\/pre>\n<p><b>3.<\/b> Now, create &amp; edit the &#8220;<code>theme-name.plymouth<\/code>&#8221; file by running command:<\/p>\n<pre>sudo gedit mybootscreen.plymouth<\/pre>\n<p><i><strong>replace <code>gedit<\/code> with <code>gnome-text-editor<\/code> for Ubuntu 24.04<\/strong>. Or, use <code>nano<\/code> that works in most Linux.<\/i><\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/create-plytheme.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44200\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/create-plytheme-600x380.webp\" alt=\"\" width=\"600\" height=\"380\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/create-plytheme-600x380.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/create-plytheme-300x190.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/create-plytheme-768x486.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/create-plytheme.webp 813w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><b>4.<\/b> When file opens, paste following lines and save it!<\/p>\n<pre>[Plymouth Theme]\r\nName=mybootscreen\r\nDescription=a basic Plymouth theme with only background image\r\nModuleName=script\r\n\r\n[script]\r\nImageDir=\/usr\/share\/plymouth\/themes\/mybootscreen\r\nScriptFile=\/usr\/share\/plymouth\/themes\/mybootscreen\/mybootscreen.script<\/pre>\n<p><i>For nano text editor, press <b>Ctrl+X<\/b>, type <b>Y<\/b> and hit Enter to save file.<\/i><br \/>\n<a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/example-plymouth.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44201\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/example-plymouth-600x365.webp\" alt=\"\" width=\"600\" height=\"365\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/example-plymouth-600x365.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/example-plymouth-300x183.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/example-plymouth-768x468.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/example-plymouth.webp 823w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><b>5.<\/b> Next, create and edit the &#8216;theme-name.script&#8217; file by running command:<\/p>\n<pre>sudo gedit mybootscreen.script<\/pre>\n<p><strong><i>Also, replace <code>gedit<\/code> with <code>gnome-text-editor<\/code> or <code>nano<\/code> accordingly.<\/i><\/strong><\/p>\n<p>When file opens, paste the following lines and save it:<\/p>\n<pre>\/\/ Get Screen Width and Height\r\nscreen.w = Window.GetWidth();\r\nscreen.h = Window.GetHeight();\r\n\r\n\/\/ Specify background image, and scale to fit screen width &amp; height.\r\nmy_image = Image(\"myimage.png\");\r\nresized_my_image = my_image.Scale(screen.w, screen.h);\r\n\r\n\/\/ Place the 'resized_my_image' on the screen.\r\nmy_sprite = Sprite(resized_my_image);\r\n\r\n\/\/ Set the priority of 'my_sprite', number -10 in the case.\r\n\/\/ If multiple images present, the one with higher 'Z' will\r\n\/\/ be drawn on top.\r\nmy_sprite.SetZ(-10);<\/pre>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/plymouth-script.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44202\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/plymouth-script-600x473.webp\" alt=\"\" width=\"600\" height=\"473\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/plymouth-script-600x473.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/plymouth-script-300x237.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/plymouth-script-768x606.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/plymouth-script.webp 1004w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p><b>6.<\/b> Copy or move your desired background image (PNG) to the &#8216;<code>\/usr\/share\/plymouth\/themes\/mybootscreen<\/code>&#8216; directory.<\/p>\n<p>To do so, you may right-click on the folder that contains your photo image, then select &#8220;<b>Open in Terminal<\/b>&#8221; to open that folder as working directory. Finally, run command to copy\/move the file:<\/p>\n<pre>sudo cp your_image_file.png \/usr\/share\/plymouth\/themes\/mybootscreen\/myimage.png<\/pre>\n<p><b>Here you HAVE to replace &#8220;your_image_file.png&#8221; accordingly.<\/b><br \/>\n<a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/move-myimage.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44203\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/move-myimage-600x406.webp\" alt=\"\" width=\"600\" height=\"406\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/move-myimage-600x406.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/move-myimage-300x203.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/move-myimage-768x520.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/move-myimage.webp 1280w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<h3>Step 2: Change file permissions<\/h3>\n<p>This step is optional if you did the previous step in local machine. In case you moved the theme folder to reimplement in another machine, try changing the theme folder permission by running command:<\/p>\n<pre>sudo chmod -R 755 \/usr\/share\/plymouth\/themes\/mybootscreen<\/pre>\n<h3>Step 3: Apply the Theme<\/h3>\n<p><i>This Step works only for Ubuntu based systems!<\/i><\/p>\n<p><b>1.<\/b> First, press <b>Ctrl+Alt+T<\/b> on keyboard to open a terminal window. When it opens, run command to install the theme you just created as an alternative:<\/p>\n<pre>sudo update-alternatives --install \/usr\/share\/plymouth\/themes\/default.plymouth default.plymouth \/usr\/share\/plymouth\/themes\/mybootscreen\/mybootscreen.plymouth 1<\/pre>\n<p><b>2.<\/b> Then, run command below to show the theme selection screen:<\/p>\n<pre>sudo update-alternatives --config default.plymouth<\/pre>\n<p>Type the number (<i>number 3 in screenshot<\/i>) for your theme and hit Enter!<\/p>\n<p><a href=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/apply-mybootscreen.webp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-44204\" src=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/apply-mybootscreen-600x298.webp\" alt=\"\" width=\"600\" height=\"298\" srcset=\"https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/apply-mybootscreen-600x298.webp 600w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/apply-mybootscreen-300x149.webp 300w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/apply-mybootscreen-768x381.webp 768w, https:\/\/ubuntuhandbook.org\/wp-content\/uploads\/2023\/08\/apply-mybootscreen.webp 1002w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>Finally, reboot your machine to see the change!<\/p>\n<h3>Last words<\/h3>\n<p>You have to do &#8216;Step 1&#8217; carefully. A small mistake can cause blank boot screen, though your system still boot and work without issue!<\/p>","protected":false},"excerpt":{"rendered":"<p>Want to customize the startup, and shutdown animation screen with a single background image? Here&#8217;s how to do the trick in Ubuntu 22.04 and Ubuntu 23.04. I&#8217;ve written a tutorial about how to disable the Manufacturer Logo in boot animation. For request, this is a step by step guide shows how to create a basic [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":43228,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[2083],"class_list":["post-44198","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howtos","tag-boot"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/44198","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/comments?post=44198"}],"version-history":[{"count":0,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/posts\/44198\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media\/43228"}],"wp:attachment":[{"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/media?parent=44198"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/categories?post=44198"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubuntuhandbook.org\/index.php\/wp-json\/wp\/v2\/tags?post=44198"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}